打开pdf <DIV>在另一页找到

Open pdf in <DIV> found in another page

本文关键字：一页 DIV pdf 打开      更新时间：2023-09-26

我有两个html页面，"page1.html"answers"page2.html"。

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>

当点击其中一个链接时，标签在"page2.html"。然而，我无法做到这一点。它不能正确加载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。简而言之，我希望打开一个pdf文件通过page1.html css菜单。pdf将显示在page2.html的标签，我怎么能做到这一点?谢谢你！

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

按钮是触发器。它可以用一个引用来触发，甚至可以用导航菜单中的一个列表项来触发。
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>

希望这对你有用

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

我尝试了你的建议，它在internet explorer上工作得很好，但不是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上面的例子，它的工作原理。希望这对其他人有用。谢谢lotusms。

相关文章：