Question

在我的项目中，我有一个侧边菜单（左）。菜单中每个按钮的OnClick pdf应该加载到我的页面中间（即div）。我可以在我的中间加载pdf页面（div），但不是点击我的菜单按钮。不应该在我的项目中使用iframes。请帮助我

这是我的代码（示例代码）点击pdf应该在div class =“col-sm-9 col-md-10”中加载的菜单项

<div class="col-sm-3 col-md-2 sidebar">

 <ul class="nav nav-sidebar">
                <li style="padding-left:1em;"><h4>MENU</h4></li>
                <li class="active"><a href="shows.aspx" class="user-icon">TV Shows</a></li>
                <li><a href="history.aspx" class="sub-icon">History</a></li>
                <li><a href="#" class="menu1">Movies</a></li>
                <li><a href="#" class="menu">Sports</a></li>
                <li><a href="shows.aspx" class="user-icon">TV Shows</a></li>

<div class="col-sm-9 col-md-10">

Answer 1

您最有可能使用<object> tag。您可能必须使用javascript对其进行标记并重新构建。

如果不知道你的项目是如何布局的，我真的无法提供更多细节。

这是一个更加充实的stackoverflow answer

Answer 2

$(document).ready(function() {
    $("a[href$='.pdf']").each(function(){
        $(this).attr('href', 'http://docs.google.com/viewer?embedded=true&url=' + $(this).attr('href'));
    });

    $("a[href$='.doc']").each(function(){
        $(this).attr('href', 'http://docs.google.com/viewer?embedded=true&url=' + $(this).attr('href'));
    });

});

$(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    iframe : {
        preload: false
    }
});

<a class="fancybox" data-fancybox-type="iframe" href="http://www.irs.gov/pub/irs-pdf/fw4.pdf">Test PDF</a>

<a class="fancybox" data-fancybox-type="iframe" href="www.snee.com/xml/xslt/sample.doc">Test Doc</a>

Answer 3

你的div应该嵌入了对象标签，即

<div class="col-sm-9 col-md-10"> <object data="#" type="application/pdf" width="100%" height="750"> alt : pdf not loaded yet </object> </div>

然后在菜单上单击后，您可以更改数据=＆＃34;＆＃34;在特定pdf源的对象标签中，即

$(".menu, .menu1").on("click", function(){
    $("object").attr('data', 'your-pdf.pdf');
 });

您可以在上面的脚本开始的菜单上决定您想要显示PDF格式的逻辑。

点击菜单在<div>中打开pdf

3 个答案: