使用 Javascript 將 iframe 插入 Div - 用於 Greasemonkey

Question

我需要使用 javascript 將 iframe 插入到 div 中。 我需要用 javascript 編寫它，以便我可以在油脂猴腳本中使用代碼（並且油脂猴只允許使用 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 插入到源代碼中，但我需要將 iframe 插入到 div 中，然后將該 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";

Answer 2

在頁面上使用重新加載重定向到iframe的 src URL 的頁面。
為避免這種情況，請使用沙箱iframe ，如下所示：

<pre>
<code>
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
</code>
</pre>