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

Question

我正在尝试使用jQuery修改从外部“注入”的元素。 我试过代表团on ，但没有奏效。

这是页面 ，向下滚动，您将看到带有<div class="Avatar">名为“ Sebastian <div class="Avatar"> 。

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

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

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

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

PS我尝试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");
};