Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

複数の ifame の読み込み( load )を待つ方法

More than 3 years have passed since last update.

背景

複数の iframe をページ内に配置して、各々の iframe のコンテンツをごにょごにょする場合、 全ての iframe の読み込み( load )が終わるのを待ってから処理を行わないとタイミングによって、 iframe の DOM を JavaScript でつかめたり、つかめなかったりして動作が安定しません。

jQuery の Deffered を使って全ての iframe の読み込みを待つことで、この問題をクリアできます。

コード

HTML

<div id="mainContents">
  <div id="frameAContainer">
  </div>
  <div id="frameBContainer">
  </div>
  <div id="frameCContainer">
  </div>
</div>

JavaScript

共通関数

function iFrameLoaded(id, src) {
  var deferred = $.Deferred(),
    iframe = $("<iframe></iframe>").attr({
      "id": id,
      "src": src
    });

  iframe.on('load', deferred.resolve);
  iframe.appendTo("#" + id + "Container");

  deferred.done(function() {
    console.log("iframe loaded: " + id);
  });

  return deferred.promise();
}

main

$(function() {
  $.when(iFrameLoaded("frameA", "./framea.html"), iFrameLoaded("frameB", "./frameb.html"), iFrameLoaded("frameC", "./framec.html")).then(function() {
    console.log("All iframes loaded");

    // OK, Ready! Do Something!!
  });
});

少しだけ解説

iframe を 最初から HTML 上に配置するのではなく、 iframe を格納するコンテナ( frameAContainer
〜 frameCContainer )だけ用意しておき、 iframe は JavaScript で動的に生成して load を待つように Deffered でセットしています。 最初から HTML 上に配置する方法では私の環境( MacOSX )では、load をつかめない場合がありました。

このコードは MacOSX の環境で Safari 、 FireFox 、 Chrome で動作確認済です。

参考サイト

jQuery.Deferred to Tell When Certain iframes Are Loaded · Elijah Manor

shinchit
「すべてはドキュメント( It's All Writing. )」を信条に働くソーシャルプログラマー。 plan text 大好き。コマンドライン大好き。vim 大好き。
https://www.its-all-writing.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away