從iframe調用父級中的Fancybox

Question

我有2頁，我的index.html和social.html。 我清理了我的索引，只留下了fancybox的jquery代碼需要我想要做的是在social.html中有圖像，當點擊它時，它會打開fancybox並顯示它但在index.html中不在iframe內。 出現的錯誤是：

Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
  onclick

這是我的index.html：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
        function showImage(image) {
            $.fancybox('<img src="img/' + image + '" alt="" border="0" />');
        };
</script>

</head>

<body>
<iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe>
</body>
</html>

在IFrame頁面中：

 <img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>

PS：兩個頁面都在同一個域...編輯：video.js - >這是來自fancybox我沒有這個。

jQuery(document).ready(function() {

    $(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'         : 640,
            'height'        : 385,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
            'wmode'             : 'transparent',
            'allowfullscreen'   : 'true'
            }
        });

        return false;
    });



});

Answer 1

首先，您應該使用fancybox v2.x無縫地執行此操作（修補fancybox v1.3.x不值得付出努力）

其次，你需要在兩個頁面，父頁面和iframed頁面，加載jquery和fancybox css和js文件，以便正確地超越fancybox，

所以在這兩個頁面中你應該至少有這樣的東西：

<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />

和

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>

然后在您的iframed（子）頁面中，您的腳本基本相同（但是使用v2.x的正確的fancybox選項... 請查看此處的文檔）

$(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            // more options (v2.x) etc

而不是這個

        $.fancybox({

做這個：

        parent.$.fancybox({

然后fancybox將在iframed頁面邊界的父頁面中顯示

更新：演示頁面在這里

Answer 2

由於img在iframe上是一個不同的網頁。 所以Jquery在index.html上，但img沒有，這就是為什么JQuery無法訪問圖像。

也許使用這樣的東西...但我不認為它會起作用

在index.html腳本部分

$(document).ready(function () {
    //function to active fancybox on the thumbs class inside the iframe
    //Not sure it works on iframes, probably it doesnt.
    $("#iframeID.thumbs").fancybox();
});

並將id添加到iframe聲明<iframe src = \\“social.html \\”id =“iframeID”等...其余屬性>

但是，我的建議是使用div而不是iframe。 您還應該從圖像中刪除onclick以獲取非阻礙性Javascript。

查看教程： http ： //fancybox.net/howto如果你想要一個西班牙語的類似教程，你也可以查看我的網站。

Answer 3

我以前遇到過這個問題，並且能夠找到解決方案。 這是iv做了什么。 在我的iframe頁面中，我使用href調用父窗口，例如onClick="callMe('www.google.com')"或者如果是pics“/images/pics.png”並在我的父頁面中調用此腳本

<script type="text/javascript"> 
 function callMe(site){ 
      $(".sample").fancybox({ 
         'width' : '97%', 
         'height' : '97%', 
         'href' : ''+site+'' //force href to change its site from the call function in the iframe page 
      }); 
      readyFancy() call to trigger the decoy link page 
 } 

 function readyFancy(){ 
      $("a.sample").trigger("click"); 
 } 
 </script>

在我的父html中，我們右邊是一個誘餌鏈接（這個是來自加載fancybox的示例）

<body> 
<a href="#" class="sample"></a> 
</body>

您可以在此處下載一個有效的示例.. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC

從iframe調用父級中的Fancybox

問題描述

3 個解決方案

解決方案1
20 已采納 2012-01-13 18:30:30

解決方案2
1 2012-01-13 16:41:31

解決方案3
1 2012-02-29 11:41:55

從iframe調用父級中的Fancybox

問題描述

3 個解決方案

解決方案1 20 已采納 2012-01-13 18:30:30

解決方案2 1 2012-01-13 16:41:31

解決方案3 1 2012-02-29 11:41:55

解決方案1
20 已采納 2012-01-13 18:30:30

解決方案2
1 2012-01-13 16:41:31

解決方案3
1 2012-02-29 11:41:55