jQuery无法检测到注入的脚本来更新页面

Question

我正在尝试使用jQuery修改从外部“注入”的元素。我已经尝试过用on进行委派，但是没有用。

Here's the page，向下滚动，您将看到带有<div class="Avatar">的名为“ Sebastian”的头像。

如果我右键单击，请在控制台上键入以下内容：$('.Avatar')，将识别该元素，但这仅是因为我首先单击了该元素的“检查元素”。 jQuery以某种方式“更新”了源代码，现在它可以标识元素。

现在，尝试刷新页面并再次键入$('.Avatar')，jQuery将不会识别该元素（尽管该元素已经加载在页面上）。

您可以在“一个有效的示例”下查看如何将此脚本注入页面。

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

P.S。我尝试使用on，delegate，它不起作用。

Answer 1

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

您说过“它似乎并没有使用任何类型的iFrame，也没有使用任何东西” ，但最后还是iframe。

在元素上单击鼠标右键，然后在开发人员工具中编写$('.Avatar')的原因是找到它的原因是，一旦检查开发人员工具iframe中的元素（单击鼠标右键），就会改变。

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

子域的来源可能相同。 “相同来源”政策中有一个小的例外。 如果Windows共享相同的第二级域，例如john.site.com，peter.site.com和site.com（因此它们的公共第二级域是site.com），则可以将它们视为来自“原产地相同”。 https://javascript.info/cross-window-communication

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

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

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