Question

我的aspx页面中有一个iframe。代码是：

<iframe style="height: 513px; width: 1071px" id="iframe1" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="paymentprocess.aspx"></iframe>

沙箱属性是停止iframe页面占用整个窗口所必需的。付款后，由于自动重定向，响应页面在iframe中加载。我想通过javascript更改iframe的属性，以便整个窗口显示响应页面。我在javascript控制台中收到错误消息。

尝试导航顶层窗口的框架是沙盒，但是“允许顶部导航”＃46;标志未设置。

我正在使用此代码：

 if (top != self) {
     top.location = self.location;
 }

但是这会在控制台中抛出上述错误。

请有人帮我如何从子页面更改父窗口的iframe属性（在本例中为确认页面）

Answer 1

我假设您正在加载此iframe的页面以及您在iframe中加载的内容位于不同的域中（从paymentprocess.aspx解释）。如果是这种情况，由于跨源策略，您无法直接处理父文档。但是你仍然可以将消息发布到父节点，在父节点中处理此消息，并在iframe属性中使用set属性设置此额外标志。

示例代码：

来自iframe的

：

window.parent.postmessage("ChangeIframeAttributes", *);

在您的父文档中

：

window.addEventListener('message', function (event) {

    if (event.data === "ChangeIframeAttributes") {
      document.getElementById("iframeId").setAttribute("property","value");
    }

}, false);

如果您在同一个域中，则可以使用window.parent.document访问父文档，从文档对象和setAttribute获取元素。

<强>更新：

我尝试使用window.parent设置属性，并且属性获得更新但更改top.location时问题仍然存在，因为 iframe已加载并且属性修改不会受影响除非导航iframe的嵌套浏览上下文。

来自w3c，

http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html

这些标志仅在导航iframe的嵌套浏览上下文时生效。删除它们或删除整个沙箱属性对已加载的页面

没有影响

如果allow-scripts关键字与allow-same-origin关键字一起设置，并且该文件来自与iframe的文档相同的源，那么＆＃34;沙盒中的脚本＆＃34; iframe可以伸出，删除沙箱属性，然后重新加载自己，有效地完全打破了沙盒。

一般来说，动态删除或更改沙盒属性是不明智的，因为它很难推断出允许的内容和不允许的内容。

根据我的理解，有两个可行的选择。

从头开始设置标志。（这不是一个更好的方法）
通过发送网址并在父级设置window.location来使用发布消息。

伪代码：

：

<script type="text/javascript">
function f()
{
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

    // Listen to message from child window
    eventer(messageEvent,function(e) {
        var key = e.message ? "message" : "data";
        var data = e[key];
        window.location = data;

    },false);
}
</script>
<body onload="f()">

<iframe id="iframeId" src="testiframe.html" sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
</iframe>
</body>

：

<script type="text/javascript">
var callParent = function () {

    window.parent.postMessage(" " + self.location, '*');

};
</script>
<button onclick="callParent()">set parent attribute<button>

我已经使用上面的代码测试过第二种方法，但它确实有效。

希望这有用。

如何更改iframe的沙盒标志

1 个答案: