通过 JS 添加新元素到现有的 Iframe

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。

你的小提琴不会工作，因为：

1. 你不能进行跨框架通信
2. 我不确定，但我认为：createElement是 javascript 中的“本机”函数，因此保留在远处，尽管它是document.createElement但是是的

这个小提琴有效，该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>