iframe内の読み込みタイミングがわからない

2019.01.22 javascript, はてなブログ

「はてなブログカードの iframe 内を弄る（自サイトのみ）」に書いた自サイトのブログカードを別ウィンドウで開かないように iframeの中の aタグの target要素を変更しようとした件、わけがわからなくなっています。

自サイト名/embed でもブログカードはできるは間違いない
iframeの読み込みはいつ？
iframe内の読み込みタイミングがわからない

自サイト名/embed でもブログカードはできるは間違いない

ブログカードの iframeの src="https://hatenablog-parts.com/embed?url=**** を 自サイト名/embed/エントリー に変更してもブログカードができることは間違いありません。

実際にこのサイトの特集ページ「はてなブログカスタマイズ」では、ソースで src属性を変更して、「iframe内の aタグを target=_parent に変更する javascript」の javascriptを入れていますが、問題なく自サイトは同じウィンドウで開きます。

ただし、検索結果のページはいわゆるブログカードにはならず別ウィンドウで開いてしまいます。

iframeの読み込みはいつ？

で、iframeの src属性を https://hatenablog-parts.com/embed から自サイトに変更する方のスクリプトですが、これがクロスブラウザになる時とならない時があり、不安定で一定しません。

これは、変更するタイミングを DOMContentLoaded イベントを使い、HTMLドキュメントの読み込みが完了した時にしているのがまずいのかと思い、確認のために、変更スクリプトを即時関数でフッタやサイドバーに入れても状況は変わりません。デベロッパーツールでみてみますと、src属性は変わっているのに aタグの target要素は blankのままになっていることがあります。

ということは、src属性を変更する前に、すでに iframe内は読み込まれてしまっているということになってしまいます（ということかな？）。

iframeの内容はいつ読み込まれるのでしょう？

これを確かめるために、次の javascriptをサイドバーに入れて、iframeの src属性を削除してしまうことにしました。

(function(){
    var contents = document.getElementById('main'); 
    if(contents !== null){
        var iframes = contents.getElementsByTagName('iframe');
        Array.prototype.forEach.call(iframes, function(iframe){
            iframe.removeAttribute('src');
        });
    }
})();

これはつまり、ブラウザが順番にHTMLソースを読み込んでいき、このスクリプトがきた時に iframeの src属性を削除してしまって表示できないようにすることを意図しているのですが、ところがです、これでもブログカードが表示されてしまうのです。

え！？どういうこと？