使用 Javascript 将 iframe 插入 Div - 用于 Greasemonkey
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10598345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert Iframe Into a Div Using Javascript - for Greasemonkey
提问by Learning
I need to insert an iframe into a div using javascript. I need this written in javascript so I can use the code in a greasemonkey script (and greasemonkey only allows for javascript).
我需要使用 javascript 将 iframe 插入到 div 中。我需要用 javascript 编写它，以便我可以在油脂猴脚本中使用代码（并且油脂猴只允许使用 javascript）。
The greasemonkey script will be inserting AOL's search bar into various websites. I've included the working HTML code below so you can test it out to see what the end result is when this works.
该greasemonkey 脚本将把AOL 的搜索栏插入到各种网站中。我在下面包含了可用的 HTML 代码，因此您可以对其进行测试，看看它在工作时的最终结果是什么。
Here is exactly what I need to do, written in 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>
I need to make that HTML code work in greasemonkey, which requires it being written in javascript. Here is what I've got so far (with my final question beneath the "pseudo-code"):
我需要使该 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");
I already know how to either insert the iframe OR insert the div into the source code of the sites I need to insert it into, by doing this:
我已经知道如何插入 iframe 或将 div 插入到我需要插入它的网站的源代码中，通过这样做：
var getRef = document.getElementById("div-id-to-insert-element-before");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(iframe OR div, getRef);
What I CAN'T figure out how to do, is how to write the iframe INTO the div and then insert that div into the source code. That very last code snippet works for inserting either the div or the iframe into the source code, but I need the iframe inside the div, and then for that div to be inserted into the source code (using that last code snippet).
我不知道该怎么做，是如何将 iframe 写入 div，然后将该 div 插入到源代码中。最后一个代码片段用于将 div 或 iframe 插入到源代码中，但我需要将 iframe 插入到 div 中，然后将该 div 插入到源代码中（使用最后一个代码片段）。
Any ideas?
有任何想法吗？
回答by Okan Kocyigit
1- you can use element.appendChild
1-您可以使用element.appendChild
makediv.appendChild(makeIframe);
2- Or append iframe as html into div like this,
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>';
than insert makediv to where you want,
比将 makediv 插入到您想要的位置，
var getRef = document.getElementById("div-id-to-insert-element-before");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);
UPDATE:
更新：
You cannot set style with setAttributefunction,
你不能用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";
回答by Irfan
Using on page reload the page redirected to the src URL of the iframe.
To avoid this use sandbox iframe, like this:
在页面上使用重新加载重定向到iframe的 src URL 的页面。
为避免这种情况，请使用沙箱iframe，如下所示：
<pre>
<code>
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
</code>
</pre>
