iframe 的工作答案

【问题标题】：Working of an iframeiframe 的工作
【发布时间】：2013-10-04 23:41:28
【问题描述】：

这是一段使用脚本填充 iframe 内容的 sn-p 代码：

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
        $(document).ready(function() {
            $('iframe').contents().find('body').html('<script>console.log($("div"))<\/script>');
        });
        </script>
    </head>
    <body>
        <div>Test</div>
        <iframe />
    </body>
</html>

执行时，我们看到 iframe 可以访问父级的 DOM，并且我们看到 jQuery 选择器选择了 div。 iframe 不包含 jQuery，但它可以访问父级的 jQuery 对象。

但是，如果我们通过 iframe src 包含编写相同的内容，则行为会有所不同：

test.html:

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body>
        <div>Test</div>
        <iframe src="another.html">
    </body>
</html>

另一个.html：

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
        $(document).ready(function() {
            console.log($('div'));
        });
        </script>
    </head>
    <body>

    </body>
</html>

我们现在看到该页面没有列出任何 div。此外，如果我们在子页面中不包含 jQuery js，则会引发错误。

请注意，两个页面都在同一个域中，因此我们没有同源策略问题。

我的问题是：

为什么 2 - a 的行为不同。从父级和 b. 操作 iframe DOM。通过 src 包含 iframe 内容？
有没有办法让父母可以访问孩子而不是相反？

【问题讨论】：

你能澄清一下你的测试用例吗？你在测试什么？测试用例并不相等。
让我澄清一下 - 一方面我通过 jQuery 以编程方式在 iframe 中生成 HTML，另一方面我通过包含包含代码的 src 来实现。如果你愿意，我会让它变得相似，但如果我这样做，第二个会抛出错误。如果看到2的输出，第一个返回父页面的div，第二个没有。

标签： javascript jquery iframe

【解决方案1】：

所以第一段代码给出1，第二段代码给出0？

这似乎是正确的。

在第一个示例中，$ 绑定到父框架。在第二个示例中，由于您有一个新的 jQuery 实例，它已绑定到 iframe。

在：

$(document).ready(function() {
    $('iframe').contents().find('body').html('<script>console.log($("div"))<\/script>');
});

jQuery 的html 函数将对插入的HTML 的脚本部分执行eval。 eval 将在父级范围内运行，因此它使用 $ 的父级实例。

如果您只是将脚本移动到 iframe，它将失败，因为它无权访问 $。

【讨论】：

虽然这似乎是原因，但我不确定。原因是，如果我从 another.html 中删除该行：<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>，您不会期望它使用父级的 jQuery 对象吗？你会发现它没有发生。
不，当然不是因为$ 没有在 iframe 中定义。但是，由于您使用的是 jQuery 的 html，因此脚本部分实际上有一个 eval，它可以让您访问父级的 $。
好吧，这似乎是有道理的！你能告诉我是否有一种方法可以在 iframe 中嵌入 HTML，而不需要父级评估它而孩子评估它？
当然：不要使用 jQuery 的 html 函数。如果你没有eval 的魔力，你就不会遇到这个奇怪的范围界定问题。
非常感谢！这就是我所坚持的。