[JavaScript] ColorBox 跨越 iframe 顯示完整的黑底(overlay)

Standard

之前曾寫過一篇「[jQuery] ThickBox 跨越 iframe 顯示完整的黑底」,最近回去看了一下 thickbox 的網站,它也宣告停止繼續維護了。

它建議可改用的清單中,有個也滿好看的燈箱效果 ColorBox,最近有網友問到 ColorBox 可否也能做到跨越 iframe 顯示完整的黑底(overlay)呢?經實際測試是可以的,作法如下。

首先準備兩個檔案,index.html 首頁(嵌入 iframe)與 iframe 的內容 iframe.html 兩個檔案。

index.html 中,除引入所需的 jquery 與 colorbox 的 js, css 檔外,還要準備一個 iframe 內嵌框。

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>

※路徑請依實際狀況變更。

iframe 內嵌框:

<iframe src="iframe.html" width="500" height="500"></iframe>

接著,來寫 iframe.html 的內容。
其同樣需引入所需的 js/css 檔,請參照上面囉。

再來寫一段請父視窗開啟連結(link)於 colorbox 的 JavaScript:

function OpenLink(link) {     
  parent.$.colorbox({ href: link, iframe: true, width: "50%", height: "50%" });
}

接著就可使用此方法開啟連結,本例為開啟 Google:

<a href='http://www.google.com' onclick="javascript:OpenLink('http://www.google.com'); return false;">Open from parent</a>

測試於 IE7/IE8/Firefox 皆正常。

15 thoughts on “[JavaScript] ColorBox 跨越 iframe 顯示完整的黑底(overlay)

  1. patw

    是啊 官網有說喔:

    Note that grouping will not work with this format since the parent document can not access the content of the iframe to see if any of those elements share a rel attribute value.

  2. 如果網站是做上下欄 top 和 main 的話
    若在main裡做圖片燈箱效果
    黑底也可覆蓋到top嗎?

    有點看不太懂iframe的作法
    不好意思麻煩版主解惑
    謝謝

  3. 想請問一下,版主您給的檔案中,html 檔案都一定要放在 example1 資料夾中才能運作,如果想放到資料夾外的話應該要如何作呢?另外,我看跨越 iframe 彈出的 colorbox 是固定大小,如果是放圖片,然後希望 colorbox 能自動服和圖片大小,這樣有辦法嗎?感謝版主耐心回答

  4. patw

    可以將 example1 資料夾中的檔案移出 example1 外呀, 但請注意原始碼中的相對路徑也要做相應的修改喔, 例如原先都是寫 ../colorbox/jquery.colorbox.js, 若移出資料夾外, 就不需 ../ 了。

    第二個問題, 那麼請不要設 iframe: true 以及寬高, colorbox 便會自動依照圖片大小顯示。

    最後建議您可以去 colorbox 的官網 閱讀說明文件, 應該會對 colorbox 的相關用法比較了解喔。

  5. 感謝版主的回答,上面兩項都成功了,不過我試了老半天還是用不出我所想的效果。
    我的情況如下:
    我的 a.html 上有一個 iframe,然後用一個按鈕呼叫 b.html 的內容顯示在 iframe 裡,我希望的做法是開啟 a.html 的時候,按 iframe 中 b.html 上的小圖,然後跨越 iframe 顯示完整的大圖,但是我目前跳出的 colorbox 都限制在 iframe 內,想請問版主這類情況該如何處理? 附上抓圖:http://ppt.cc/PL8g
    如果版主沒有空的話也沒關係,感謝您耐心看完,感謝!

  6. steve

    謝謝你的文章。

    另外請較,COLORBOX 跨越 IFRAME後,可以使用例如parent.frames[0].functionName(),或是parent.framesName.functionName()的方式呼叫原視窗(|頁框)的函數,可是這樣都要事先知道頁框名稱或是頁框id….。

    colorbox能否有其他方式,不須指定,就能呼叫原本父頁框裡的js function()呢?謝謝。

    ps:parent.functionName()沒用,因為是COLORBOX 跨越 IFRAME

  7. patw

    所以是指父頁面有多個 iframe,然後希望可以在各 iframe 裡面的連結開啟 colorbox,又在各自 colorbox 裡面呼叫源頭的 iframe 頁中的 function,且又希望能夠以不指名序號或名稱的方式呼叫….嗎?

    不是很清楚你的情境,我先照上面的情境做了個 demo,未細測,不知道是不是你要的?

    http://plnkr.co/edit/uHI2kY?p=info

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *