iFrame内から要素を取得する

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

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

ロード後は必ず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>

window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() ページ内の関数であり、その関数アクション

上記の回答は、Javscriptを使用した優れたソリューションを提供しました。簡単なjQueryソリューションは次のとおりです。

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

ここでのトリックは、jQueryの.contents()メソッドです。.children()これは、HTML要素のみを取得できるのとは異なり.contents()、テキストノードとHTML要素の両方を取得できます。そのため、iframeを使用してiframeのドキュメントコンテンツを取得できます。

jQueryについてさらに読む.contents()：.contents（）

iframeとページは同じドメイン上にある必要があることに注意してください。

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

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

次に、そのような関数を呼び出して要素を取得します。

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

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

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• HTML5-クロスブラウザーIframeポストメッセージ-子から親へ？
• 子から親へのクロスサイトiframe postMessage

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

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