使用Jquery的模态PDF IFRAME

您需要查看提供源URL的.load函数。 您需要做的就是找出一种方法将源保存为变量并将其修补到加载函数中。 如果你点击缩略图然后：那么每当点击.pdf时，首先保存src：var src = $（this）.parent（’a’）。attr（’src’）; 然后你可以使用.load并使用src变量来定位iframe。 在查看.load的API文档时，它应该变得非常清楚。 关于将ifs加载到iframe中的一些事项：iframe用于外部html文档，而object标签用于外部文件，如flash，PDF，video等。您可能希望查看object标记。

iframe很难设置任何error handling，因此如果您的PDF没有加载，显示错误可能非常困难。 有一些解决方法，但我没有看到它们是好的，他们主要依靠设置计时器来查看iframe是否已加载，并且一些sites / pdf可能需要很长时间才能加载导致错误。

由于浏览器需要插件，Pdfs很难处理。 那些没有安装PDF阅读器的用户呢，在这种情况下再也无法进行错误检查。

请参阅此处的示例http://jsfiddle.net/cornelas/4eUgf/4/ Iframe现在基于链接而不是显示加载页面的iframe的链接！

  $(document).ready(function() { $("a.select").live('click', function (e) { e.preventDefault(); var href = this.href; $("#manual").attr("src", href); }); $('.full').css({'opacity' : .7}); $('.select').click(function () { $('.pdf_grey').fadeIn('slow'); $('.full').fadeIn('slow'); $('.select').hide(); $('.deselect').show(); }); $('.deselect').click(function() { $('.pdf_grey').fadeOut('slow'); $('.full').fadeOut('slow'); $('.select').show(); $('.deselect').hide(); }); }); $(document).mouseup(function (e) { var container = $(".pdf_grey"); var bkg = $(".full"); var deselect = $(".deselect"); var select = $(".select"); if (container.has(e.target).length === 0) { container.hide(); deselect.hide(); select.show(); bkg.hide(); } }); 
 
 
Close

  
 
 
 
 
Site Manual
PreviewMinimize | Download
 
 
 
Site Manual
PreviewMinimize | Download 
 
 
 
 body { padding:0px; margin: 0px; } .full { background: #000; width: 100%; height: 100%; position: absolute; z-index: 5; display: none; } .red { background: red; width: 10%; height: 25%; } .pdf_grey { position: absolute; left: 25%; top: 15%; display: none; padding: 25px; background: #333; } .deselect { display: none; cursor: pointer; } .select { cursor: pointer; color: #666; } .select:hover { color: red; }