- ベストアンサー
JavaScriptでiframeを使用してアンケートを作成する方法
- JavaScriptのiframeを使用してアンケートの作成方法について教えてください。
- アンケートのページ数が13ページほどあり、ボタンを押すと次のページに移動します。
- さらに、選択したボタンの文言が親のテキストエリアに保存されるようにしたいです。どのように実装すれば良いでしょうか?
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
お力になれるかもしれませんが、不明な点がありますのでこちらからも質問させてください。 【1】'親のテキストエリアに選択したボタンの文言が上から保存されていくようにしたい'とのことですが、ご提示のソースコードでは <form name="myFORM"> <textarea name="myTEXT" rows="10"></textarea><br> </form> に'ボタンの文言'が表示されてすぐにページ遷移してしまいます。(実質的には表示されません) 親ページはどのようになっていますでしょうか。 【2】最終的に期待する動作として、iframeのページが変わっても親ページに子フレーム内でクリックしたボタンの情報が表示されるようにしたいということでよろしいでしょうか。 以上2点こちらからの質問です。よろしくお願いします。
その他の回答 (1)
- Proof4
- ベストアンサー率78% (151/192)
親ページに下記のスクリプトを記述します。 function setChars(text){ var tarea = document.myFORM.myTEXT.value; if (tarea || ""){ tarea += "\n"; } tarea += text; } iframeから親の関数(上記のsetChars)を実行するために、ボタンがクリックされたときに下記の関数を実行すればよいでしょう。 function callparent(text){ window.parent.setChars(text); } こうすることで、親ページの <form name="myFORM"> <textarea name="myTEXT"rows="10"></textarea> </form> にボタンの文言が追加されていくはずです。 上記のソースでは当サイトの都合上、インデントを全角スペースで表現しています。適宜置換してください。 Chromeではローカル環境で実行するとエラーで動かないと思いますが、それはセキュリティの都合によるものです。サーバーにアップロードすれば(厳密にいうと親ページとiframe内のページが同じドメインであれば)動くようになります。 --追記-- ソースコードを拝見して思ったことですが、全体的に色々と抜けているところがあります。大まかに挙げますと - bodyタグがない(質問文) - 必要な閉じタグがない(No.1に対する補足コメント、<table>タグ) - 不要なタグの混在(No.1に対する補足コメント、<script>タグのあとの</table>) など ブラウザが適当に判断してくれるので表示としては問題ないのかもしれませんが、間違いのもとですので文法に従って記述するようにしましょう。 No.1に対する補足コメントではテーブルを使用してレイアウトをしているように見えるのですが、tableを使用してのレイアウトは現在では非推奨です(tableを用いたレイアウトが使われていたのは大昔の話です)CSSを使うようにしましょう。
お礼
ご指摘ありがとうございます。大変勉強になりました。 精進していきます。 ご回答ありがとうございました。
補足
親ページは変更してしまい、、今はこうなっています。 <table border style="position: absolute; left: 10px; top: 30px"/> <iframe src="EN001.html"width="480" height="480" frameborder="yes" scrolling="yes"> </iframe> <table border style="position: absolute; left: 580px; top: 30px"/> <iframe src="ENs.html"width="520" height="480" frameborder="yes" scrolling="yes"> </iframe> <script language="JavaScript"><!-- function setChars(text) { if (document.myFORM.myTEXT.value || "") { document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + "\n" } document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + text } /--></script> </head> <table border style="position: absolute; left: 30px; top: 580px"/> <form name="myFORM"> <textarea name="myTEXT"rows="10"></textarea><br> </html> テキストエリアを作っていろいろ試したのですが、、、リンクが先に移動が先に動くので反応しません。。 2の質問の通りでございます。 ページが変わっても 親ページのテキストエリアか、クリックした情報を残していきたいです ご教授お願いいたします。