colorbox で、iframeの中のリンクを開いた後、closeでリンク元に戻す方法:末尾に正しい方法の追記あり

2013/1102

言葉で説明するとわかりにくいが・・・

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();	// 本来のクローズ処理を行う
}

趣味プログラマはコレだから・・・■

ken-dan

コメント、お願いします。