前提・実現したいこと
前提: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と書いてるところで使うような感じに直してみようとしたが単純にはいかず挫折
回答1件
あなたの回答
tips
プレビュー