Q&A
具体的にHTMLおよびJavaScriptなどを質問文に追記されたほうが回答を得られやすいと思います。
前提・実現したいこと
前提：chromeを利用。
http://testserver78.html.xdomain.jp/main.htm
のexecute(iframe)ボタンを押したときに
iframe内にHandsontable（ライブラリ）で作ったスプレッドを表示したい。
・iframeの中にスクリプトを持ちたくない（main.htmが制御してiframeは表示するだけにしたい）
・事情がありiframeを使わないという選択肢はとれない
execute(self)はうまく動作するので、別のグローバル空間の部品に
Handsontableが対応してないのが原因？
発生している問題・エラーメッセージ
http://testserver78.html.xdomain.jp/main.htm
でexecute(iframe)を押したとき、
Uncaught TypeError: Cannot read property 'display' of undefined
が発生。
ライブラリの中でdocumentを参照しているが、
main.htmがnew Handsontable(grid, {data: data});
したとき、グローバル空間はmain.htmのものであるので、
documentと言えばmain.htmのdocumentを指しているのが原因と思われる
該当のソースコード
http://testserver78.html.xdomain.jp/main.htm
を参照ください。
全体像
・main.htm (起動画面）
└handsontable.full.js （ライブラリ）
・blank.htm (iframe)
■main.htm
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Handsontable</title> <link rel="stylesheet" href="handsontable.full.min.css" /> </head> <body> <button id="executeSelf">execute(self)</button> <button id="execute">execute(iframe)</button> <div id="grid"> </div> <script src="handsontable.full.js"></script> <script type="text/javascript"> document.getElementById("executeSelf").addEventListener("click", (e)=>{ var data = [ ['佐藤', 28], ['鈴木', 19], ['田中', 25] ]; var grid = document.getElementById('grid'); new Handsontable(grid, {data: data}); }) document.getElementById("execute").addEventListener("click", (e)=>{ var data = [ ['佐藤', 28], ['鈴木', 19], ['田中', 25] ]; var ifr = document.createElement("iframe") ifr.src="blank.htm" document.body.appendChild(ifr) ifr.onload = (e) =>{ // ここのnewでエラー var grid = ifr.contentWindow.document.getElementById("grid") new Handsontable(grid, {data: data}); } }) </script> </body> </html>
■blank.htm(iframeがsrcしてる）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Handsontable</title> <link rel="stylesheet" href="handsontable.full.min.css" /> </head> <body> <span>ChildIframe</span> <div id="grid"> </div> </body> </html>
試したこと
・callによるthisの書き換えでwindowを変更する
→windowは変わらない
・Handsontableにコンテキストを指定する方法があるか
→なさそう？
・Handsontableを軽く改造してみる
→単純にコンストラクタにdocument参照を渡せるようにして、
それを他のdocumentと書いてるところで使うような感じに直してみようとしたが単純にはいかず挫折
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
回答1件
0
ベストアンサー
<script src="handsontable.full.js"></script>をiframe内に挿入してはいかがでしょう。（最初から書いても親から挿入してもどちらでも出来ると思います）
追記：
受け手側のスクリプトを挿入して、それに引数を与えて実行とか。
【iframeでJavaScriptを動的に実行する - メモ帳】
http://kwnktks0515.hatenablog.com/entry/2016/09/20/213516
js
1var script = document.createElement("script"); 2script.type = "text/javascript"; 3script.innerHTML = 'console.log("Hello World!")'; 4doc.body.appendChild(script);
【iframe内のJavascript関数を実行する | CloudAdvisor】
https://hacknote.jp/archives/1465/
js
1//IFRAME側 2callme = function(){ 3 alert('hello'); 4} 5 6//本体HTML側 7iframe = document.getElementById(id); 8iframe.contentWindow.callme();
投稿2018/07/01 01:29
編集2018/07/01 01:48総合スコア69398
http://testserver78.html.xdomain.jp/main2.htm
blank.htmのheadタグに上記のタグを追加してみましたが同じエラーになります。。。
iframeに関数があれば実行できるので、関数を挿入して、それにdataを渡すようにしてみては。
<script type="text/javascript">
function writeTable(data) {
console.log("executed2")
var grid = document.getElementById('grid');
new Handsontable(grid, {data: data});
}
</script>
をblank.htmに追加して呼び出すようにしたら動作しました。
ありがとうございました。
あなたの回答
tips
プレビュー
