[JavaScript]iframe要素のコンテンツを取得する

同一出身ポリシーとかはまた別の話。
同じホストのHTMLを読み込んでいる場合の話。

iframeで読み込まれる側のHTML、今回はPHPで代用。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>sub window</title>
</head>
<body>
<div id="sub">
<?php echo 11111; ?>
</div>
<script src="https://code.jquery.com/jquery-git2.js"></script>
</body>
</html>

メイン側のHTML.

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>iframe sample</title>
</head>
<body>
<button id="show">show</button>

<iframe src="./hoge.php" frameborder="1" id="iframe1"></iframe>

<script src="https://code.jquery.com/jquery-git2.js"></script>
<script>
$('#iframe1').contents().find('#hoge').html(); // hoge!
</script>
</body>
</html>

jQueryを使える場合は

$('#iframe1').contents()

を実行することでiframe側のコンテンツをラップしたjQueryインスタンスが取得きるっぽい。
これさえ取れれば後は普通にjQueryの操作をすればよさそう。

万が一、jQueryを使えない場合、

document.getElementById('iframe1').contentWindow.document.getElementById('sub').innerHTML // sub

とかすればよさそう。
長い。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です