javascript - JavaScriptでiframeのソースの場所を変更するにはどうすればよいですか?

Question

JavaScriptでiframeのソースの場所を変更するにはどうすればよいですか?

たとえば、ボタンまたはリンクをクリックすると、次のように変更されます。

<iframe src=""></iframe>

...これに：

<iframe src="http://stackoverflow.com/"></iframe>

また、1 つ改善したい場合は、同じページ内の複数の iframe を変更するにはどうすればよいですか (nameまたはその他の識別子を使用)。

Answer 1

まず、iframe に ID を割り当てます。これは次のようになります

<iframe id="youridname" src=""></iframe>;. 

次に、JavaScript コマンドは次のようになります。

document.getElementById("youridname").src = "http://stackoverflow.com";

Answer 2

他のタグを変更するのと同じです。要素を取得し、プロパティを設定します。

document.getElementsByTagName("iframe")[0].src = "http://stackoverflow.com";

また、好きな属性を選択できます。たとえば、 がある場合、<iframe data-id='some-frame' src='http://stackoverflow.com'></iframe>いずれかの属性に対して選択できます。

var soFrames = document.querySelectorAll("iframe[src*='overflow']");
if (soFrames.length > 0) {
    soFrames[0].src = "something.com";
}

または：

var soFrames = document.querySelectorAll("iframe[data-id='some-frame']")

_{(セキュリティ上の制限があるため、ページの iframe に Stackoverflow.com のようなランダムな Web サイトを表示することはできません)。}

Answer 3

からページ内のフレームを参照できますwindow.frames。これには、フレームのwindowオブジェクトのコレクションが含まれています。そこからlocation.href、フレームのを変更しwindowます。

frames[0].location.href = "page1.htm";
frames[1].location.href = "page2.htm";

contentWindowフレーム要素のプロパティを参照して、フレームのウィンドウにアクセスすることもできます。

document.getElementById("frame1").contentWindow.location.href = "page1.htm";

逆方向に移動するには、つまりウィンドウからフレーム要素frameElementを取得するには、次のプロパティを使用します。

frames[0].frameElement;

Answer 4

document.getElementById("test").setAttribute("src", "http://stackoverflow.com");