Javascript 如何更改iframe的沙盒标志_Javascript_Html_Iframe

Javascript 如何更改iframe的沙盒标志

javascript html iframe

Javascript 如何更改iframe的沙盒标志,javascript,html,iframe,Javascript,Html,Iframe,我的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

我的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的页面和您在iframe中加载的内容位于不同的域（从paymentprocess.aspx解释）。在这种情况下，由于跨来源策略，您不能直接处理父文档。但您仍然可以将消息发布到父级，在父级中处理此消息，并使用set attribute在iframe attributes中设置此额外标志

示例代码：

从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和attribute get update设置属性，但在更改top.location时问题仍然存在，因为iframe已经加载，除非导航iframe的嵌套浏览上下文，否则属性修改不会生效

来自w3c，

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

如果allow scripts关键字与allow-same-origin关键字一起设置，并且文件与iframe的文档来自同一个来源，那么“沙盒”iframe中的脚本可以伸出手来，删除沙盒属性，然后重新加载自身，从而有效地完全脱离沙盒

一般来说，动态删除或更改沙盒属性是不明智的，因为这会使我们很难对哪些是允许的，哪些是不允许的进行推理

据我所知，有两个可行的选择

从一开始就设置标志。（哪种方式不是更好的方式）

通过发送url并在父项上设置window.location来使用post消息。

伪代码：

在主窗口上：


函数f（）
{
var eventMethod=window.addEventListener？“addEventListener”：“attachEvent”；
var eventer=window[eventMethod]；
var messageEvent=eventMethod==“attachEvent”？“onmessage”：“message”；
//收听来自子窗口的消息
事件器（messageEvent，函数（e）{
var key=e.message？“message”：“data”；
var数据=e[键]；
window.location=数据；
}，假）；
}

在iframe上：


var callParent=函数（）{
window.parent.postMessage（“+self.location，*”）；
};
设置父属性

第二种方法我已经用上面的代码进行了测试，它是有效的

希望这有帮助。

你好，Ramesh，实际上confirmation.aspx&我的父页面属于我自己的域。所以这不是问题。但我正在尝试从子页面（即confirmation.aspx）更改父页面的iframe标记的属性。我被困在那里。如果由于缺少allow top navigation属性，虽然您可以访问window.parent（我猜您无法设置，因为这是沙盒），但您无法设置该属性，那么我认为您应该使用post message，因为这是iframe或iframe与window对象之间通信的唯一方式？嗨，Ramesh，让我研究这两种解决方案，然后我会给出答案，最好将问题的标题改为“如何更改iframe的沙箱标志”，因为这个问题更具体到iframe沙箱。嗨，Ramesh，现在我还有一个问题。现在，首先在iframe窗口中加载确认页面，然后它出现在主窗口中。是否有任何原因阻止它显示在iframe中？您没有在iframe的沙盒属性中包含“允许顶部导航”权限？www.w3schools.com/tags/att_iframe_sandbox.asp

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

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

}, false);

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