- 締切済み
postMessageによるiframeの書き換え
iframeに表示している自身のブログを作成・修正するスクリプトを考えていますがうまくいきません。 「contentWindowで取得した変数の属性は読み取り専用なので、変数を操作するにはpostMessageを使う必要がある」といった記事があったので、自分なりにスクリプトを書いてみました。以下が、そのサンプルです。 親のparentから子のiframeに変数var1をpostMessageで送り、子側で変数var1を使ってoutputの内容を書き換えています。 しかし、これだとcontentWindowで変数を取得・操作を行なった場合と何ら変わらない結果になってしまいます。 つまりiframe.htmlを直接ブラウザで開いて表示しても、outputの表示内容が書き換わっていません。 どこに誤りがあるのでしょうか。 それとも「読み取り専用」に関する私の理解が間違っているのでしょうか。 <html lang="ja"> <head> <meta charset="UTF-8" /> <title>parent</title> </head> <body> <iframe id="iframe" src="iframe.html"></iframe></br> 天気<input type="text" id="var1" value=""> <input type="button" id="build" onclick="send()" value="データ送付"> <script type="text/javascript"> function send(){ var win = document.getElementById("iframe").contentWindow; win.postMessage(document.getElementById("var1").value, '*'); } </script> </body> </html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>iframe</title> </head> <body> <p>タイトル</p> <div id="output"></div> <div id="var1"></div> <script type="text/javascript"> window.addEventListener('load', function(){ var var1 = "晴れ"; build(var1); }); function onMessage(e) { var var1 = e.data; build(var1); } window.addEventListener("message", onMessage, false); function build(var1) { var output = "きょうは" + var1 + "です。"; document.getElementById("output").innerHTML = output; } </script> </body> </html>
- みんなの回答 (3)
- 専門家の回答
みんなの回答
- AsarKingChang
- ベストアンサー率46% (3467/7474)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
お礼
私もPHPなどサーバーサイドでの処理について少し調べてみましたがやはり大変そうですね。 取りあえずなるべく簡単にできる方法がないかを考えているところです。 編集が終わったらスクリプトで書き換え部分をalert出力するようにして、コピペでiframe用のhtmlに貼り付ける方法なら出来そうです。 <table>~</table>間、<boby>~</body>間、何なら<html>~</html>間全部をalertで書き出してもいいと思います。 私のFirefox環境であればalert出力が途中で切れることもなく、テキストのコピーも問題なくできそうです。 あと、FirefoxだとiframeとのやりとりでcontentWindowを使用してもローカルファイルエラーが起きません。 この件に関しては自分の環境でできれば何だっていいので、リモートで可能なこの方法で進めたいと思います。 スマートではありませんが、取りあえずブログを立ち上げることを優先することにします。