FancyBox iframe返回父項。$ as undefined（using WordPress）

我試圖從iframe中關閉FancyBox，但parent.$始終爲undefined。這是我的iframe的JavaScript：

<script type='text/javascript' 
    src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'> 
</script> 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
    (function($) { 
     $.fn.closeFancyBox = function() { 
      $(this).click(function() { 
       parent.$.fancybox.close(); 
      }); 
     }; 
     })(jQuery); 
     $('#cancel').closeFancyBox(); 
     }); 
}); 
</script>

更換parent.$.fancybox.close();與alert('clicked');作品就好了。我不明白爲什麼parent.$是undefined當iframe在同一個域中。

我正在使用WordPress 2.9.1，以及FancyBox for Wordpress插件。

主頁：//server.local/web/test/index.php
IFRAME頁：//server.local/web/test/wp-content/plugins/wp-test/test.htm

第一這些URL是主頁，第二個是在iframe頁; server.local是我的家庭測試服務器。

任何想法？如果它有幫助，我可以粘貼整個源代碼。

來源

2010-02-09 Aleksandr

花了好幾個小時試圖調試，並沒有得到任何好處。 所以我換掉了最新版FancyBox的'FancyBox for WordPress'插件，它被修復了。真的應該早些時候嘗試過。

在花了一段時間與WordPress和其各種插件後，我建議手動調用的東西，而不是依靠插件。它只是增加了另一層複雜性，如果你知道你在做什麼，不需要在那裏。

感謝Doug爲WordPress指出了iframe對父窗口jQuery的適當語法。

來源

2010-02-13 04:55:55 Aleksandr

它是未定義的，因爲WordPress在noConflict模式下運行jQuery。使用這個來代替：

parent.jQuery.fancybox.close();

noConflict模式意味着$並不等於jQuery的。您必須明確使用jQuery來訪問您通常可以通過$訪問的內容。

來源

2010-02-09 07:06:21

對不起，應該說，我意識到了這一點;我包括的JS是一個片段。我編輯了我的問題來反映這一點 - 傳遞$意味着我不必使用'jQuery'。 – Aleksandr 2010-02-09 10:04:05

@Aleksandr在'iframe'中傳遞'$'根本不會影響父頁面。事實上，你在'iframe'中包含了一個完全獨立的jQuery實例。如果你注意到你寫了什麼，你傳遞'$'，但是引用'parent。$'。就好像你有'var a = 1; alert（obj.a）;'你不會指望這兩個項目引用相同的值，除非代碼中有某個分配。 – 2010-02-09 13:58:26

你是對的，這是有道理的。然而，使用下面的代碼：'jQuery（'＃cancel'）。click（function（）{parent.jQuery.fancybox.close（）;}）;' 我仍然在Firebug：'parent中得到'undefined'錯誤。 jQuery.fancybox是未定義的。你有什麼想法，爲什麼這可能是？感謝您的幫助！一般來說，我仍然對JavaScript和編碼非常陌生。 – Aleksandr 2010-02-09 15:02:58

這對我的作品;）

<a href="javascript:parent.jQuery.fn.fancybox.close();" >

感謝這個崗位，它實際上引導了我一點點......我覺得不好，因爲我花了只有幾分鐘，我知道如何令人沮喪的fancybox WordPress的是！

來源

2010-07-13 04:21:13 Michael

HI，誰是有麻煩使用手動關閉花式箱的iFrame 任何人在WordPress的3.0花式箱的安裝：

使用此鏈接在你的iframe：

<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>

它的工作原理:)

來源

2010-07-16 11:28:33 dave

沒有任何建議爲我工作。我必須使用下面的代碼解決它。最新版本可能支持parent.jQuery.fancybox.close（）;方法，但舊版本不適用於此。

爲了與舊版本的插件現有網站/ jQuery的，試試這個

function close_window() 
{ 
$("#fancy_outer",window.parent.document).hide(); 
$("#fancy_overlay",window.parent.document).hide(); 
//window.top.window.$.fancybox.close(); this also does not work :(
}

你可以聲明和iframe中的內容中使用的功能close_window。。

來源

2010-08-10 06:54:49

我不得不這樣做：

window.top.window $ fancybox.close（）;

之前出現類型錯誤。

來源

2011-05-09 21:59:49 TOBlender

parent.fancybox.close（）的任何變體都不適合我，必須是一些lib衝突。

這裏是我最新的fancybox的工作解決方法，你應該使用css顯示屬性而不是.hide（）方法，因爲在這種情況下fancybox不會再次打開。

parent.jQuery('#fancybox-overlay').css('display', 'none'); 
parent.jQuery('#fancybox-wrap').css('display', 'none');

來源

2011-05-15 23:32:06 stasl

有史以來最好的黑客。謝謝！ – AimanB 2015-07-01 15:47:37

我的答案與wordpress無關，但一般用於fancybox。

在iframe

，如果你已經包括了主要的jQuery腳本（jQuery的1.5.2.min.js），那麼它會在主頁上的一個衝突，父。$。的fancybox不會在這種情況下工作。

其他與jquery相關的東西（例如：標籤）將在iframe中工作。因此，新手程序員不會發生iframe中的第二個jquery腳本是惡棍。

來源

2011-09-02 00:56:19

這是非常有用的信息。 – dangermark 2011-12-02 03:17:04

我有同樣的問題，並注意到我沒有使用

type:'iframe'

當調用的fancybox，它解決了我的問題

來源

2012-01-20 07:53:08

FancyBox iframe返回父項。$ as undefined（using WordPress）

回答

相關問題