• 締切済み

iframeからcolorboxの呼び出し

IEでのみエラーが起きていて、ハマってしまいました。 おかしな所などご指摘頂けると助かります。 トップページ内にiframeを読み込んでいます。 iframe内に設置した画像をクリックして、 トップページのcolorboxを呼び出して表示させています。 下記サイトを参考に、colorboxをiframe内から親ページに展開させる設定しています。 http://www.browncrown.net/blog/?p=2120 ■top.html ・colorbox用のjquery、css等一式読込 ・トップページ内の画像でも同じ画像を呼び出して表示させている→問題なし ・専用javascript記載 =============== <script src="jquery.colorbox.js"></script> <script> function cbox(url,ttl){ var href = url; var title = ttl; $.fn.colorbox({ width: "500px", height: "500px", href:href, title:title, iframe: true, scrolling: "auto" }); } </script> ■iframe.html ・galleryviewというギャラリーを使用して、バナーをスライドしている。  その中の画像をクリックして、親(top.html)にcolorboxで画像を表示したい。 ・専用javascript記載 ================= <script> function callparent(url,ttl){ parent.cbox(url,ttl); } </script> ================= ・colorbox呼び出し <a href="javascript:callparent('img/hoge.jpg','画像タイトル')"><img src="img/bnr.jpg" /></a> この設定でIEでのみエラーが出てしまいます。。 他のブラウザでは問題なく表示されます。 エラー内容は下記になります。 ================= このページは表示できません • Web アドレス javascript:callparent('img/hoge.jpg' が正しいか確かめてください。 • 検索エンジンでそのページを探してください。 • 数分待ってから、ページを最新の情報に更新してください。 おかしな部分、ご指摘頂けると幸いです。

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

ちょっと再現できる環境にないのですが ><a href="javascript:callparent('img/hoge.jpg','画像タイトル')"> の個所を <a href="#" onclick="void(callparent('img/hoge.jpg','画像タイトル'));return false;"> 的な書き方に変えてみてもダメでしょうか?

watermusic333
質問者

補足

早速のご教授ありがとうございました! 教えて頂いた内容でテストしてみましたがダメでした。 どうも【galleryview】というiframe.htmlで使用している ライブラリーのjsのせいなのかどうかわかりませんが、 この設定で画像をクリックすると、iframe.htmlが別ウィンドウでもう1つ開いてしまいました。 IE以外は問題なく親側の関数を呼べるのに、、、困りました。。

関連するQ&A

  • colorbox 画像が表示されない

    質問おねがい致します。 本業は紙媒体で 並行して独学でwebを学んでおりますがJqueryのcolorboxが表示されずに いきづまっています。パスが違うとか素人の失敗だとはおもうんですが ドリームウィーヴァーで作成しているのですが テンプレートファイルを作成し 追加ページで画像にリンクをはり <div class="box"><a href="/images/mapBig.png" rel="example1" title="map"><img src="/images/mapSmall.png" width="245" height="147" alt="map" /></a></div> としているのですが ライブビューではちゃんとポップアップになるのですが ブラウザーでプレビューしたりサーバーアップして確認すると オーバーレイの黒い背景と白い棒が2本でてきて画像自体が表示されません 下記はテンプレートのソースです。 ジャバの部分はcolorboxからペーストです colorbox.cssの画像へのパスは url(images/controls.png) に統一しています どなたかお願いします!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Style-Type" content="text/javascript" /> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> <!-- TemplateBeginEditable name="doctitle" --> <title>00000000000000000000</title> <!-- TemplateEndEditable --> <meta name="description" content="0000000000000000000000000" /> <meta name="keywords" content="00000000000000000000000000000" /> <link href="../css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="../js/colorbox/example1/colorbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="../js/colorbox/colorbox/jquery.colorbox.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $("a[rel='example2']").colorbox({transition:"fade"}); $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='example4']").colorbox({slideshow:true}); $(".example5").colorbox(); $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"}); $(".example9").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> </head>

  • colorboxの直接呼び出し方法について

    通常、このような感じでjqueryのcolorboxを使ってますが、 (問題なく動きます。) <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.colorbox.js'></script> <script>  $(document).ready(function(){   $('.colorbox').colorbox({iframe:true, innerWidth:700, innerHeight:430});  }); </script> <li><a href='test2.html' class='colorbox'>test2</a></li> 質問ですが、ipadである場所をクリックしたときに、動作する部分に、動くスクリプト内でカラーボックスを使って表示するところの書き方がわかりません。 <script>  document.addEventListener('touchstart',catchTouch, false);  function catchTouch(event) {   cX =event.touches[0].clientX;   cY =event.touches[0].clientY;  if(10 <= cX && cX <= 170 && 10 <= cY && cY <= 40){pageScroll('fragment-1');}  else if (10 <= cX && cX <= 170 && 650 <= cY && cY <= 680){window.open('order4.html','colorbox');}  else if (10 <= cX && cX <= 170 && 690 <= cY && cY <= 720){location.href='call.html';}  else if (10 <= cX && cX <= 170 && 690 <= cY && cY <= 720){????????;}  } </script> ????????のところに何かを記述して、 <li><a href='test2.html' class='colorbox'>test2</a></li> これの動作と同じ事を実現するにはどのようにしたらよいのでしょうか?

  • jqueryのcolorboxを読込直後に開きたい

    ある書籍に記載されていた、以下のサンプルがあります。 このサンプルは、画像をクリックすると、colorboxプラグインを使用して モダルダイアログが開きます。 これを、ページを開いた直後(クリックせずに、自動的)に開きたいのです。 その方法をお教えいただけませんでしょうか。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery - colorbox plugin (Flash Video : Embedded)</title> <link href="base.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> <script src="../../scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.colorbox-min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('a.youtube').colorbox(); }); </script> </head> <body> <p> <a class='youtube' href="content/flash.htm" title="Martin Luther King, Jr.'s last speech"> <img src="http://i4.ytimg.com/vi/o0FiCxZKuv8/default.jpg" alt="YouTube (Embedded)" /> </a> </p> </body> </html>

  • <table>、もしくは<iframe>内でのランダム表示は?

    ご質問させてください。 いろいろ調べたのですが、 画像やテキストのランダム表示については、結構あるのですが ページ内にあるひとつの<table>(もしくは<td>)、または<iframe>の中(<iframe>に、入るソースはhtml形式です。)に読み込み毎にランダム表示するスクリプトがわかりません。 そんな素敵なjavascriptがあったら教えてください。また、私、htmlを少し理解している程度なので、やさしくご指南いただけたらと思います。なお、IE、NN等のブラウザ環境はとりあえずおいてのお話でいただければと思います。 よろしくお願いいたします。 たとえば、単純にランダム画像を入れるスクリプトの 画像(img)をhtml(iframeの場合)に変更したらいけるのでしょうか?

  • HTMLのIFRAMEについて教えて

    HTMLのIFRAMEについて教えて欲しいのですが、 例えば、cgiの入力項目で、数字の1を入力した場合、aaa.htmlというページ内にあるIFRAMEで囲まれた エリア内に、1の写真が表示できるようにしたいのです。 現在、以下のような記述をしているのですが、IFRAMEの部分がエラーになってしまうのです。(>_<) noには、数字の変数が入っています。 他の方法でも結構なのですが、数字によってIFRAME内に表示される写真を変えたいのです。 どなたか、宜しくおねがいします。 <script type="text/javascript"> <!-- switch(no){ case 0: id = "01.jpg"; break; case 1: id = "02.jpg"; break; case 2: id = "03.jpg"; break; default : id = "00.jpg"; break; } // --> </script> <iframe src="id" name="picture" width="300" height="300"></iframe>

    • ベストアンサー
    • HTML
  • colorboxにいいね!ボタンなどをいれたい

    今、ギャラリー風のサイトを構築中です。 Lightbox風のjQueryプラグイン、ColorBoxを使用しております。 ColorBoxはサムネールをクリックして、画面が暗転して画像が拡大表示されると、 右下に×の閉じるボタンが表示されます。 その左隣あたりに、Facebookのいいね!ボタンとピンタレストの“Pin it”ボタンを 設置したいのですが...JavaScriptが全然分からないので、 どこを触って良いかも分かりません。 拡大画像をHTML上でマークアップするさいに、aタグのtitleの所を上手く使う方法も あるのかな?とも思いますが、いちいちtitleに書き込むのもちょっと煩雑ですし、 できればJavaScriptにて自動に表示されれば...と思っております。 お分かりになる方、どうぞご教授ください。

  • iframeの中から親ページをスムーズスクロール

    タイトルどおり、iframeの中から親ページをスムーズスクロールしたいと考えています。 ヘッダに <script> $(function() { var topBtn = $('#toTop'); topBtn.click(function () { parent.$('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> 親ページには高さ3000ピクセルのiframeを作って、そこに読み込んでいる子ページ最下部に <div id="gotoTop"><a href="#top_page"><img src="_image/btn_top.jpg" alt="トップに戻る" /></a></div> と記述しています。 この状態で親ページをスムーズスクロールさせることができません。 事情があって、親ページ側にはスクリプトやタグを追加することができません。 親も子もおなじドメインにあります。 ["parent" $('body,html') animate]などのキーワードで検索した記事を参考に parent.$('body,html').animate を window.parent.$("body").animate や $('html, body', window.parent.document).animate に書き換えてみてもうまくいきませんでした。 どうかアドバイスをお願いいたします。

  • JavaScript 配列とiframe

    カテゴリを誤って投稿してしまいました。 インラインフレームを二つ(iframe1,iframe2)用意し、jQueryにてクリック出来るようにしたdiv要素のクリックで、それぞれのリンク先をJavaScriptの配列に収めた連番通り、1,2,3,4…htmlと表示させたいのですが、二つの配列を使用すると連番通りに表示されなくなります。(一つの配列使用では連番通りに表示されます。) 1クリックで、iframe1にはiframe1link1.htmlの表示、iframe2にはiframe2link1.htmlの表示。クリックごとにlink2,link3と順番どおりに表示する、これを可能にするお知恵を拝借したいと思い投稿させて頂きます。よろしくお願いいたします。 ================ (JavaScript(1)iframe1.js) var URLs=new Array(); var cnt=0; URLs[1]="iframe1link1.html"; ******* URLs[10]="iframe1link10.html"; function Jump1(){ cnt++; if(cnt==11) {cnt=0;} iframe1.location.href=URLs[cnt]; } ================= (JavaScript(2)iframe2.js) var URLs=new Array(); var cnt=0; URLs[1]="iframe2link1.html"; ******* URLs[10]="iframe2link10.html"; function Jump2(){ cnt++; if(cnt==11) {cnt=0;} iframe2.location.href=URLs[cnt]; } ================ (HTML) <!doctype html> <link rel="stylesheet" href="./css/style.css" type="text/css"> <script src="iframe1.js"></script> <script src="iframe2.js"></script> <title>sample</title> <div id="container" class="div" onclick="Jump1();Jump2()"> <div id="main"> <iframe src="./iframe1link0.html" id="iframe1"></iframe> <iframe src="./iframe2link0.html" id="iframe2"></iframe> </div> </div> これでは連番通りにいかない。 ====================

  • iframe内をリロードできますか?

    たとえば <HTML> <head> <script language="javascript"> <!-- function a1reload(){ "iframe内をリロードする文章" } //--> </script> </head> <body> <iframe src="a1.html" id="a1iframe"><br> <a href="javascript: a1reload()">ここをクリック</a> </body> </HTML> こんな感じでiframe内をリロードできないでしょうか? お願いします。

  • [jQuery]colorboxの干渉について

    当方jQuery初心者です。この場を借りてご質問させて下さい。 現在、jQueryのfullPage(http://alvarotrigo.com/fullPage/)を使用した、横スクロールのサイトを作成しております。 そのコンテンツの中で、同じくjQueryのcolorbox(http://www.jacklmoore.com/colorbox/)を使用し、 インラインhtmlを表示させたいと思っております。 しかしながら、同時に動かそうとするとcolorboxが全く動きません。 単体でのcolorboxは動くので、恐らくfullPageとの干渉を起こしていると思うのですが、何か解決方法はございませんでしょうか。 質問させていただく前に調べた結果、colorboxはスライダーと干渉を起こすとのことで、 colorboxのreturnFocusをfalseにすることで解消されるとあったのですが、それでも解消されませんでした。 どなたかご教示頂けますようよろしくお願い致します。 以下、現在のソースです。 ------------------------------------------------------------ <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type='text/javascript' src='js/moment.min.js'></script> <script src="js/jquery.easings.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false, anchors: ['page'], navigation: false, navigationPosition: 'right', navigationTooltips: ['page'], slidesNavigation: true, slidesNavPosition: 'top', //Scrolling css3: true, scrollingSpeed: 700, autoScrolling: false, scrollBar: false, easing: 'easeInOutCubic', easingcss3: 'ease', loopBottom: false, loopTop: false, loopHorizontal: true, continuousVertical: false, normalScrollElements: '#element1, .element2', scrollOverflow: true, touchSensitivity: 15, normalScrollElementTouchThreshold: 5, //Accessibility keyboardScrolling: true, animateAnchor: true, recordHistory: true, //Design controlArrows: true, verticalCentered: true, paddingTop: '-10em', resize : false, //Custom selectors sectionSelector: '.section', slideSelector: '.slide', //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction){} }); }); </script> <script src="js/jquery.colorbox.js"></script> <script> $(function(){ $(".inline").colorbox({ inline: true width:"700px" returnFocus: false }); }); </script> ------------------------------------------------------------