javascriptは動的にロードされたポップアップ要素の内容を変更します

sarah997

注1:このスクリプトを適用しようとしているWebサイトを所有していないため、手動編集用のソースコードにアクセスできません。

注2:純粋なjavascript(jqueryではない)が必要です。Firefox v56のtampermonkey内のスクリプトを使用しますが、外部の* .jsライブラリをロードしたくありません。PUREJSコードが必要です。

さて、ここに行きます...

問題のサイトの内部にbodyは、次のようなボタンがあります。

<button class="bad_button js-only">reply</button>

他のページ要素の中にはdiv、次のような要素が1つあります

<div class="returnprofile js-only" style="display: none;"></div>

上記のボタンを押すと:
-ページは動的にscript要素を構築/作成し、ページ内に挿入します-次に、データベースから情報を取得head
してその「非表示」div要素にコンテンツを入力します
-次に、上記の必須div要素を変更して表示しますstyleからdisplay: nonedisplay: block
-最後に、私は、このようなポップアップそのショーの情報を提供しています:

<div class="returnprofile js-only" style="display: block;">
    <aside class="profile-flap js-captcha">
        <ul>
            <li>
                <h1>nick name:</h1>
                <p>fR3r0X</p>
            </li>

            <li class="skill">
                <h1>
                    <span class="most_used">Cyclone</span>
                </h1>
                <p class="attack_skill">
                    Ancestral Warchief
                </p>
            </li>
        </ul>
    </aside>
</div>

さて、私が説明したことはすぐには起こりません。時間がかかる。そして、それは常にランダムな時間です。私はfirebugを監視しているときに何が起こっているかを観察しました。そして、それがいくつかのgoogle recaptchaスクリプトを使用していることがわかり、データベースからすべての情報を取得してポップアップに入力します。

何が欲しい?ポップアップ
内の「どこかに」ボタンを配置したいので、ボタンdivをクリックすると、いくつかの要素のinnerTextをコピーできます。スキル名'。ボタンの挿入を手伝ってくれる必要はありません。私はそれを理解します。

何が問題ですか?
そのdivポップアップ内の要素を「ロック」(フック)することはできませんこれは、スクリプトの作業が完了するとコンテンツが動的に読み込まれ、ボタンをクリックすると元のページが作成する動的スクリプトが「最後にロードされました。

そのため、要素を「見つけて」、document.getElementsByClassNameordocument.getElementsByTagNameまたはdocument.querySelectorなどを使用して変数に入れることができません

私はすでにこことグーグルで解決策を探しましたが、これに使用できるコード例が見つかりません。タイムアウト付きの関数を作成してみましたが、そのdivポップアップの一部である要素の1つが表示されたら、それを「フック」できるかどうかを確認しました。

私はこのようなものをテストするためだけに試しました:

setTimeout( function () {
    var skill = document.querySelector('.attack_skill');
    skill.style.background = "yellow";
}, 3000);

そして...それが機能することもあれば、機能しないこともあります。そして、すべては、関数を「待機」するように選択した時間の長さに依存します。したがって、問題のWebサイトがそのdivポップアップの内容を埋めるのに時間がかかり、その前に私の関数が起動しようとしても、何も起こりません。タイムアウト値を増やすことでそれを「修正」できますが、それは解決策ではありません。関数が開始するまで20秒待機し、Webサイトに3秒でdivポップアップが表示されるとすると、モニター画面が表示され、スクリプトが起動するまで17秒待機します。 。そのため、divポップアップが表示されたらすぐに、そのポップアップの要素にアクセス(および変更)する方法が必要です。そのポップアップが表示されるのに20秒かかる場合はそうですが、表示されたら、自分のjavascriptコードを(タイムアウトやラグなしで)即座に実行したいと思います。

私は周りを見回しました...そして私は初心者なので、それはすべて間違っているかもしれませんが、「私はいくつかの「イベントリスナー」が必要だと思います」。それらの使用方法がわかりません。 「クリック」イベントとして使用(起動)されていますが、特定の要素が表示されたらコードを開始するイベントが必要です(そのようなものが存在する場合)。私の場合は、非表示の瞬間にアタッチできます。 divの状態をからdisplay:none変更display:blockます。そのようなものをどのようにコーディングするかわからない場合でも、それを回避する方法を「ブレインストーミング」していたのかわかりません。:(

何が問題で何が必要かを説明できたと思います。

誰かがコード例を添付することにした場合、そのdivポップアップの要素のいくつかの中にボタンを「追加する」ことができます。内部<p class="attack_skill">または単に背景などを変更します。主な目標は、動的に自分自身を作成する要素(またはdivポップアップの一部である要素)に「フック」する方法を示すことです。

私の「小説」を読んで私を助けようと決心したすべての人に事前に感謝します!

ダンO

1つのオプションは、の代わりにsetInterval(およびclearIntervalを使用して、目的の条件setTimeoutポーリングすることです。

var x;

// run some code every 1000ms to check for the presence of an element    
x = setInterval(function() {
  const el = document.querySelector('blahblahblah');

  if (el !== null) {
    // my element is on the page; no need to poll any more
    clearInterval(x);
    // do some things here
    el.style.background = 'yellow';
  }
}, 1000);

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

PHP:動的にアップロードされた画像を特定の色に変換します(動的色)

分類Dev

Javascript / jQueryの選択ドロップダウンの動的に追加されたオプションを選択(変更をトリガー)します

分類Dev

Djangoはアップロードされた画像のURLの名前を変更します

分類Dev

Djangoにアップロードされた画像の元の作成/変更時間を特定/保存します

分類Dev

ドロップされたアイテムの色を変更し、jqueryにドロップされた後にアイテムを制限します

分類Dev

画面/ウィンドウの高さを変更したときにポップアップモーダル内部要素のdivのサイズを変更するにはどうすればよいですか?

分類Dev

Chrome拡張機能のポップアップは、内容を変更した後でもリセットされます

分類Dev

JavaScriptを使用してアップロードされた画像に境界線を変更する方法

分類Dev

VichUploaderとLiipImagine:アップロードされた画像のサイズを変更して保存します

分類Dev

Android:スピナーポップアップは機能していませんが、ドロップダウンとして機能しています。このドロップダウンをポップアップに変更する方法

分類Dev

tinymce-アップロードされた画像のURLパスを変更します

分類Dev

Gitlab:アップロードされた古いアセットのドメインを変更する方法は?

分類Dev

動的ドロップダウンリストで選択されたインデックス変更イベントは、常に最初の値を返します

分類Dev

「su」を使用してユーザーを変更した後、18.04.1 にアップグレードした後、プロンプトが変更されました

分類Dev

プロットチャートは、データが変更されたときに最後に新しいポイントをプロットします

分類Dev

アップロードされた画像の宛先を正しく変更して非表示にするにはどうすればよいですか?

分類Dev

ドロップゾーンの変更:アップロードされた画像を別のdivに表示

分類Dev

ユーザーの動画がYouTubeから削除された場合、注目の動画を自分のWebサイトにアップロードされた最新の動画に変更するにはどうすればよいですか?

分類Dev

Angular7-動的に作成されたコンポーネントにドラッグアンドドロップ動作を追加します

分類Dev

GoogleドライブにアップロードされたPDFのMIMEタイプを変更する

分類Dev

RecyclerViewから変更されたデータを保存し、変更をアップロードするにはどうすればよいですか?

分類Dev

JBossは、Eclipse Lunaにアップグレードした後、ファイルが変更されるたびに再デプロイされます

分類Dev

データの各行のドロップダウンの選択された状態を動的に変更します

分類Dev

RESCO:JSBridgeを使用して、フォーム上のフィールドが変更されたときにルックアップフィールドに動的にルックアップビューを設定します

分類Dev

ドロップダウンリストアイテムが変更されたときに、選択したアイテムをアラートとして動的に表示します(Javascript)

分類Dev

PHPStorm 2018.5.3-ウィンドウが再度フォーカスされるまで、デプロイメントはファイルウォッチャーによって変更されたファイルを自動アップロードしません

分類Dev

ヘルパーでドラッグアンドドロップされたdivタグの名前を変更します:「クローン」?

分類Dev

クライアントにアップロードされたファイルの名前を変更します

分類Dev

アップロードファイルがtxtまたは変更された拡張子であることを手動で確認する方法は?

Related 関連記事

  1. 1

    PHP:動的にアップロードされた画像を特定の色に変換します(動的色)

  2. 2

    Javascript / jQueryの選択ドロップダウンの動的に追加されたオプションを選択(変更をトリガー)します

  3. 3

    Djangoはアップロードされた画像のURLの名前を変更します

  4. 4

    Djangoにアップロードされた画像の元の作成/変更時間を特定/保存します

  5. 5

    ドロップされたアイテムの色を変更し、jqueryにドロップされた後にアイテムを制限します

  6. 6

    画面/ウィンドウの高さを変更したときにポップアップモーダル内部要素のdivのサイズを変更するにはどうすればよいですか?

  7. 7

    Chrome拡張機能のポップアップは、内容を変更した後でもリセットされます

  8. 8

    JavaScriptを使用してアップロードされた画像に境界線を変更する方法

  9. 9

    VichUploaderとLiipImagine:アップロードされた画像のサイズを変更して保存します

  10. 10

    Android:スピナーポップアップは機能していませんが、ドロップダウンとして機能しています。このドロップダウンをポップアップに変更する方法

  11. 11

    tinymce-アップロードされた画像のURLパスを変更します

  12. 12

    Gitlab:アップロードされた古いアセットのドメインを変更する方法は?

  13. 13

    動的ドロップダウンリストで選択されたインデックス変更イベントは、常に最初の値を返します

  14. 14

    「su」を使用してユーザーを変更した後、18.04.1 にアップグレードした後、プロンプトが変更されました

  15. 15

    プロットチャートは、データが変更されたときに最後に新しいポイントをプロットします

  16. 16

    アップロードされた画像の宛先を正しく変更して非表示にするにはどうすればよいですか?

  17. 17

    ドロップゾーンの変更:アップロードされた画像を別のdivに表示

  18. 18

    ユーザーの動画がYouTubeから削除された場合、注目の動画を自分のWebサイトにアップロードされた最新の動画に変更するにはどうすればよいですか?

  19. 19

    Angular7-動的に作成されたコンポーネントにドラッグアンドドロップ動作を追加します

  20. 20

    GoogleドライブにアップロードされたPDFのMIMEタイプを変更する

  21. 21

    RecyclerViewから変更されたデータを保存し、変更をアップロードするにはどうすればよいですか?

  22. 22

    JBossは、Eclipse Lunaにアップグレードした後、ファイルが変更されるたびに再デプロイされます

  23. 23

    データの各行のドロップダウンの選択された状態を動的に変更します

  24. 24

    RESCO:JSBridgeを使用して、フォーム上のフィールドが変更されたときにルックアップフィールドに動的にルックアップビューを設定します

  25. 25

    ドロップダウンリストアイテムが変更されたときに、選択したアイテムをアラートとして動的に表示します(Javascript)

  26. 26

    PHPStorm 2018.5.3-ウィンドウが再度フォーカスされるまで、デプロイメントはファイルウォッチャーによって変更されたファイルを自動アップロードしません

  27. 27

    ヘルパーでドラッグアンドドロップされたdivタグの名前を変更します:「クローン」?

  28. 28

    クライアントにアップロードされたファイルの名前を変更します

  29. 29

    アップロードファイルがtxtまたは変更された拡張子であることを手動で確認する方法は?

ホットタグ

アーカイブ