Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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という変数に、内側ページのスクロール位置が入ります。

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

参考資料

TakamiChie
NPO法人 まちづくりエージェント SIDE BEACH CITY.理事。フリーランスのプログラマ。横浜・横須賀でIT勉強会の主催などをやってます。
https://onpu-tamago.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away