[jQuery, Colorbox] Colorboxを使って開いたページで処理した何らかの結果を元のページに反映させる

※ Backbone.jsを使っています。

※ Colorbox はこちら→ Colorbox - a jQuery lightbox

親ページのHTML

parent.html

<!-- 中略 -->
<!-- CSS 読み込み -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="colorbox.min.css" rel="stylesheet">
<!-- 中略 -->
<!-- Form 部分 -->
<div class="input-group">
  <span class="input-group-btn"><button id="btnSearch" class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button></span>
  <input type="hidden" name="parent_id" id="parent_id" class="form-control"><!-- 順番大事（CSS崩れる） -->
  <input type="text" name="parent_name" id="parent_name" class="form-control" readonly="readonly">
</div>
<!-- 中略 -->
<!-- JavaScript　読み込み -->
<script src="jquery.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="parent.js"></script>

親ページのJavaScript

parent.coffee

#
# Modelの定義
#
class ParentModel extends Backbone.Model
  defaults:
    iframe: true
    href:   "child.html"

#
# Viewの定義
#
class ParentView extends Backbone.View
  el: "#btnSearch"

  events:
    "click": "search"

  search: ->
    $.colorbox @model.toJSON()

#
# インスタンスの生成
#
mParent = new ParentModel()
vParent = new ParentView model:mParent

Colorbox で開かれる子ページのHTML

child.html

<!-- 中略 -->
<!-- parent.html に渡すデータ -->
<a href="#b44c89cd2ae18632bdb1a98500e766d1/ユニークなID">ユニークなID</a>
<!-- 中略 -->
<!-- JavaScript　読み込み -->
<script src="jquery.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="child.js"></script>

Colorbox で開かれる子ページのJavaScript

child.coffee

#
# Routerの定義
#
class Router extends Backbone.Router
  routes:
    ":id/:name": "close"

  close: (id, name) ->
    $("#parent_id", window.parent.document).val id
    $("#parent_name", window.parent.document).val name
    parent.$.fn.colorbox.close()

#
# インスタンスの生成
#
window.router = new Router()
Backbone.history.start()

動き

子ページのリンクをクリックすると、親ページのフォームに値が入力された後、colorboxが閉じる。

味噌

• jQueryオブジェクトを生成するさい、第二引数（context）にwindow.parent.documentを指定すると、親windowのdocument内を対象としてくれる。
• そもそも、$("#hoge") では、$("#hoge", document)　というように、第二引数が省略されているそうです。→jQuery Core
• contextを指定してあげたほうが、処理が速くなるかも？（未検証）