Question

注1 ：我不拥有我尝试应用此脚本的网站，因此我无法访问源代码进行手动编辑。

注意2 ：我需要PURE javascript（不是jquery）。我将在tampermonkey中使用Firefox v56中的脚本，并且我不想加载任何外部* .js库。我需要PURE JS代码。

好的，所以在这里......

有问题的网站body内有一个按钮，如下所示：

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

在其他页面元素中，有一个div元素，如下所示：

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

按下上面的按钮后：
- 页面动态构建/创建script元素并将其插入页面head中 - 然后填写隐藏的＆＃39;通过从某个数据库中提取信息来获取内容的div元素 - 然后通过将div从style更改为display: none，使上面提到的display: 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>

现在，我所描述的并不会立即发生。这需要时间。它总是随机的时间。我观察了在观察萤火虫时发生的事情，从我可以说它使用一些谷歌回收脚本，并从一些数据库中提取所有信息，将其填入弹出窗口。

我想要什么？：我想在某个地方放一个按钮＆＃39;在div弹出窗口内部，所以一旦我点击它，我就可以复制一些元素的innerText，例如。技能名称＆＃39;。我不需要你帮我插入按钮。我想出来了。

有什么问题？：我无法锁定＆＃39; （钩子）div弹出窗口内的任何元素，因为一旦我的脚本已经完成其工作，其内容会动态加载，而单击按钮后原始页面创建的动态脚本是＆＃39;加载＆＃39;最后。

所以我无法找到＆＃39;元素并使用document.getElementsByClassName或document.getElementsByTagName或document.querySelector等将其置于变量中。

我已经在谷歌搜索了解决方案，而且我无法找到可用于此的代码示例。我已经尝试过超时功能，只是为了看看我是否可以勾选＆＃39;一旦它出现，它就是该div弹出窗口的一部分。

我试过测试这样的东西：

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

并且......有时候这样有效，有时它不会。而这一切都取决于我选择我的功能以等待的时间。因此，如果有问题的网站需要更多时间来填充div弹出窗口的内容，并且我的功能在此之前尝试启动，则不会发生任何事情。我可以修复＆＃39;通过增加超时值，但这不是一个解决方案。如果我把它放在...让我说在我的功能开始之前等待20秒，并且网站在3秒内显示div弹出，这意味着我将看着我的监视器屏幕，等待17秒以便脚本启动。所以我需要一种方法来访问（和更改）div弹出窗口的元素。如果弹出窗口显示需要20秒，那就这样吧，但一旦它出现，我希望我自己的javascript代码立即执行（没有任何超时或滞后）。

我环顾四周......因为我是个新手，也许我弄错了，但是我认为＆＃34;＆＃34;我需要一些事件听众＆＃39;。我不知道如何使用它们。我看到他们被用作（点燃）作为点击＆＃39;事件。但我需要（如果存在这样的事情）一个事件，一旦某个元素出现就会启动我的代码。也许在我的情况下，当隐藏的div将其状态从display:none更改为display:block时，可能会附加到该时刻。我不知道，那就是我的头脑风暴＆＃39;如何绕过它，即使我不知道如何编码这样的东西。：（

我希望，我已经设法解释了问题和我需要的东西。

如果有人决定附上代码示例，他只能添加＆＃39;例如，div弹出窗口的某些元素内的按钮。在<p class="attack_skill">内或只是改变背景或类似的东西。主要目标是告诉我如何勾选＆＃39;该元素（或任何属于div弹出窗口的元素）动态创建自己。

提前感谢所有决定阅读我的小说＆＃39;并试着帮助我！

Answer 1

一种选择是使用setInterval（和clearInterval），而不是setTimeout，以poll为您所需的条件：

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);

Answer 2

您可以使用Mutation Observers，此代码将跟踪.returnprofile元素的任何更改，并在响应中触发回调。（这里使用超时模拟更改）：

// Select the node that will be observed for mutations
var targetNode = document.querySelector('.returnprofile');

// Options for the observer (which mutations to observe)
var config = { childList: true, characterData: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    targetNode.style.backgroundColor = 'tomato';

   // Uncomment the next line if you want to run this callback only once, otherwise it will run anytime targetNode is mutated.
   //observer.disconnect();
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

setTimeout(function() {
	targetNode.innerHTML = "I'm changed";
}, 3000);

<div class="returnprofile js-only">Not Changed</div>

javascript修改动态加载的弹出元素

2 个答案: