jQuery 加载没有触发答案

【问题标题】：jQuery load isn't firingjQuery 加载没有触发
【发布时间】：2016-03-20 11:32:21
【问题描述】：

当有以下 HTML 页面 (index.html)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Parent</title>
</head>
<body>
    <iframe src="iframe.html"></iframe>
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
    <script>
        $(function(){
            console.log("document ready");
            $("iframe").on("load", function(){
                console.log("iframe loaded");
            });
        });
    </script>
</body>
</html>

以及以下 iframe.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Child</title>
</head>
<body>
    <p>Lorem ipsum</p>
</body>
</html>

控制台输出如下所示：

但是，“已加载 iframe”的日志丢失了。 .on("load") 似乎没有在 iframe 上被触发。

有人知道为什么吗？

编辑：

我当然激活了 JavaScript（否则我不会看到任何日志消息）
我无法编辑iframe.html，因此使用postMessage 等对我来说不是解决方法
我已在最新的 FF (47.0a2) 和 Chrome (49) 中对此进行了测试

【问题讨论】：

也在 chrome 上检查过。它的工作完美。请检查文件是否在同一文件夹中。如果没有，则提供正确的路径
我已经在这里描述了这个问题的原因和解决方案：stackoverflow.com/a/36155560/3894981

标签： javascript jquery html iframe load

【解决方案1】：

代码运行良好。也许您为 iframe 提供的路径是错误的。检查它们是否在同一个文件夹中

【讨论】：

您在哪里测试了代码（浏览器、版本、本地或服务器上）？
@user3292653 我使用 Chrome 在 fiddle 上对其进行了测试

【解决方案2】：

检查您的浏览器是否启用了javascript

编辑：

或尝试将您的 index.html 代码替换为：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Parent</title>
    <script type="text/javascript">
        function handleOnLoad(el) {
            // el is the actual iframe
            console.log("iframe loaded");
        }
    </script>
</head>
<body>
    <iframe src="iframe.html" onload="handleOnLoad(this)"></iframe>
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
    <script>
        $(function(){
            console.log("document ready");
            $("iframe").on("load", function(){
                // console.log("iframe loaded");
            });
        });
    </script>
</body>
</html>

【讨论】：

如果我不这样做，控制台将不会打印任何内容

【解决方案3】：

你的代码<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> <script> $(function(){ console.log("document ready"); $("iframe").on("load", function(){ console.log("iframe loaded"); }); }); </script>

必须在 iframe.html 中

所以你的页面看起来像下面的修改。

index.html

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
    <iframe src="iframe.html"></iframe>

</body>
</html>

iframe.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
        $(function(){
            console.log("document ready");
            $(window).on("load", function(){
                console.log("iframe loaded");
            });
        });
    </script>
</head>
<body>
    <p>Lorem ipsum</p>
</body>
</html>

【讨论】：

我需要在不更改 iframe.html 的情况下获得通知
好的，您可以在不更改 iframe.html 的情况下执行此操作。由于 src 属性，我怀疑您的 iframe 在 onload 注册之前正在加载。尝试从 iframe 中删除“src”属性。并在您的 onload 注册后添加以下行。 document.frames[0].location.href="iframe.html"。这应该工作
即使 iframe 已经加载，通常加载事件也应该被触发，但你是对的。在脚本对我有用之后放置 iframe。但是，更改 src 不是我的选择。即使它已经加载，我也需要得到通知。
$("iframe") 如果您将其放入 iframe 的文档中，将找不到任何要添加事件处理程序的元素。该文档不包含iframe 元素。
@Quentin 感谢您的指出。我在粘贴问题时忘记修改。请查看我的编辑。我已经纠正了。但是，我在之前的评论中提供了替代解决方案。