window.parent.document 在 firefox 中工作，但不在 chrome 和 IE 中答案

【问题标题】：window.parent.document working in firefox , but not in chrome and IEwindow.parent.document 在 firefox 中工作，但不在 chrome 和 IE 中
【发布时间】：2013-07-22 07:18:56
【问题描述】：

我的概念是从 iframe 更新主页中文本框的值。此代码在 firefox 中有效，但在 Internet Explorer 和 Chrome 中无效。 main.html 和 frame.html 都在同一个位置。我需要建议以使其在所有浏览器中都能正常工作。

main.html

<!DOCTYPE html>
<html>
<head>
<title> main window </title>
</head>
<body>
Parent textbox :<input type="text" id="parentbox"></br></br></br>
<iframe src="frame.html" ></iframe>
</body>
</html>

frame.html

<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function PushValues()
{
 var frame_value = document.getElementById("framebox").value;
 window.parent.document.getElementById("parentbox").value =frame_value;
}
</script>
</head>
<body>
<input type="text" id="framebox" >
<input type="button" value ="fill" onclick="PushValues()">
</body>
</html>

【问题讨论】：

控制台有错误吗？
你试过window.top.document
代码在 Firefox、Chrome、Safari 和 IE 中对我来说工作正常，尽管你应该关闭你的标签。
@Chris 我确实有 iframe 的结束标签，我只是在这里错过了它。你能告诉我你的浏览器版本吗？
@Cherniv 我在 Chrome 控制台中收到以下错误。 1.Blocked a frame with origin "null" from accessing a frame with origin "null". 2.Protocols, domains, and ports must match. Uncaught TypeError: Cannot call method 'getElementById' of undefined .

标签： javascript jquery html iframe

【解决方案1】：

根据安全策略，跨域访问受到限制。如果您尝试在域 2 中显示来自域 1 的页面并尝试从域 1 中的脚本操作域 2 中页面的 DOM，则会发生这种情况。如果您从服务器上的同一位置运行页面。这不应该发生。但是，如果您只是将它们保存为 HTML 文件并尝试在浏览器中打开它们，它应该不起作用。我为您的代码创建了两个 jsbin，它正在 chrome 上运行。尝试使用以下链接访问它们。

Main.html: http://jsbin.com/afazEDE/1 iframe.html:http://jsbin.com/ayacEXa/1/

尝试在 JSBin 中以编辑模式运行 main.html，方法是在 chrome (F12) 中保持控制台打开并单击填充按钮。它不起作用，并会显示错误。如果您按原样运行它们（在 JSBin 的运行模式下），它将起作用。

【讨论】：

【解决方案2】：

jquery -

function PushValues()
{
  var frame_value = $('#framebox').val();
  parent.$('body').find('#parentbox').val(frame_value);
}

它总是对我有用。

【讨论】：

如果 parent 不包含 jQuery 怎么办？
我没听懂你想说什么。此代码写入“IFrame”，因此“IFrame”始终存在父级。
你说得对，parent 永远存在。但是parent.$ - 不是 100% 存在！
是的，你是对的。如果父窗口不包含创建问题的 jQuery 文件。
在 IE 中对我有效，但在 Chrome 中无效

【解决方案3】：

在 xamp 或 wamp 等服务器上运行此代码，它不会直接运行

Main.html

<!DOCTYPE html>
<html>

<head>
    <title> main window </title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
    Parent textbox :<input type="text" id="parentbox" value=""></br></br></br>
    <iframe src="iframe.html"></iframe>
    <script>
        window._fn = {
            printval: function (response) {
                $("input").val(response);
            },
        };
    </script>
</body>

iframe

<!DOCTYPE html>
<html>
<head>
    <title> frame window </title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
    <input type="text" id="framebox">
    <input type="button" value="fill" onclick="PushValues()">

    <script language="javascript">
        function PushValues() {
            window.parent._fn['printval']($('input').val());
        }

    </script>
</body>

</html>

【讨论】：

刚刚发现即使您的代码也可以正常工作，只是需要在服务器级别运行以避免 iframe 的跨域问题。

【解决方案4】：

既然你使用的是 jQuery，试试这个

var frame_value = $('#framebox').val();
$('#parentbox', window.parent.document).val(frame_value);

【讨论】：

我试过这个，这就是为什么我有那个 jqery。甚至这仅在 Firefox 中有效，在 chrome 中无效。
@user2564024 那你应该看看softwareas.com/cross-domain-communication-with-iframes

【解决方案5】：

您应该尝试与 iframe 和 Internet Explorer 高度相关的 P3P 策略。响应头设置为 iframe 文档

header key= 'P3P'   header value: 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'

【讨论】：