3

下面是一段代码，它使用脚本填充 iframe 的内容：

<!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 包含来编写相同的内容，则行为会有所不同：

测试.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，它会抛出错误。

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

我的问题是：

  1. 为什么 2 - a 的行为不同。从父级和 b. 操作 iframe DOM。包括通过 src 的 iframe 内容？
  2. 有没有办法让父母可以访问孩子，反之亦然？
4

1 回答 1

1

那么第一位代码给出1，第二位代码给出0？

这似乎是正确的。

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

在：

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

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

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

于 2013-10-04T15:34:19.323 回答