IMUZA.com

<<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で送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

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

Another Sites

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

Contact Us

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

Copyright © 2022 · IMUZA.com