Question

我试图在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/

有什么想法吗？

Answer 1

在您的评论中澄清之后：

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

不要那样做.contentWindow然后从中获取document，无用的冗余等。

如果你想在querySelector之前得到一些东西，那么也不要id，速度差异很大，getElementById要快得多。

同样不要.innerHTML插件审批者不接受它，因为它会导致安全问题。做.textContent。

你的小提琴不起作用，因为：

您无法进行跨框架通信
我不确定，但我认为：createElement是javascript中的“原生”函数，因此虽然它是document.createElement但是ya

这个小提琴有效，rawr函数未在主体中定义，我不知道为什么所以我将脚本移动到文档中：

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>

通过JS向现有Iframe添加新元素

1 个答案: