iframeを使って任意のページをスクリプトから利用する

iframeに任意のページを表示して、ページ内の情報を利用したりエレメントを操作するサンプルを作成しました。
色々と問題が起きやすい手法ですが、一時的な対応としては使えます。



[使いどころ]

• セキュリティに関する懸念事項がないネットワーク内での利用(扱うのがインターネット上のwebサイトではない場合)
• ページに表示される情報を利用したいが、そのページの管理者が不明（調べるほどでもない程度の重要度の情報の場合）
• プログラムの利用者が限定されていて、使用するブラウザを指定できる場合

[想定される問題]

• フレーム内に表示することを禁止しているページ（googleなど）は扱えません。
• フレーム内に表示されるページの構成内容が変更されると誤動作するリスクが高いです。
• ブラウザによってはフレーム内エレメントへのアクセス方法が異なる場合があるので場合分けが必要。

ちなみにgoogleをフレーム内に表示しようとすると以下のようになります。
※この表示もブラウザによって異なるようで、chromeだと上のエリアは真っ白になりますがIEでは以下の表示になります。

例えば以下のようなiframeに対して
以下のスクリプトを実行すると

  func = function(フレーム){
    // contentWindowはchromeでは使用不可(HTAでの利用を想定しているのでクロスブラウザな処理にする必要性は薄いのでIE以外は無視)
    var doc    = フレーム.contentWindow.document
    if(doc.document){ doc = doc.document }
    
    // 以下は自由。今回はDIVエレメントリストを取得して、一つでもあればそのinnerTextを表示する。
    var arrDIV = doc.getElementsByTagName('DIV')
    confirm('divエレメント数:'+arrDIV.length)
    arrDIV.length ? confirm(arrDIV[0].innerText) : 0
  }
  var div=document.createElement('div')
  document.body.insertBefore(div)
  div.innerHTML='<iframe></iframe>'
  var ifr=div.firstChild
  ifr.onreadystatechange = function(){ confirm(4); func(this) }

  // セキュリティに関する都合で、iframe内に表示するページのアドレスとiframeを含むページのドメインが一致していないとDOM操作できない。読み込みすらできない。
  ifr.src = document.location.href.replace(/^([^\/]+\/\/[^\/]+\/).*/,'$1')

  // iframeエレメントができたことを確認する。
  confirm(ifr.outerHTML)

  // onreadystatechangeからfuncが呼ばれるようにしてあるが、何らかの理由でonreadystatechangeイベントが発生しない場合は手動で実行できるようにボタンを追加する。
  // ページ下部に出現しますので押してみてください。
  var btn=document.createElement('button')
  document.body.insertBefore(btn)
  btn.innerText = 'test'
  btn.onclick = function(){ confirm(5); func(ifr) }

以下のようなメッセージが表示されます。