質問編集履歴

2 コードブロックで囲む

syagamisrash

syagamisrash score 7

2018/07/01 10:21  投稿
iframe内にHandsontableのスプレッドを表示できない
### 前提・実現したいこと
前提：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="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でエラーになる
                       // ここの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と書いてるところで使うような感じに直してみようとしたが単純にはいかず挫折
  • JavaScript

    25047 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • iframe

    177 questions

    HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。
1 ソースコードを記載

syagamisrash

syagamisrash score 7

2018/07/01 10:16  投稿
iframe内にHandsontableのスプレッドを表示できない
### 前提・実現したいこと
前提：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と書いてるところで使うような感じに直してみようとしたが単純にはいかず挫折
  • JavaScript

    25047 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • iframe

    177 questions

    HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る