Question

我在网上找到了一些关于如何在Fancybox iframe中打开PDF的非常有趣的代码，但是我想在我通过PHP生成的CSS菜单中使用，并通过Google控制台获取此消息：未捕获的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。

更新所以我用我想看的文件改变了内容，并且它有效。所以我的问题仍然是动态Href，我不知道如何将它传递给fancybox

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

Answer 1

好吧，您可以使用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

Answer 2

所以我在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

Fancybox未打开PDF错误未捕获ReferenceError：未定义href

2 个答案: