使用Javascript将Iframe插入Div中 - 用于Greasemonkey

Question

我需要使用javascript将iframe插入div中.我需要用javascript写的这个,所以我可以在greasemonkey脚本中使用代码(而greasemonkey只允许使用javascript).

greasemonkey脚本将AOL的搜索栏插入各种网站.我已经包含了下面的工作HTML代码,因此您可以测试它以查看最终结果是什么时候这样做.

这正是我需要做的,用HTML编写:

<div style="overflow: hidden; width: 564px; height: 43px; position: relative;">
<iframe src="http://aol.com" style="border: 0pt none ; left: -453px; top: -70px; position: absolute; width: 1440px; height: 775px;" scrolling="no"></iframe>
</div>

我需要让这个HTML代码在greasemonkey中运行,这需要用javascript编写.这是我到目前为止所得到的(我的最后一个问题是"伪代码"):

var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.setAttribute("border", "0pt");
makeIframe.setAttribute("border", "none");
makeIframe.setAttribute("left", "-453px");
makeIframe.setAttribute("top", "-70px");
makeIframe.setAttribute("position", "absolute");
makeIframe.setAttribute("width", "1440px");
makeIframe.setAttribute("height", "775px");
makeIframe.setAttribute("scrolling", "no");

var makediv = document.createElement("div");
makediv.setAttribute("height", "43px");
makediv.setAttribute("width", "564px");
makediv.setAttribute("position", "relative");
makediv.setAttribute("overflow", "hidden");

我已经知道如何插入iframe或将div插入我需要插入的网站的源代码中,通过这样做:

var getRef = document.getElementById("div-id-to-insert-element-before");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(iframe OR div, getRef);

我无法弄清楚如何做,是如何将iframe写入div中,然后将该div插入源代码中.最后一段代码片段用于将div或iframe插入到源代码中,但我需要div中的iframe,然后将该div插入到源代码中(使用最后一个代码片段).

有任何想法吗？

Answer 1

1-你可以使用element.appendChild

makediv.appendChild(makeIframe);

2-或者像这样将iframe作为html附加到div中,

makediv.innerHTML = '<iframe src="http://aol.com" style="border: 0pt none ;'+ 
                    'left: -453px; top: -70px; position: absolute;'+ 
                    'width: 1440px;'+ 
                    'height: 775px;" scrolling="no"></iframe>';

而不是将makediv插入你想要的地方,

var getRef = document.getElementById("div-id-to-insert-element-before");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);

更新:

你不能用setAttribute功能设置样式,

var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.border = "none";
makeIframe.style.left =  "-453px";
makeIframe.style.top = "-70px";
makeIframe.style.position = "absolute";
makeIframe.style.width = "1440px";
makeIframe.style.height = "775px";

var makediv = document.createElement("div");
makediv.style.height = "43px";
makediv.style.width = "564px";
makediv.style.position = "relative";
makediv.style.overflow = "hidden";