Fancybox未打開PDF錯誤未捕獲ReferenceError：沒有定義href

我在這個網頁上發現了一些非常有趣的關於如何在Fancybox iframe中打開PDF的代碼，但是我想在我通過PHP生成的CSS菜單中使用，以及未捕獲的ReferenceError：通過谷歌控制檯得到這個消息href是沒有定義Fancybox未打開PDF錯誤未捕獲ReferenceError：沒有定義href

這裏是我的PHP代碼：

echo "<li class ='pdf' ><a href='http://assets/newsletters/temp/".$myissue."' > Issue# ".$filename."</a></li> ";

而且在我的fancybox有下面的代碼：

<script type="application/javascript"> 
    $(document).ready(function() { 
$(".pdf").click(function() { 
    $.fancybox({ 
    type : 'iframe', 
    width: 800, 
    height: 1000, 
    fitToView : true, 
    autoSize : false, 
    href: this.href, 
    content : '<embed src="' + href + '#nameddest=self&page=1&view=FitH,0&zoom=75,0,0" type="application/pdf" height="99%" width="100%" />', 
    'onClosed': function() { 
    $("#fancybox-inner").empty(); 
    } 
    }); 
    return false; 
}); // pdf 
}); // ready 

</script>

我需要幫助，所以我可以加載一個不同的PDF everythime我做點擊。

UPDATE 所以我改變了我想看到的文件的內容，它的工作原理。所以，我的問題仍然動態HREF，我不知道如何通過它的fancybox

content : '<embed src="http://assets/newsletters/temp/Newsletter_1.pdf" type="application/pdf" height="99%" width="100%" />',

來源

2013-05-07 NinjaCoder

您是否嘗試過申請的fancybox直接傳遞給元素，而不是在jQuery的「click」事件中。（...。。。。。。。。。。。。。。。。。。。。。。''''。''''。'''' – timstermatic 2013-05-07 17:54:11

是的，我有，我有一個測試鏈接，它不會在Fancybox上打開，它會進入一個新窗口，全屏幕，當我看着調試控制檯我得到相同的消息 – NinjaCoder 2013-05-07 17:59:17

嗯，你要麼使用href API選項或content選項。

在上面代碼中，你已經設置了href但後來content選項覆蓋它....我猜，你認爲這樣做href: this.href，你實際上是設置的href作爲變量的值，然後傳遞到content聲明，但這不是它的工作方式，對不起。

此外，您正混合v1.3.x和v2.x的選項，這些選項是不兼容的。

我想你不應該過度複雜的事情，只是做：

$(document).ready(function() { 
    $(".pdf").fancybox({ 
     type: 'iframe', 
     width: 800, 
     height: 1000, 
     fitToView: false, // false will display the exact size you set above 
     autoSize: false 
     // you don't need the following : 
     // href: this.href, 
     // content : '<embed src="' + href + '#nameddest=self&page=1&view=FitH,0&zoom=75,0,0" type="application/pdf" height="99%" width="100%" />', 
     // onClosed is for v1.3.x and doesn't work with v2.x 
     //'onClosed': function() { 
     //$("#fancybox-inner").empty(); 
     //} 
    }); 
}); // ready

見JSFIDDLE

來源

2013-05-07 20:03:44 JFK

即時通訊使用Fancybox 2.14，以及內容如何進入fancybox窗口？ – NinjaCoder 2013-05-07 20:32:16

@Nick：內容來自超鏈接中的'href'，這是一個PDF文件，不是嗎？ – JFK 2013-05-07 22:18:00

是的，但是當我測試時我沒有工作，發出消息說無法顯示內容，我在這裏錯過了什麼嗎？ – NinjaCoder 2013-05-07 22:26:52

所以，我找到了答案，我的最後一個問題這個環節由JFK上： https://github.com/fancyapps/fancyBox/issues/579 它解決了Chrome/IE頭部問題。

而我最終的fancybox代碼如下所示：

$(document).ready(function() { 
    $(".pdf").fancybox({ 
     type: 'iframe', 
     width: 800, 
     height: 1000, 
     fitToView: false, 
     autoSize: false, 
     iframe : { 
     preload: false 
    } 
    }); 
}); // ready

而且我做了我的PHP代碼的一些調整以及：

echo "<li><a class ='pdf' href='http://assets/newsletters/temp/".$myissue."' > Issue# ".$filename."</a></li> ";

感謝@JFK

來源

2013-05-08 13:20:33 NinjaCoder

回答

相關問題