Question

我有两个html页面，＆＃34; page1.html＆＃34;和＆＃34; page2.html＆＃34;。

page1.html包含一个css菜单列表，该列表将链接到page2.html。部分示例代码如下：

 <div class="menu"> 

 <ul>   
     <li><a href="page1.html">page1</a></li>
     <li><a href="page2.html">page2</a>
     <ul>
        <li><a href="page2.html" onclick="displaypdf1();" >pdf1</a></li>
    <li><a href="page2.html" onclick ="displaypdf2();">pdf2</a></li>

点击其中一个链接时，＆＃34; page2.html＆＃34;中的标记。但是我无法做到这一点。它没有正确加载PDF。 displaypdf1（）javascript函数如下：

function display_cover(){
    var myPDF = new PDFObject({ 
url: 'Cover.pdf',
pdfOpenParams: { 
view: 'FitB', 
viewrect: 
'0,0,1000,900',
pagemode: 'none', 
scrollbars: '1', 
toolbar: '1', 
statusbar: '1', 
messages: '1', 
navpanes: '1' }
    }).embed('pdf_display'); 
}

我使用pdfObject打开pdf。简而言之，我希望通过page1.html css menu打开一个pdf文件.PDF然后将显示在page2.html的标签中我该如何实现？谢谢！

Answer 1

您可以使用ajax执行此操作，如下所示：

Page 1 HTML

<style>  
     .wrapper {background-color: #cdcdcd; width: 100%; height: 700px }
     object {margin: 0; padding: 0; height: 100%; width: 100%; }
     #target { width: 600px; height: 650px; }
     input { position:relative; left:20px; }
 </style> 

 <body>
    <div class="wrapper">
      <input type="button" value="Go">
      <div id="target"></div>
    </div>
 </body>

按钮是触发器。它可以使用导航菜单中的ref或甚至列表项触发。
id目标也可以放在任何页面中。我做了它，以便它显示在同一页面，但你可以随意更改它。

Page 1 JS / JQUERY

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script type="text/javascript">
       jQuery(function($){
            $('input').click(function(){
                 $('#target').load('page2.html');
                 });
            });
   </script>

希望这对你有用

HTML 这是一个对象元素中的PDF，它将作为页面内部的外部页面加载而不刷新页面，如果您选择，则在另一个页面中加载。

    <object data="https://bitcoin.org/bitcoin.pdf" type="application/pdf" width="50%" height="700px">
         alt : <a href="https://bitcoin.org/bitcoin.pdf">page2.pdf</a>
    </object>

Answer 2

我尝试了你的建议，它在互联网资源管理器上非常有效，但不是Chrome。 .load出了点问题。页面显示为空白。基于你给出的概念，我设法解决了我的问题！

JS / JQUERY

//script for display Cover.pdf
$(document).ready(function(){

$('#input').click(function(){   
    document.getElementById('project_details').innerHTML = 
    '<object type="application/pdf" data="pdf1.pdf" width=1000px height="810px" >  
    </object>'
    });
});

我根据您的想法使用上面的JS创建了一个示例，它可以工作。希望这对其他人有用。谢谢你的莲花。

在另一页</div>中的<div>中打开pdf

2 个答案: