【jQuery】 jquery.simplePopup 書き直し

【2015年8月26日 ver2.0.9 更新】

仕事で使うために作ったプラグイン。

リンク先の画像などをブラウザ・ウィンドウ内にポップアップ表示するJavascriptライブラリはたくさんありますが、数が多すぎてどれがいいのか分からないのと、本体以外にCSSファイルや画像が必要であったりとややこしい。

最低限、一つのファイル(プラグイン本体のJSファイル)で設置できて、自分にとって使い勝手がいいものを勉強がてら作ってみよう、というのが4年前に作り出したきっかけ。

ドキュメント作成・備忘録も兼ねてアップ。
リンク先をウィンドウ内にポップアップ表示するjQueryプラグイン

jQuery.simplePopup-【jQueryプラグイン】

jQuery.simplePopup 更新

http://hw001.spaaqs.ne.jp/k-nakagawa/jquery.plugins/SimplePopup/

ひさしくほったらかしていたjQueryプラグインを更新。ほとんど部分を書き直し・・・。修正しながら、Deferedオブジェクトの便利さを知って他のスクリプトの修正をやったりとか、packer(.NET版)のUIに手を加えたりと、本来の目的以外のことをやり出して脱線しまくり。

一番めんどくさかったのが、iPadでちゃんと表示できるようにすること。結局iframeでスクロールができない問題が残ってしまった。
でも、タッチデバイスを完璧とは言わないまでも、少なくともjavascript+jQueryでハンドリングする手順をマスターできたのでまぁ、いいか。

iframeのloadイベント 【書き直し】

今月の初めに書いた投稿が、完全に勘違いだったので、削除して改めて書き直し。

jQuery(1.7.2)でiframeを動的に生成して、そのloadイベントを書いてたときに、どうしても理解できないことが一つあります。
たぶん、僕が無知なだけかもしれませんが・・・

// <a id="test" href="http://somewhere.url/">iframeにリンク先をロードさせる</a>
// というような、HTMLがあって、

;(function($)
  {
    $('a#test').click(function(ev)
                      {
                        ev.preventDefault();
                        ev.stopPropagation();
                                          
                        //クリックされたアンカータグのhref属性を保存。
                        var href = this.href;
                        
                        //デバッグ用のカウンタ
                        var count = 1

                        //iframeを生成して、そこに読み込ませます。
                        var $iframe = $(document.createElement('iframe')).appendTo(document.body);
                        
                        //onloadイベントでチェック
                        $iframe.load(function()
                                    {
                                      console.log([count++,this.src]);
                                    });

                        //普通に読み込むと、ログには [1,'http://somewhere.url/'] が表示されます。
                        $iframe.attr('src',href);
                        
                        //window.setTimeout(function(){$iframe.attr('src',href);},100);
                        //しかし、IEやFireFoxだとsetTimeoutメソッドで強制的に非同期で読み込ませると、
                        //ログには・・・
                        //---------------------------
                        //[1,'']
                        //[2,'http://somewhere.url/']
                        //---------------------------
                        //と表示され、2回コールされています。
                        //しかし、safariやchromeなどのwebkit系のブラウザでは1回しかコールされません。
                      });
  })(jQuery);

単純にsrc属性を設定してロードした場合だと、どのブラウザでも1回しかコールされない。
だけど、setTimeoutを使用してロードを遅延(非同期)実行させると、IE/Mozilla系ブラウザは2回コールされる。
ただ、タイムアウトミリ秒を1とか10とかのようにすると1回しかコールされないときもある。

よく分からない。そういうものなの???