javascript - jQuery 无法检测到更新页面的注入(inject)脚本

Question

我正在尝试使用 jQuery 来修改从外部“注入(inject)”的元素。我尝试过使用 on 进行委托(delegate)但没有成功。

Here's the page ，向下滚动，你会看到一个名为“Sebastian”的头像 <div class="Avatar"> 。

如果我右键单击控制台并输入:$('.Avatar') ，该元素已被识别，但这只是因为我首先单击该元素的“检查元素”。 jQuery 以某种方式“更新”了源代码，现在它可以识别该元素。

现在，尝试刷新页面并输入 $('.Avatar')同样，jQuery 不会识别该元素(尽管它已经加载到页面上)。

您可以在“工作示例”下查看如何将此脚本注入(inject)到页面中。

我的问题是，是否可以(如果可以，如何)修改此 HTML(似乎是在页面加载时动态插入的)？它似乎没有使用任何类型的 iFrame 或任何东西，它只是动态加载到页面中，但 jQuery 无法识别它(除非您通过单击实际页面上的“检查元素”来“告诉它”这样做)元素)。

附注我尝试过使用 on , delegate ，它不起作用。

Answer 1

jQuery 不会识别页面之后的元素，因为它位于另一个 iframe 中。

你说“它似乎没有使用任何类型的 iFrame 或任何东西”，但最终它是 iframe。

为什么当您右键单击元素然后在开发人员工具中编写 $('.Avatar') 时可以找到它，是因为一旦您在开发人员内部检查元素(右键单击)工具 iframe 将发生变化。

此外，您的父 iframe 和具有 avatar 元素的 iframe 具有相同的起源。在父级和其他 iframe 中运行 document.domain。带有头像的 iframe 的来源为 "app.talkjs.com"，父 iframe 的来源为 "talkjs.com"。

子域可以是同源的。“同源”政策中有一个小的异常(exception)。如果 Windows 共享相同的二级域，例如 john.site.com、peter.site.com 和 site.com(因此它们的公共(public)二级域是 site.com)，则可以将它们视为来自“同源”。 https://javascript.info/cross-window-communication

您应该能够捕获 onload iframe 事件，然后搜索 .avatar。

iframe.onload = function() {
    let newDoc = iframe.contentDocument;

    console.log(newDoc.getElementsByClassName("avatar");
};