Python
JavaScript
Python3
pywebview

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

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

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


参考資料