colorboxをiframe内から親ページに展開させる
2月 13th, 2013
モーダルのプラグインとして使い勝手のよいcolorbox、よく使ってるんだけどiframeの中に設置したリンクから親ページに展開させたいっていう事例が発生。
色々調べた結果下記の仕組みで動作確認出来ました。
＜概略＞
1.colorboxのjs,css,jQueryは親フレームに読み込ませる。
2.iframeの中からのリンクはjavascriptを使って親フレームのfunctionを呼び出してに変数（URL,タイトル）を渡す。
3.親ページで受け取った変数をデフォルトのスクリプトを使わずにcolorboxを実行させる。
＜詳細＞
1.は省略
2.iframe内の記述
・スクリプト部分
<script>
function callparent(url,ttl){
parent.cbox(url,ttl);
}
</script>・html
<a href=”javascript:callparent(‘URLを記述’,’タイトル”>リンク</a>
parent.ファンクション名で親フレームのファンクションを呼び出す。
引数はurlだけでもいい。
3.親ページでの処理
・スクリプト部分
<script src=”jquery.colorbox.js”></script>
<script>
function cbox(url,ttl){
var href = url;
var title = ttl;
$.fn.colorbox({
width: “colorboxの横幅”,
height: “colorboxの縦幅”,
href:href,
title:title,
iframe: true,
scrolling: “auto”
});
}
</script>
※作成途中で動作確認すると思うんですが、ローカルで確認するとchromeだとローカルファイルアクセスのなんちゃらのセキュリティがあって動きません、サーバーにあげると動作確認出来ます。
カテゴリー: web
はじめまして
似たような事例に直面したので、参考にさせていただきました。
ちなみに、a要素に target=”_top” でも代用できるかと思うのですが、
何かデメリットがあったりするんですかね。
そもそもそういう事でもないのかもしれませんが。
>T93様
コメントありがとうございます。
今回、ページに展開させる内容が動画であり、
a要素にtarget=”_top”の方法ですと、全画面表示になってしまいました。あくまでcolorboxのモーダルを使用してという事を前提としていましたのでこのようになりました。
はじめまして。
iframから親ページでcolorboxを開かせたく、検索していて巡り会えました。
早速記事に書かれている通りに設定したつもりなのですが
私の設定が悪い様で動きません。
javascript全くの初心者な質問で大変恐縮なのですが
記事に書かれているものをコピーさせていただき、変更箇所は
2.iframeのURLとタイトル部分
3.親ページの横幅と縦幅の記述のみでしょうか。
2のpalentが赤文字なのはその部分を何か変更する必要があるのでしょうか。
ご教示いただけると幸いです。
よろしくお願い致します。
>chiho様
コメントありがとうございます。
基本的にコピペでいいはずですが、”、＜＞や＄は全角になっておりませんか？
jquery.colorbox.jsまでのパスや、ファイル名に間違いはありませんか？
とりあえず、親フレーム単体でcolorboxが機能しているかどうか確認してみてください。
お返事ありがとうございます。
親フレーム単体ではcolorboxは機能しております。
> ”、＜＞や＄は全角になっておりませんか？
すみません、記事中の
リンク
こちらをコピーしますと、hrefの後の「”」、callparent(の後の「‘」、
URLを記述「’」、タイトル「”」
と「」内が全角なのですが、この部分は全角のままでもよろしいでしょうか。
また親フレーム部分の
width: “colorboxの横幅”,
height: “colorboxの縦幅”,
こちらも“”が全角でコピーされるのですが、これらを半角にする必要があるのでしょうか。
お手数をおかけして申し訳ございません。
>chiho様
ブログ記述上どうしても「”」「,」等全角で入力しております。
コピーしたテキスト全て半角に置き換えてお使いください。
ありがとうございました。
お忙しい中お時間いただき感謝いたします。
はじめまして。
私も同じくiframe内から親ページにcolorboxを表示させたく悩んでおりました。
こちらのページを検索で見つけて、早速試した所！
無事動きましたー！と大感動だったのですが
どうやらIEでのみ、エラーが起きるようです。
エラー内容は下記になります。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
このページは表示できません
• Web アドレス javascript:callparent(‘img/hoge.jpg’ が正しいか確かめてください。
• 検索エンジンでそのページを探してください。
• 数分待ってから、ページを最新の情報に更新してください。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
show5さんが設定されたページではIEでの動作も問題ないですか？
何かわかれば、、、とコメントさせて頂きました。
どうぞ宜しくお願い申し上げます。
すみません、先ほどのコメントに追記です。
下記が作成してみたサンプルです。
http://gattino.info/sample/
IE以外では完璧なのです。
>rege様
コメントありがとうございます。
このエントリーの案件を制作していたのが２年前なので確かな記憶はないのですが、
クライアントのチェックで特に問題なかったのでクリアされていたのかと思います。
特にIEについて苦労した記憶がなかったので・・・
いただきました、サンプルサイトですが、ソースを確認してみましたところ、親フレーム（sample.html）にjquery、colorboxの読み込みがされていないような気がします。しっかり確認していなくてすみません。
また、当時と現在のcolorbox.jsやjqueryのバージョンのせいかなぁなんて思ってみましたが、IE以外だと動くんですよね。
うーん、IEだけ親フレームを呼び出せないなんてあったかなぁ・・・・
お力になれず申し訳ありません。
> show5様
ご返信ありがとうございます！
どうやらiframeの方で使用している「jquery.galleryview-3.0-dev.js」が原因のようでした。
こちらを外して試してみると、IEでも問題なく表示されました！
原因がわかってスッキリしました。
解決はできていませんが＾＾；
お忙しい中、ご確認頂き本当にありがとうございましたm（_ _）m
>rege様
なるほど、他のライブラリとの競合による不具合だったのですね。解決されて何よりです。
はじめまして
記事を参考にさせていただきました。
フレーム内からcolorboxの展開はできたのですが、表示する要素のグループ分けの方法がわからず頭を抱えております。
どうか知恵をお貸し頂けないでしょうか？
>shio様
古い記事にコメントありがとうございます。
＞表示する要素のグループ分けの方法がわからず頭を抱えております。
これはリンクタグの中にrel属性を付けてあげればグルーピング出来るはずですが、
この場合親フレームにて展開しているのでこのままでは親フレームではグルーピングできないかもしれません。
親フレームにURL,タイトルを渡す際にグルーピングの情報、全グルーピングのURL,タイトルも渡す必要があるかもしれません。
検証せずにお答えするのは申し訳ないですがたぶんそういうことになるかと思います。