Web Artisan Blog - ウェブ アルチザン ブログ

JS:iframeの内容を取得する方法

JavaScript・XHTML・CSS

2006年04月03日

アフィリエイトから企業サイト分析まで。訪問者の動きがまるわかりのアクセス解析サービス「リサーチアルチザンプロ」

LINEやSkypeみたいなビデオ通話がブラウザだけでできる!オンライン通話サービス「EZ-Interview - イージーインタビュー」

JavaScriptでiframeの内容(中身、src属性で指定したURLの内容)を取得するには・・。

まず、以下のサンプルをご覧ください。
onload時に、iframe内のアンカータグのhref属性の値をalert表示します。(ついでに別ウィンドウでリンク先へ遷移します)
>サンプル

ソースは以下の通り。

・iframetest.html <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>iframe test</title> </head> <body> <iframe src="iframe.html" height="150" width="600"> この部分は iframe 対応のブラウザで見てください。 </iframe> <script type="text/javascript"> <!-- window.onload = function() {    var myiframe;    var iframe;   myiframe = document.getElementsByTagName('iframe');    for (var i = 0; i < myiframe.length; i++) {      if (myiframe[i].contentDocument) {       iframe=myiframe[i].contentDocument;     } else {       iframe=myiframe[i].Document;     }     if (iframe.addEventListener) {       iframe.addEventListener('click',func_test, true)      } else {       iframe.attachEvent('onclick',func_test)      }   }  } function func_test(e) {    var url;   if (document.all) {       url = e.srcElement.href;   } else if (document.getElementById) {       url = e.target.href;   }   alert(url); } --> </script> </body> </html>
・iframe.html
<html>
<head>
<title>iframe test</title>  
</head>
<body>
<a href="http://www.res-system.com/weblog/" target="_blank">Web Artisan Blog</a>
</body>
</html>
iframetest.html内のJavaScriptでは、getElementsByTagNameで画面内のiframeオブジェクトを取得、更にcontentDocument、またはDocumentにてiframeの内容を取得し、clickイベントにfunc_test関数をaddEventListener(attachEvent)、func_test関数内でalert表示しています。

ここで注意点、
こういう場合は、iframeのsrc属性の指定先のドメインと、サンプル画面のドメインが同じでないといけません。src属性先が外部ドメインであると、セキュリティエラーとなります。。
もし、仮にこれが外部ドメインでできれば、例えばGoogleAdSenseの広告リンク先を確実に知れる、・・もっというと、AdSenseタグの内容を摺りかえることができるかも知れません。ヤバイ。。
でも、このエラーはIEであれば6以上で出る、言い換えれば5.5以下であればエラーとならないので、、、コワイデス。


Web面接に最適。ブラウザだけでビデオ/音声通話ができるオンライン通話サービス。「EZ-Interview - イージーインタビュー」
訪問者録画機能も付いたシンプルで高機能なリアルタイムアクセス解析「リサーチアルチザンプロ」