![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
文字入力を複数のページで共有するために
入力された文字列を変数に代入して
外部化したスクリプトから書き出そうと試行錯誤しています。
以下のコードでは、同じページにスクリプトがある場合には正常に作動しますが
一旦、スクリプトを外部化すると、全く作動しません。
同じスクリプトを使用する必要はありませんので、
・スクリプトを外部化する方法と、
・同じ文字列の色だけを出力先で変更する方法の
2点を教えて下さい。
<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ベストアンサー
- 回答日時:
> フレームを使う
悪いことは言いません。もうフレームを使うのはもう止めましょう
(昔から言われてる) http://www.usability.gr.jp/alertbox/9612.html
(最近ついに廃止に) http://html5.jp/trans/w3c_differences.html#absen …
> スクリプトを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
- 回答日時:
もしかして
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ページから独立させて、複数のページで同様の文字列の受け渡しを10回以上繰り返すことです。
以上、よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
mailtoで質問・・・
-
スクロールテキストボックス ...
-
スクロールの同期ってできますか?
-
インラインフレームについて。
-
横スクロールを右から左へ・・・
-
テキストボックス内にハイパー...
-
ページを読み込み直さずに、sel...
-
(Javascript)印刷するファイル...
-
テキストをクリックすると答え...
-
折りたたみ表示について
-
Windowサイズにより赤枠の大き...
-
styleタグとbodyタグの関係につ...
-
Webページ作成の際に、固定ヘッ...
-
WEB上で編集できない、スク...
-
bodyにwidth:100%をつける理由は?
-
ハイパーリンクに下線を表示す...
-
bodyタグの範囲について
-
インラインフレームの縦幅を、...
-
外部ページからハッシュタグ(...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
(Javascript)印刷するファイル...
-
テキストボックス内にハイパー...
-
別ページのページ内リンクでの...
-
ハイパーリンクに下線を表示す...
-
ページの読み込みが完了してか...
-
横スクロールを右から左へ・・・
-
Chromeがiframe内の「#~」に釣...
-
ページによって表示位置がずれ...
-
"mailtoでメールの【氏名】【性...
-
bodyにwidth:100%をつける理由は?
-
iframeのsrcにページ内リンク(...
-
スクロールバーのスクロール量...
-
ボタンが押されたらWebページの...
-
h1にmarginを指定すると一瞬カ...
-
ホームページ上に『位置固定』...
-
htmlで任意の行の文字位置を右...
-
テキストをクリックすると答え...
-
googleマイマップとのリンクを...
-
-css- ページオープン時やリロ...
おすすめ情報