LoginSignup
8
8

More than 5 years have passed since last update.

iframeから親ウィンドウにメッセージを飛ばすクロスオリジン対応版

Last updated at Posted at 2019-03-13

iframeを使って別のページを表示する場合、その中のページと外側のページは基本的に別物となり、通信をすることができません(同じサイトまたは、両方ローカルファイルである場合は除く)。

PythonのPyWebViewを使ってHTMLを表示している場合、一見両方ローカルのファイルですので、外側のページと内側のページで通信ができそうですが、ダメなようです(いわゆるクロスオリジンの状態とみなされてしまう)。

そこで、クロスオリジンの環境でも、iframeの内側のページから外側に通信をしたい場合、Window#postMessage()というメソッドを使用します。

window.postMessage - Web API | MDN

このメソッドは指定したWindowオブジェクトにメッセージを送信します(受信側のウィンドウは、イベントリスナで受け取ることができる)。つまり、iframeの内側のウィンドウからparent.window.postMessage()とすることで、フレームの外側のページにメッセージを送ることができます。

内側ページのJavaScript
\document.addEventListener("scroll", function (e) {
  window.parent.postMessage(document.documentElement.scrollTop, "*");
})
外側ページのJavaScript
var pos = 0;

window.addEventListener("message", function (e) {
  pos = e.data;
});

このようにすると、外側ページのposという変数に、内側ページのスクロール位置が入ります。

なお、内側のページと外側のページのサイトのドメインが異なる・プロトコルが異なる場合は通信ができないようです。

参考資料

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8