使用Javascript将HTML5沙箱属性添加到iframe

时间:2012-10-22 23:34:08

标签: javascript html5 iframe sandbox

我有一个空的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”。如何设置位置和沙箱?

2 个答案:

答案 0 :(得分:3)

如果您想在一次点击活动中做两件事。有一个函数可以执行这两个操作,并在单击时激活该函数。

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上查看!

答案 1 :(得分:2)

虽然您可以将iframe.sandbox属性设置为字符串,但从技术上讲它是一个DOMTokenList接口,因此您也可以add()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>