ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

JavaScriptを使用してiframe内のDOMにアクセスして操作します。

著者：Eve Cole 更新時間：2009-06-11 16:22:06

iframe を自由に操作できたらいいのに、と思ったことがある人は多いでしょう。このようにして、静的ページは、バックグラウンドの動的ページ php、jsp、および asp を含めて要求するのと同等の、統合されたマルチページ レイアウトを実装する機能を備えています。

Javascript を使用すると、iframe オブジェクト属性 src が指す HTML ページのコンテンツを背景のように動的にロードできます。このような操作では 2 つのページを提供する必要があります。1 つのページは iframe が配置されているページ (ページ名: iPage.html )、もう 1 つのページは iframe 属性 src によってポイントされるページ (ページ名: srcPage.html ) です。

iPage.html、<body> の dom:

  1. < iframe id = " iID " 名前= " iName " src = " srcPage.html " スクロール= 「いいえ」 Frameborder = " 0 " > </iframe> srcPage.html

,<body>in

  1. dom : <h1>姉妹の日</h1>  
  2. < p >朝は朝食を食べて、昼はデートして、午後はカラオケを歌って、夕方はお兄さんと遊んでください。 </ p >

上記の 2 つのページを IE 上で JS で操作する方法について説明します。 Firefox の方法について説明し、最後に IE と Firefox との互換性について説明します。 ブラウザーが iframe オブジェクトを操作する方法。

1.IEでiframe内のコンテンツにアクセスして操作する

 

iframe が非標準の HTML タグであることは誰もが知っています。これは、IE ブラウザによって起動されるマルチレイアウト タグです。その後、Mozilla もこのタグをサポートしました。 (冗談です、ふふ)

1. IE は document.frames["IframeName"] を通じて取得します。 例:
  1. srcPage.htmlのh1の内容をiPage.html

に出力します。 JS は次のようになります。

  1. iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) ;

ページにコードを追加しても、期待した内容が出力されないことがわかります。なぜでしょうか?私はこれをまだ理解していません。ただ習慣的に window.onload を追加すると、出力が表示されます (注: このイベントには JS コードが書き込まれています)。変更後、IE ではコードが出力されましたが、Firefox では document.frames が定義されていません。エラー メッセージ:

  1. window = ( function ) 。 () {  
  2.  

2.

  1. 別の方法は、 contentWindow
  1. を使用
  2. して取得することです。コード: window .​​​​​​​​​​​​​​​​
  1. () {  
  2.  変数 iObj =ドキュメント.getElementById ( ' iId ' ) ;​​​
  3.   alert ( iObj . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data )
  4. }) ;

このメソッドは ie6、ie7、firefox2.0、および firefox3.0 のテストに合格しました。おいおい。 （ネットで調べたところ、Mozilla Firefox の iframe.contentWindow.focus に、スクリプトインジェクション攻撃の危険性があるバッファオーバーフローの脆弱性が見つかりました。

後でバックグラウンドで防ぐことができると聞き、安心しました。しかし、それでもFirefox の新しいバージョンがそれを解決できることを願っています。)

3. srcPage.html の h1 タイトル

  1. の内容を変更します: getElementsByTagName ( ' h1 ' ) [ 0 ] 。彼女の 1 日の一部' ;

contentWindow からアクセスします。ノードは以前と同じです。

2. Firefox で iframe 内のコンテンツにアクセスします。Mozilla

は、 IFrameElmRef.contentDocumentを介して iframe のドキュメント オブジェクトにアクセスするための W3C 標準をサポートしています。これにより、コード

  1. var を
1 つ少なく書くことができます。
  1. iObj = document . getElementById ( ' iId ' ) ; contentDocument (
  2. iObj . getElementsByTagName ( ' h1 ' )
  3. [ 0 ] . innerHTML = '彼女の一日の一部になりたい' ) ;​
  4. ' )[ 0 ] . firstChild . data ) ;

これら 2 つのブラウザと互換性のあるメソッド、contentWindow メソッドを使用できるようになりました。

おいおい！ iframe を自由に操作できますか?それでも不快な場合は、iframe 内のコンテンツを書き換えることもできます。

3. iframe のコンテンツを書き換える

designMode (ドキュメントを編集可能なデザイン モードに設定する) および contentEditable (コンテンツを編集可能に設定する) を通じて、iframe のコンテンツを書き換えることができます。コード:

  1. var iObj =ドキュメント. iObj .ドキュメント. <html>​​​​
  2. ​​​​​​​​​​
  3. ​​​​​​​
  4. ​​​​​​​​
  5. ​​​​​​​ ​head> ' ) ;
  6. iObj . writeln ( ' <style>
  7. body { background : # 000;font - size:9pt;padding: 0px;} </style> ' ) ;
  8. ' </head> <body> </body> </html>
  9. ' ) iObjの詳細については

、http: //msdn.microsoft.com/en-を参照してください

。

us/library/ms533720(VS.85).aspx

firebug は、図に示すように、上記のコードのパフォーマンスをテストします。

次のように

iObj.document.designMode = 'On';

iObj.document.contentEditable = true

をコメントアウトします。


効果は変わらず、時間効率はアノテーション前の3倍近くになりました。おいおい。これら 2 つのオブジェクトは、インターネット上の一部の人々の iframe 内のコンテンツを書き換えるメソッドを参照しています。実際、他に必要がない限り、designMode と contentEditable を使用する必要はありません。

4. iframe の高さ適応型

上記の原則を使用すると、これを実装するのは非常に簡単です。iframe の高さの値をその中のドキュメントの高さの値に設定するだけです。コード

  1. : window .onload = (関数 () {  
  2. 変数  iObj = document . getElementById ( ' iId ' ) .
  3. iObj . contentWindow . documentElement } ) ;その日は、何か
  4. 新しいこと

がわかるでしょう。この Web 専門用語のせいで、「おい、臭い!」

参考資料:

https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla

http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx

http://www.kuqin.com/ webpagedesign/20080516/8536.html

http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
関連記事