iframe_javascriptスキルで要素を取得・操作するJSメソッド

iframe 内のオブジェクト要素とドキュメントを取得/設定する JS のいくつかのメソッド

1. IE のみ (フレームインデックスによる画像の配置):

コードをコピーします コードは次のとおりです:

document.frames[i].document.getElementById('要素のID');

2. IE のみ (iframe 名による画像の配置):

コードをコピーします コードは次のとおりです:

document.frames['iframe の名前'].document.getElementById('要素の ID');

上記の方法は、iframe だけでなく、frameset 内のフレームにも適用できます。 IE は独自の標準を設定することに長けていますが、そのデザインの多くはより人間的であると言わざるを得ません。たとえば、これは次の標準パスをサポートすることに加えて、簡潔で視覚的な記述方法を提供します。

3. 一般的な方法:

コードをコピーします コードは次のとおりです:

document.getElementById('iframe の ID').contentWindow.document.getElementById('要素の ID')

contentWindow の追加には注意してください。これは、frame および iframe 内の window オブジェクトを表すため、問題が発生することがよくあります。

JS が iframe ドキュメントのコンテンツを取得します

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript"> function getIframeContent(){ //iframe
内のドキュメントのコンテンツを取得します var doc;
if (document.all){ // IE
doc = document.frames["MyIFrame"].document
}else{ // 標準
doc = document.getElementById("MyIFrame").contentDocument; }

doc.body.innerHTML を返します; }

注: 上記の .contentDocument は .contentWindow.document と同等です。

1. 遭遇した要求と問題

iframe レイアウトは、トップ メニュー、左側のナビゲーション、メイン ページなど、Web サイトのバックグラウンド管理で使用されます。要件は、メイン ページのボタンをクリックし、上部のメニュー バーの右側に「終了」リンクを表示することです。クリックしてシステムを終了します。

私のアイデアは、トップメニューページに非表示の「終了」リンクを配置することです。ユーザーが iframe にあるメインページ (mainPage.htm) のボタンをクリックすると、そのリンクが右側に表示されます。トップメニューページ「終了」。

私が現在直面している問題は、ページの iframe サブページ (mainPage.htm) 内の他の iframe サブページ (topPage.htm など) の HTML 要素を取得して操作する方法です。

2. JS を介して iframe 内の要素を取得して操作し、問題を解決します

ここでの主な目的は、JS を通じて Window オブジェクトを操作することです。 Window オブジェクトはブラウザで開いているウィンドウを表します。ドキュメントにフレーム (frame タグまたは iframe タグ) が含まれている場合、ブラウザは HTML ドキュメントのウィンドウ オブジェクトとフレームごとに追加のウィンドウ オブジェクトを作成します。

ネットの情報を調べてみると、iframe内のHTML要素をJSで操作する方法を見つけました。例としては以下のようなものがあります。

コードをコピー コードは次のとおりです:

関数 ShowExit() {

//iframe
のウィンドウオブジェクトを取得する var topWin = window.top.document.getElementById("topNav").contentWindow;
//通常のページと同じ、取得したウィンドウオブジェクトを通じてHTML要素を操作します
topWin.document.getElementById("exit").style.visibility = "visible";
}

注: 最初のステップでは、トップ メニュー ページ (topPage.htm) が配置されている iframe オブジェクトが、2 番目のステップである iframe の window.top.document.getElementById("topNav") メソッドを通じて取得されます。前のステップで取得したオブジェクトが取得されます。 contentWindow 属性は、iframe 内の要素が配置されているウィンドウ オブジェクトを取得します。3 番目のステップは、前のステップで取得した window オブジェクトを通じて iframe フレーム内の要素を操作することです。 iframe フレーム内ではない通常の HTML 要素を操作する場合と同様です。