touchpdf：同一个文件被打开网址不同

Question

我有DIV是当用户点击使用AJAX

，这是我的内容

function getHref(event,elem){ 
 
    \t event=event || window.event; 
 
    \t $.Event(event).preventDefault();  \t 
 
    \t $('body').on('click','a.view-pdf', function(){  
 
    \t \t var href=$(this).attr('href'); 
 
    \t \t //alert(href); 
 
    \t \t openNav(href); 
 
    \t });           \t  \t 
 
    \t document.getElementById("myNav").style.width = "100%";  \t \t   \t \t  \t 
 
    } 
 
    function openNav(href) { 
 
    \t $("#myNav").pdf({ 
 
    \t \t source: href, 
 
    \t }); 
 
    \t cross ='<a href="javascript:void(0)" class="closebtn" onclick=closeNav()>&times;</a>'; 
 
     \t $(".overlay").append(cross); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
 
    <div class="image-div-conents"> 
 
    <h3 class="circle">MB</h3><div style="float:left" class="doc-name-date"> 
 
    <span class="bill-name">Tt</span> 
 
    <span class="bill-date">26 Feb, 2017 8:42 PM</span> 
 
    </div> 
 
</div> 
 
<a style="text-decoration:none" onclick="getHref(event,this);" class="view-pdf" href="http://link.com-A43713_20170226203413_1.pdf"> 
 
    <img class="img-responsive" src="http://link.com-A43713_20170226203509_6.jpg" alt="No Image" onerror="this.onerror=null;this.src=" text.png"="" ;"=""> 
 
    <div class="validitity"> 
 
    <span>Validitity:01 Mar, 2018 11:57 AM</span> 
 
    </div> 
 
</a>

页面加载后动态添加其内容图像覆盖屏幕将打开，PDF文件将打开时，调试我发现我得到不同的值，但仍然相同的PDF文件打开覆盖屏幕上。

Answer 1

tl; dr不重复使用同一个DOM节点，动态创建一个。

出于某种原因，touchpdf（该库）不允许重复使用相同的标记（最佳猜测）。

HTML

<div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <div class="image-div-conents"> 
    <h3 class="circle">MB</h3><div style="float:left" class="doc-name-date"> 
    <span class="bill-name">Tt</span> 
    <span class="bill-date">26 Feb, 2017 8:42 PM</span> 
    </div> 
</div> 
<a style="text-decoration:none" class="view-pdf" href="http://link.com-A43713_20170226203413_1.pdf"> 
    <img class="img-responsive" src="http://link.com-A43713_20170226203509_6.jpg" alt="No Image" onerror="this.src=text.png"> 
    <div class="validitity"> 
    <span>Validitity:01 Mar, 2018 11:57 AM</span> 
    </div> 
</a> 

<!-- Add this to the main page, where you want to show the PDF --> 
<div id="overlay"></div> 

的JavaScript

function attachCloseBtn(){ 
    $("#overlay").prepend('<a href="javascript:void(0)" style="float: right;" class="closebtn" onclick=closeNav()>&times;</a>'); 
} 

function cleanUp(){ 
    $("#overlay").empty(); 
} 

function getFileName(pdfURI){ 
    if (typeof pdfURI === "string") 
    return pdfURI.split("/").reverse()[0].split(".")[0] 
    else 
    throw new TypeError("provide a URI!"); 
} 

window.closeNav function(){ 
    $("#overlay").empty().hide(); 
} 

$('body').on('click','a.view-pdf', function(e){ 
    e.preventDefault(); 
    openNav(e.currentTarget.href); 
});  

function openNav(pdfURI) { 
    // cleaning up first 
    cleanUp(); 

    // preparing dom environment 
    var fileName = getFileName(pdfURI); 
    attachCloseBtn(); 
    $("#overlay").append('<div id="'+fileName+'"></div>'); // <-- placeholder for PDF file 

    // opening pdf 
    $("#"+fileName).pdf({ // <-- do not forget # for the id! 
    source: pdfURI 
    }); 
    $("#overlay").show(); 
} 

老答案

我猜你从event=event || window.event;

越来越副作用

为什么不直接使用jQuery事件？我编辑了您的HTML标记，并删除了onclick和onerror事件侦听器。 见this fiddle

HTML：

<a style="text-decoration:none" class="view-pdf" href="http://link.com-A43713_20170226203413_1.pdf"> 

的JavaScript：

$('body').on('click','a.view-pdf', function(e){  
    e.preventDefault(); 
    var href = e.currentTarget.href; 
    openNav(href); 
});               
function openNav(href) { 
    // added for debug 
    $("#output").append(href); 
}