初歩的な文字入力フォームの添削をお願いします

質問

文字入力を複数のページで共有するために
入力された文字列を変数に代入して
外部化したスクリプトから書き出そうと試行錯誤しています。

以下のコードでは、同じページにスクリプトがある場合には正常に作動しますが
一旦、スクリプトを外部化すると、全く作動しません。

同じスクリプトを使用する必要はありませんので、

　・スクリプトを外部化する方法と、

　・同じ文字列の色だけを出力先で変更する方法の

２点を教えて下さい。

<script type="text/javascript" >

function textout(outputId, formName, itemName) {
var text3
= document.forms[formName].elements[itemName].value;
document.getElementById(outputId).textContent = text3;
}
</script>

<form name="form3">

<INPUT size="15" type="text" name="in3">

<input type="button" onClick="textout('Disp3','form3','in3')"　value="Show Me" >

</form>

<div id="Disp3">
</div>

回答No.2

Ogre7077 · ベストアンサー

> フレームを使う
悪いことは言いません。もうフレームを使うのはもう止めましょう
(昔から言われてる) http://www.usability.gr.jp/alertbox/9612.html
(最近ついに廃止に) http://html5.jp/trans/w3c_differences.html#absent-elements

> スクリプトをHTMLページから独立させて、
これは可能ですが

> 複数のページで同様の文字列の受け渡しを
はスクリプト単体ではセキュリティー観点から「絶対に」無理です。あきらめましょう
抜け穴としては、親子関係ページとか iframe とかがありますが、汎用的ではありませんので

というわけで cookie を利用するスクリプトをどうぞ

// ataitukaimawasi.js
function setHensu(name, value) {
document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
}
function getHensu(name) {
var key = encodeURIComponent(name);
var m = document.cookie.split(/\s*;\s*/).filter(function(t){ return t.indexOf(key + '=') == 0 });
if (m.length == 0) return null;
return decodeURIComponent(m[0].replace(/^.+=(.+)$/, '$1'));
}

// pageA.html
<script src="ataitukaimawasi.js"></script>
<form name="form3">
<input name="in3" value="ほげ">
<input type="button" onClick="setHensu('hoge',this.form.in3.value)" value="write">
</form>

// pageB.html
<script src="ataitukaimawasi.js"></script>
<form name="form4">
<input type="button" onClick="this.form.out3.value=getHensu('hoge')" value="read">
<output name="out3" style="background:pink"></output>
</form>

お礼

詳細な回答をいただき感謝しております

回答No.1

Ogre7077

もしかして
1. pageA.html で <input> の値を変数 hoge に入れる
2. pageB.html の <div> に変数 hoge の値を表示させる
をやりたいのでしょうか

となりますと、方法としては以下の何れかとなります
* ブラウザの cookie に hoge を作成して読み書きする
* ブラウザの webStorage に hoge を作成して読み書きする
* サーバーに hoge を送受信する WebAPI を作成し AJAX で読み書きする
* 親画面の <input> を子画面から直接読み取って <div> に設定

一番簡単な cookie を使うならば、この様な感じで実装します

// pageA.html
var a = document.querySelector('なんかの入力要素');
document.cookie = "hoge=" + a.value;
// pageB.html
var m = /\bhoge=([^;]+)/.exec(document.cookie);
if (m) document.querySelector('なんかの出力要素').textContent = m[1];

ただ、いずれの方法を採用するにしても、セキュリティとか変数の寿命とかをちゃんと把握してから使ってください。

補足

早速のご回答ありがとうございます。
初心者ですので、cookie やwebStorage やサーバーを操作するような複雑なことは無理です。

フレームを使う程度の知識は何とかありますので、
変数を同じ画面内で受け渡しする方法のような
Javascript に限定した方法を教えていただけますでしょうか。

あくまで目的は　スクリプトをHTMLページから独立させて、複数のページで同様の文字列の受け渡しを１０回以上繰り返すことです。

以上、よろしくお願いいたします。