Question

我已经读过＆＃34; Can javascript running inside an iframe affect the main page?＆＃34;并了解在IFRAME中可以修改父窗口的JavaScript变量。

我还不了解的是，如果我的IFRAME没有操作父窗口，不同的jQuery版本是如何共存的。

我必须支持不同的浏览器，如IE 9 +，Firefox，Google Chrome。

我的问题：

具有更高jQuery的IFRAME是否会以任何方式影响父HTML页面的jQuery行为？

（IFRAME来自与主页不同的域）

Answer 1

我读过“在iframe中运行的javascript会影响到主页？“并了解可以从IFRAME中获取修改父窗口的JavaScript变量

这是事实，但前提是该框架与父框架在同一个域中。即使这样，iframe也必须使用window.parent或类似内容显式访问变量。

如果iframe位于其他域中，则无论如何都无法修改父级。

具有更高jQuery的IFRAME是否会以任何方式影响jQuery 父HTML页面的行为？

jQuery将自己存储为window.jQuery（或window.$），这是对current document's window only *的引用，这不会以任何方式在同域或交叉上修改父iframe -域。所以你可以在内部和外部都有不同版本的jQuery。外框，它们不会发生冲突。

_{*这链接到TJ Crowder的一个极好的答案，它解释了window对象在<iframe>元素方面的差异 - 比以往任何时候都要好得多。} < / p>

Answer 2

具有更高jQuery的IFRAME是否会以任何方式影响jQuery 父HTML页面的行为？

正如@RGraham所回答的那样，它本身不会引起冲突，因为它们属于不同的浏览环境，所以它们可以愉快地共存。

但是，理论上可能存在 您的使用 可能会影响它的边缘情况。

考虑一种情况，即您的iframe个来源都位于同一个域中（可能是您想要无缝展示的不同应用）。比如说，您的父应用程序引用了旧版本的jQuery，子应用程序引用了更新的版本。现在，您可以从您的孩子调用父版本的方法。也许是一个用例，你不能在父应用程序中更改任何内容，但只想使用来自子进程的方法调用。在这种情况下，你必须小心不要在父母身上调用一个已经失效的方法。

例如，

父（引用旧版jQuery）

<html>
    <head><script src="jquery-1.4.2.min.js"></script></head>
    <body>
        <h1>Parent</h1>
        <input id="chk" type="checkbox">
        <iframe src="child.html"></iframe>
    </body>
</html>

孩子（引用较新版本的jQuery）

<html>
    <head>
        <script src="jquery-2.1.1.min.js"></script>
        <script>
            (function($) {
                console.log("Attr: " + parent.$("#chk").attr("checked"));
                console.log("Prop from child: " + $("#chk", parent.document).prop("checked"));
                console.log("Prop from parent: " + parent.$("#chk").prop("checked"));
            } (window.jQuery));
        </script>
    </head>
    <body>
        <h1>Child</h1>
    </body>
</html>

<强>结果：

Attr: false
Prop from child: false
Uncaught TypeError: parent.$(...).prop is not a function

正如您所看到的，最后一次测试将会爆发。这是因为旧版本无法使用方法prop。

简而言之，您必须小心避免此类边缘情况并使用文档内容上下文而不是Javascript上下文。

IFRAME中的jQuery是否会影响父窗口的jQuery？

2 个答案: