web-dev-qa-db-ja.com

iFrame内から要素を取得する

<div>内からどのようにして<iframe>を取得しますか？

javascriptiframehtml
210
joepour
var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

もっと簡単に書くことができます：

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

そして最初の有効な内部ドキュメントが返されます。

内部ドキュメントを取得したら、現在のページの任意の要素にアクセスするのと同じ方法でその内部ドキュメントにアクセスできます。 （innerDoc.getElementById...など）

重要： iframeが同じドメインにあることを確認してください。そうしないと、その内部にアクセスできません。それはクロスサイトスクリプティングでしょう。

344
geowa4

Iframe ロード後にアクセスするのを忘れないでください。 jQueryなしでは昔ながらの信頼できる方法：

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>
7
lukyer
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction()はページ内の関数であり、それに対するその関数のアクション

4
VishalDream

上の答えはJavscriptを使って良い解決策を与えました。これが簡単なjQueryソリューションです。

$('#iframeId').contents().find('div')

ここでの秘訣はjQueryの.contents()メソッドです。HTML要素しか取得できない.children()とは異なり、.contents()はテキストノードとHTML要素の両方を取得できます。それがiframeのドキュメントコンテンツをそれを使うことによって得ることができる理由です。

JQuery .contents()に関するさらに詳しい情報： 。contents（）

注iframeとpageは同じドメインになければならないことに注意してください。

2
SkuraZZ

他の答えのどれも私のために働いていませんでした。探していたオブジェクトを返す関数をiframe内に作成しました。

function getElementWithinIframe() {
    return document.getElementById('copy-sheet-form');
}

それから、その関数を呼び出して要素を取得します。

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();
1
craned

Iframeが同じドメイン内になく、親からその内部にアクセスできないがiframeのソースコードを変更できる場合は、iframeによって表示されるページを変更して親ウィンドウにメッセージを送信できます。ページ間で情報を共有します。いくつかの情報源：

0
Jose

以下のコードは、iframeデータを見つけるのに役立ちます。

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;
0
ashish naghate