使用JS向现有的Iframe中添加新元素

Question

使用JS向现有的Iframe中添加新元素

3

我正在尝试在iframe内添加一些html元素，以个性化网站。我正在构建一个浏览器扩展程序，因此不存在跨域问题。我已经有了iframe：

<iframe id="container" src="http://www.google.com">
    <p>Your browser does not support iframes.</p>
</iframe>

然后，当文档已经加载时，我创建元素并将其插入... 但它从未显示在 iframe 中。但是我可以获取 iframe 中已存在的元素并更改其属性。所以，我可以访问元素，但不能创建新元素？为什么？

var ifr = document.querySelector("#container");
var ifrDoc = ifr.contentWindow || ifr.contentDocument;
    if (ifrDoc.document) ifrDoc = ifrDoc.document;

var elem = ifrDoc.createElement("div");
    elem.innerHTML = "Demo Box";
    elem.style.width = "50px";
    elem.style.height = "50px";
    elem.style.position = "absolute";
    elem.style.background = "red";

ifrDoc.body.appendChild(elem);

这里有一个JSFiddle演示，以便更好地了解问题（请记住扩展程序拥有其他权限）：http://jsfiddle.net/TH48e/40/ 有什么想法吗？

- gal007

你认为为什么可以在Google.com中插入HTML内容？你能提供一个链接证明吗？我不明白为什么创建浏览器扩展时同源策略会有任何不同。 - undefined

扩展可以做到这一点。例如，Greasemonkey。 - undefined

你是想要创建一个浏览器扩展还是用户脚本？ - undefined

你是从哪个作用域运行这段代码的？ - undefined

谷歌浏览器窗口（火狐） - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Noitidart · Accepted Answer

在你的评论中澄清后：

var ifr = gBrowser.selectedBrowser.contentDocument.getElementById('container')

不要使用.contentWindow来获取document，这是无用的冗余操作等。

如果你只是想通过id获取某些东西，也不要使用querySelector，因为速度差异很大，getElementById要快得多。

也不要使用.innerHTML，因为它会导致安全问题，审核员不会接受。请使用.textContent。

你的fiddle无法工作，因为：

你不能进行跨框架通信
我不确定，但我认为：createElement是JavaScript中的“本地”函数，所以被保留了，尽管它是document.createElement，但是没关系

这个fiddle可以工作，但是rawr函数在body中未定义，我不知道为什么，所以我将脚本移到了文档中： http://jsfiddle.net/TH48e/43/

<script>
function createElementMY(){
    var doc = document.getElementById('container');

    var ifrDoc = doc.contentDocument;


    var elem = ifrDoc.createElement("div");
    elem.textContent = 'Test';
    ifrDoc.body.appendChild(elem);
}
</script>
<iframe id="container" src="data:text/html,rawr"></iframe>
<button onclick="createElementMY()">Click me!</button>