colorbox で、iframeの中のリンクを開いた後、closeでリンク元に戻す方法:末尾に正しい方法の追記あり
言葉で説明するとわかりにくいが・・・
colorbox のiframe を使って、別のhtmlファイルを開き、さらに、その中のリンクから別のページを開いた後に、クローズボタン(または、オーバーレイのクリック)で、最初に開いたページに戻りたい、ってことがある。
例えば、
- colorbox 内にリストを開く
- そのリストをクリックすると、colorbox 内に詳細の編集画面が表示される
- 詳細の編集が終わったら、クローズまたはオーバーレイをクリック
- 内容が更新されたリストが、colorbox内に表示される
みたいな。で、そんな時はコレ。正しい方法かどうかは知らん。
1.新しいpublic Method を追加する。
まずは、jquery.colorbox.js を開き、以下を探す。
publicMethod.position = function (speed, loadedCallback) {
次に、その行の前に、以下を挿入する。
publicMethod.cancelClose = function (object) {
open = true;
closing = false;
throw new Error("");
};
2.colorbox 呼び出しscriptに、onCleanup を追加
html 内に記述される(もちろん、外部ファイルでも構わんけど)、
$( document ).ready( function() {
$( ".iframe" ).colorbox( {
・・・・
みたいな奴に、以下を追加する。
onCleanup : function() {
var body_id = $( '.cboxIframe' ).contents().find( 'body' ).attr('id');
if( body_id == 'リンクで更に開かれたドキュメントのbodyのID' ) {
if( navigator.appName == "Microsoft Internet Explorer" ) {
window.document.getElementById( 'cboxIframe' ).contentWindow.location.href = "リンク元のURL";
} else {
window.document.getElementById( 'cboxIframe' ).src = "リンク元のURL";
}
$.colorbox.cancelClose(); // < さっき追加した、新しい public Method
}
},
body_id、は別にコレである必要なし。リンク先にはあるけどリンク元には無い、ってIDだったら、どれを使ってもOK。
要は、現在iframe中に開かれているのが、リンク先なのかリンク元なのかを判別したいだけ。
if( navigator.appName == "Microsoft Internet Explorer" ) {
・・・
の部分で、リンク元を読み込み直してるんだけど、if 使ってるのは、IE と、chrome あたりの挙動が違うから。
colorbox は、Jack Moore の作品。多謝。
(c) 2013 Jack Moore - http://www.jacklmoore.com/colorbox
license: http://www.opensource.org/licenses/mit-license.php
追記:正しい方法(2013/11/07)
完全に間違ってました。正しい方法は以下を参照。ドキュメントをちゃんと読め、ってことで。
Prevent Colorbox from closing / Change the behavior of $.colorbox.close
要は・・・
var originalClose = $.colorbox.close; // close メソッドを別にコピっておいて・・・ $.colorbox.close = function() { // close メソッドを書き換える ・・・・・・ if( 何らかの条件 ) { ・・・・ // 何らかの処理 return; // close メソッドを抜ける } else { ・・・・ // 何らかの処理 originalClose(); // 本来のクローズ処理を行う }
趣味プログラマはコレだから・・・■