iframeでフレームを分けているWebサイトのようなものを作っているのですが。
フレームをまたいだDOM操作が難しく感じたので、備忘録として残しておきます。
index.htmlで左のフレーム、右のフレームそれぞれファイルを呼び出し、フレーム化しています。
今回のイメージは左のフレームのテキストをクリックして、右のフレームのフォームに入力するイメージです。
left.htmlの<p>タグをクリックするとindex.jsのinputText()ファンクションが発火するという流れです。
###別フレームの要素にアクセスするための構文
parent.フレーム名.document.要素名称.プロパティ
//↓今回の場合
parent.right_frame.document.getElementById('target');
のようになります。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="left.html" name="left_frame"></iframe>
<iframe src="right.html" name="right_frame"></iframe>
</body>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
<p onclick="inputText()" id="text">この文章を右フレームのフォームへ</p>
</body>
</html>
right.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
<p onclick="inputText()" id="text">この文章を右フレームのフォームへ</p>
</body>
</html>
test.js
function inputText() {
var frame = parent.right_frame;
var input_form = frame.document.getElementById('target');
var element = document.getElementById('text').textContent;
input_form.value = element;
}
基本的にはこれで大丈夫と思うのですが、Google ChromeではDOMExceptionという例外が発生する可能性もあります。
ぼくは発生してしまいました、、
クロスオリジンフレーム（？よくわからん）絡みのエラーなので、Eclipseなりでサーバー立ち上げて、試してみると無事に動きました。