【jQuery】iFrame内と親ページで、相互に要素を操作する
みなさん、こんにちは！
エンジニアのおちのです。
今回は、iFrame内から親ページ、親ページからiFrame内、それぞれの要素操作方法について書いていきます。
仕様イメージ
親要素には「子要素変更」ボタン、子要素には「親要素変更」ボタンを表示しています。
「子要素変更」ボタンをクリックすると、子要素を変更します。
「親要素変更」ボタンをクリックすると、親要素を変更します。
HTML, CSS
では、ソースを見ていきます。
今回メインとなるのはJavaScriptソースとなりますので、HTMLとCSSはご参考までに。
HTML
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
$('#parentBtn').click(function () {
$('#goatIframe').contents().find('#childTitle').text('child!!!!!');
$('#goatIframe').contents().find('#childTitle').css('color', 'rgb(106, 153, 135)');
})
})
</script>
<title>goat</title>
</head>
<body>
<div>
<h2 id="parentTitle">parent</h2>
<div id="parentText">
<p>親テキスト1</p>
<p>親テキスト2</p>
<p>親テキスト3</p>
</div>
<div>
<button id="parentBtn" class="button" type="input">子要素変更</button>
</div>
<iframe id="goatIframe" src="iframe.html"></iframe>
</div>
</body>
</html>iframe.html
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
$('#childBtn').click(function () {
$('#parentTitle',parent.document).css({color:'rgb(106, 153, 135)'});
$('#parentText', parent.document).stop().animate({ opacity: '0' });
})
})
</script>
</head>
<body>
<h2 id="childTitle">child</h2>
<button id="childBtn" class="button" type="input">親要素変更</button>
</body>
</html>CSS
style.css
* {
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 20px 50px;
font-family: "游ゴシック", "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
background-color: rgb(223, 218, 213);
text-align: center;
}
#goatIframe {
padding: 10px;
width: 300px;
height: 160px;
}
.base {
max-width: 1500px;
margin: 0 auto;
padding-left: 3%;
padding-right: 3%;
}
#parentBtn {
margin: 20px 0;
padding: 5px 15px;
background-color: white;
color: rgb(106, 153, 135);
border-color: white;
border-radius: 4px;
font-size: 15px;
}
#childBtn {
margin: 20px 0;
padding: 5px 15px;
background-color: rgb(106, 153, 135);
color: white;
border-color: rgb(106, 153, 135);
border-radius: 4px;
font-size: 15px;
}JavaScript（jQuery）
では、Scriptの箇所を抜粋して見ていきます。
親ページからiFrame内の要素を操作する
子要素を取得するfind()メソッドを使用して操作ができます。
要素指定：$([要素]).contents().find([子要素])
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
// 子要素変更ボタンをクリック
$('#parentBtn').click(function () {
// タイトルのテキスト変更
$('#goatIframe').contents().find('#childTitle').text('child!!!!!');
// タイトルのCSS変更
$('#goatIframe').contents().find('#childTitle').css('color', 'rgb(106, 153, 135)');
})
})
</script>iFrame内から親ページの要素を操作する
指定要素（親要素）の引数に”parent.document”を指定することで操作できます。
要素指定：$([要素], parent.document)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
// 親要素変更ボタンをクリック
$('#childBtn').click(function () {
// タイトルのCSS変更
$('#parentTitle',parent.document).css({color:'rgb(106, 153, 135)'});
// テキスト部を非表示
$('#parentText', parent.document).stop().animate({ opacity: '0' });
})
})
</script>
備忘録
直接ローカルファイルをブラウザで表示した際は、下記エラーが発生し動作確認ができません。
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.確認は、ローカルでサーバーを立てて行ってみてください。
（当記事のソースは、VSCodeのプラグイン「Live Server」を使用して実行確認しました。）
以上となります。
最後まで読んでいただき、ありがとうございました！
【JavaScript関連】
【JavaScript】動的生成DOMのクリックイベント発火
【JavaScript基礎】JavaScriptの等価比較（==, ===）について