5

javascript を使用して iframe を div に挿入する必要があります。グリースモンキースクリプトでコードを使用できるように、これをJavaScriptで記述する必要があります(グリースモンキーではJavaScriptのみが許可されます)。

グリースモンキー スクリプトは、AOL の検索バーをさまざまな Web サイトに挿入します。以下に実際に動作する 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 コードをグリースモンキーで動作させるには、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 INTO を div に書き込んでから、その div をソース コードに挿入する方法です。その最後のコード スニペットは、div または iframe をソース コードに挿入するために機能しますが、div 内に iframe が必要であり、その div をソース コードに挿入する必要があります (最後のコード スニペットを使用)。

何か案は?

4

2 に答える 2

12

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";
于 2012-05-15T11:18:10.393 に答える