JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでiframe内のbodyコンテンツを取得する方法

JavaScriptを使って iframe 内の body 要素のコンテンツを取得したい場合、window.frames オブジェクトを利用するのが一般的な手法です。iframe に設定した id 属性や name 属性をキーにして、内部ドキュメントへアクセスできます。

基本的な実装方法

まずは、iframe の src 属性から内容を読み込む方法もありますが、ここではより直接的に DOM 経由で取得できる、以下のコードスニペットをご紹介します。

<iframe id="myId" name="myId">...</iframe>

<script>
  var myDoc;

  if (window.frames && window.frames.myId && (myDoc = window.frames.myId.document)) {
    var iframeBody = myDoc.body;
    var content = iframeBody.innerHTML;
  }
</script>

コードの解説

window.frames.myId は、name 属性（または id 属性）が「myId」であるフレームへの参照を返します。このオブジェクトの document プロパティにアクセスすることで、iframe 内部のドキュメントを取得できます。

  • window.frames：ページ内のすべてのフレームを管理するオブジェクトです。
  • myDoc.body：iframe 内部ドキュメントの <body> 要素を取得します。
  • innerHTML：body 要素の中身（HTML文字列）を取得します。

注意点：同一オリジンポリシー

iframe 内のコンテンツにアクセスするためには、親ページと iframe のオリジン（スキーム・ドメイン・ポート）が一致している必要があります。異なるドメインのページを読み込んでいる場合、セキュリティ上の制約により document へのアクセスはブロックされますのでご注意ください。

  1. 【JavaScript】配列の最初のn%だけを取得する関数の作り方

    JavaScriptでは、「配列と0〜100の数値（両端を含む）を受け取り、その配列の先頭からn%分の要素だけを返す関数」を作りたい場面があります。たとえば、第2引数が0なら空の配列を、100なら元の配列全体を、50なら半分の要素を返す、というイメージです。 さらに、第2引数が省略された場合はデフォルト値として50を使用する仕様にします。以下がその実装コードです。 サンプルコード const numbers = [3,6,8,6,8,4,26,8,7,4,23,65,87,98,54,32,57,87]; const byPercent = (arr, n = 50) => {

  2. JavaScriptでオブジェクトの値を取得する方法：Object.values()と_.values()の違いを解説

    JavaScriptにはObject.values()など、オブジェクトの値を取得するためのメソッドがいくつか用意されています。しかし、これらの標準メソッドでは値を取り出すまでの手順がやや長くなりがちです。そこで便利なのが、JavaScriptライブラリ「Underscore.js」が提供する_.values()メソッドです。このメソッドを使えば、forループを記述することなく、オブジェクトの値を直接取得できます。 Object.values()を使った例 まずは標準メソッドであるObject.values()を使った例です。このメソッドで取得した値を順番に表示するには、for...ofループ