點擊一個鏈接，並有一個div更改顯示的PDF而無需轉到新頁面

目前，我有一個列有一些pdf名稱列。在下一列中，pdf已嵌入，因此將顯示給用戶。點擊一個鏈接，並有一個div更改顯示的PDF而無需轉到新頁面

我需要做到的是以下幾點：

當用戶在第一列中點擊一個文件名，第二列更改爲相應的PDF中的PDF文件。一直以來，它都沒有進入不同的頁面。所以唯一改變的是顯示的PDF。

這都是用HTML編碼的，我希望有人能幫助我解決這個問題。我不知道我是否需要使用JavaScript或任何東西。我無法在網絡上的任何位置找到解決方案。

任何幫助，將不勝感激。

來源

2016-09-21 Samuel R. O' Day

顯示代碼中的src ... html .... – poashoas

使用jQuery UI（對話），該功能

<script type="text/javascript"> 
$(function() { 
    var fileName = "Sample.pdf"; 
    $("#btnShow").click(function() { 
     $("#dialog").dialog({ 
      modal: true, 
      title: fileName, 
      width: 540, 
      height: 450, 
      buttons: { 
       Close: function() { 
        $(this).dialog('close'); 
       } 
      }, 
      open: function() { 
       var object = "<object data=\"{FileName}\" type=\"application/pdf\" width=\"500px\" height=\"300px\">"; 
       object += "If you are unable to view file, you can download from <a href = \"{FileName}\">here</a>"; 
       object += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file."; 
       object += "</object>"; 
       object = object.replace(/{FileName}/g, "Files/" + fileName); 
       $("#dialog").html(object); 
      } 
     }); 
    }); 
}); 
</script> 
<input id="btnShow" type="button" value="Show PDF" /> 
<div id="dialog" style="display: none"> 
</div>

來源

2016-09-21 19:42:51

至於我可以告訴...把iframe在第二列，並設置與JavaScript

var myFrame = document.querySelector('#myIframe'); 

document.querySelector('a.mylink').addEventListener('click', function(e) { 
    e.preventDefault(); 

    myFrame.src = this.getAttribute('href'); // full public url 

}

來源

2016-09-21 19:49:05 poashoas

點擊一個鏈接，並有一個div更改顯示的PDF而無需轉到新頁面

回答

相關問題