javascript - 使用 Javascript 将 HTML5 沙盒属性添加到 iframe

Question

我有一个空的 iframe 和一个按钮：

<input type="button" name="B1" value="google" onclick="frames['IFrameName1'].location.href='https://www.google.com/'">

但是（除了.location.href）我需要设置属性sandbox="allow-forms allow-scripts allow-same-origin，因为框架站点“deframes”。如何设置位置和沙箱？

Answer 1

虽然您可以将iframe.sandbox属性设置为字符串，但从技术上讲，它是一个DOMTokenListadd()接口，因此您也可以使用remove()单个标记：

let myIframe = document.createElement('iframe');
myIframe.sandbox.add('allow-scripts');
myIframe.sandbox.toggle('allow-forms');

console.log(myIframe.sandbox.toString())
// Returns: "allow-scripts allow-forms"

console.log(myIframe.outerHTML)
// Returns: <iframe sandbox="allow-scripts allow-forms"></iframe>

Answer 2

如果你想在一次点击事件上做两件事。有一个函数来做这两件事并在点击时触发该函数。

window.onload = function(){
    var button = document.getElementsByName("B1")[0]
    var iframe = document.getElementsByName("IFrameName1")[0]
    button.addEventListener('click',addSandboxAndChangeLocation,false);

    function addSandboxAndChangeLocation(){
       frames['IFrameName1'].location.href='https://www.google.com/';
       iframe.sandbox = 'allow-forms allow-scripts allow-same-origin';
    }
} 

在jsFiddle上查看！