Question

以下是一段代码，它使用脚本填充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包含编写相同的内容，则行为是不同的：

的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>

another.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内容？
有没有办法让父母有权访问孩子，反之亦然？

Answer 1

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

这似乎是正确的。

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

在：

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

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

如果您刚刚将脚本移至iframe，则会失败，因为它无法访问$。

使用iframe

1 个答案: