window.postMessageのWikidotにおける挙動について

単純なIframe間通信とブラウザ及びサインイン状態によるスクリプトの動作の可否のデータ

フレームNo.0

フレームNo.1

上記サンプルの構文

[[html]]
<style type="text/css">
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);
</style>
<div id="hide" style="display:none;">
<textarea id="result" style="display:block;margin:auto;width:80%;border:ridge #EEE 2px;background-color:#000;color:#2F2;height:100px;" readonly>
</textarea>
<button style="display:block;margin:auto;" onclick="post()">PostMessage</button>
</div>
<script type="text/javascript">
var timeData;
var resultDisplay;
var bro;
document.addEventListener("DOMContentLoaded",function(){
bro = window.parent.window.frames;
resultDisplay = document.getElementById("result");
document.getElementById("hide").style.display = "block";
window.addEventListener("message",function(event){
timeData = new Date().getTime();
resultDisplay.value = "I get " + (timeData - event.data) + "milliseconds later.\n" + "My brothers" +  bro.length +  "\n" + resultDisplay.value;
resultDisplay.scrollTop = 0;
});
});
function post(){
timeData = new Date().getTime();
resultDisplay.value = "I send " + (timeData) + "\n" + resultDisplay.value;
 bro[1].postMessage(timeData,"*");
}
</script>
[[/html]]
 
**フレームNo.1**
[[html]]
<style type="text/css">
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);
</style>
<div id="hide" style="display:none;">
<textarea id="result" style="display:block;margin:auto;width:80%;border:ridge #EEE 2px;background-color:#000;color:#2F2;height:100px;" readonly>
</textarea>
<button style="display:block;margin:auto;" onclick="post()">PostMessage</button>
</div>
<script type="text/javascript">
var timeData;
var resultDisplay;
var bro;
document.addEventListener("DOMContentLoaded",function(){
bro = window.parent.window.frames;
resultDisplay = document.getElementById("result");
document.getElementById("hide").style.display = "block";
window.addEventListener("message",function(event){
timeData = new Date().getTime();
resultDisplay.value = "I get " + (timeData - event.data) + "milliseconds later.\n" + "My brothers" +  bro.length +  "\n" + resultDisplay.value;
resultDisplay.scrollTop = 0;
});
});
function post(){
timeData = new Date().getTime();
resultDisplay.value = "I send " + (timeData) + "\n" + resultDisplay.value;
 bro[0].postMessage(timeData,"*");
}
</script>
[[/html]]
ブラウザ及びサインイン状態による上記スクリプトの動作記録
※この記録はこのページにhtmlブロックを2つしか設置していなかった時のものである
表上 = サインイン、表下 = サインアウト
s = 動作成功 、 f = 動作失敗
data chrome edge firefox
SignIn s s s
SignOut s f f

また、window.parent.window.frames.lengthの数値においてはどのブラウザにおいてもサインイン状態では2、サインアウト状態では5という結果になった。よって、wikidotからサインアウトしている場合は閲覧しているページに未知のiframeが3つ追加されていると言える。

また、EdgeとFireFoxにおいてはフレーム0のボタンを押した所、フレーム0に送信メッセージと受信メッセージが表示される為、ログイン時はフレーム番号が0であったフレームがログアウト時にはフレーム番号1になっている事がわかる。従って、ログアウト時に挿入される未知のiframeはEdge及びiframeの場合はページの一番上(フレーム番号0番)に挿入されていると考えられる。

iframeのhref

上記スクリプトソースコード:

[[html]]
<div id="result">

</div>
<button onclick="testHref()">test</button>
<script type="text/javascript">
var bro = window.parent.window.frames;
function testHref(){
var sentence = "";
for(var i = 0;i < bro.length;i++){
try{
sentence += i + " : " + bro[i].location.href + "<br />";
}catch (e){
sentence += i + " : " + e + "<br />";
}
}
document.getElementById("result").innerHTML = sentence;
}
</script>
[[/html]]

結果:

未知のiframeからhrefを取得しようとするとクロスオリジンエラーが発生する。この時、GoogleChromeのサインアウト時のデータを見るとiframe番号0番でこのエラーが発生する時としない時がある。よって未知のiframeの挿入位置は若干ランダムなのである。

後サインアウト時はtry{}catch(e){}構文でエラーが出た時は処理をガン無視すれば良いだけだった。回す位置とか考えなくてよかった。なんで昨日気付かなかったのか。

FireFox:


意外な事に安定している。

Edge:


これも安定している。

GoogleChrome、FireFox、Edgeの3ブラウザの中でサインアウト時に一番動作が不安定なのはGoogleChromeかも知れない。

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License