[JavaScript][iframe]別のフレームの入力フォームにアクセスしたい。 #JavaScript

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なりでサーバー立ち上げて、試してみると無事に動きました。