IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / iframe内の読み込みタイミングがわからない

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属性を削除してしまって表示できないようにすることを意図しているのですが、ところがです、これでもブログカードが表示されてしまうのです。

え!? どういうこと?

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

ということで、iframeの内容がいつ読み込まれるのか全くわからなくなりました。何か勘違いしているのでしょうか?

誰か教えて〜!

Joomla! 3.9.2 セキュリティ & バグフィックスがリリースされています
node.js で URLパースすると favicon.ico が返る
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com