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

i found some really interesting code on this web on how to open a PDF inside Fancybox iframe, but I want to use inside a CSS Menu that I generated through PHP, and get this message through Google Console: Uncaught ReferenceError: href is not defined

Here's my php code:

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

And in the Fancybox i have the following code:

<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>

I need help so I can load a different PDF everythime I make a click.

UPDATE So I changed the content with the file I want to see, and it works. So my problem still being the dynamic Href that I dont know how to pass it to fancybox

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

Well, you either use the href API option or the content option.

In your code above, you have set the href but later the content option overrides it.... I am guessing that you thought that by doing href: this.href, you were actually setting the value of href as variable and then passing it to the content statement but that is not the way it works, sorry.

Also, you are mixing options for v1.3.x and v2.x, which are incompatible.

I think you shouldn't over complicate things and simply do :

$(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

See JSFIDDLE

So I found the answer to my last problem on this link by JFK: https://github.com/fancyapps/fancyBox/issues/579 Which solves the Chrome/IE Header issue.

And my final fancybox code looks like this:

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

Also I made some adjustments on my php code as well:

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

Thanks @JFK