JavaScriptのwindowのコールバック関数が動かなかった

子画面から親画面に情報の引継ぎを行うために、下記のサイトを参考にして、子画面からコールバック関数の実行を行うように実装して、テストしたが動かず。

https://qiita.com/hidehito108/items/f7ad9fe23736049a76d6

問題の切り分けのために、これだけのテストページを作ったり、変数化されているところをベタ書きにしたりもしたがダメだった。動いていない箇所を特定するために、コメントアウトしたりして、確認して、子画面からのコールバック関数の実行がエラーになっていることはわかった。なにかJSのモジュールでも足りないのかも、と思い調べたが標準のもので動くことがわかり、手詰まり。

画面上は、何も表示されないのでわからず。ダメ元で、ブラウザの開発者ツールを立ち上げてみた。標準のところには何も出ず。それで、いろいろとやっていたら、Consoleにエラーが表示されていた。そこには、下記の内容が表示されていた。

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

このエラーを調べてみると、ウェブサーバ上のコンテンツを実行していない場合に発生するとのこと。たしかに、確認はWindowsで、フォルダにあるHTMLファイルをブラウザで実行しており、ウェブサーバは介していなかった。テスト用のHTMLファイル2つ(親画面用と子画面用)をウェブサーバに配置して、httpでアクセスしたら、正常に動作した。問題はコードではなく、テスト実行していた環境が原因だった。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする