2014-05-15 24 views
-1

我試圖讓我的鏈接在currmenu div中執行以下操作。我需要他們更改JavaScript中URL的值。然後讓該腳本將新頁面加載到pdf格式中。使用超鏈接更改URL的javascript值

我鏈接的所有文件都是內部公司內部網。我必須使用預先存在的網站並添加此新功能。任何和所有的幫助將不勝感激。

<link href="css/pdf.css" rel="stylesheet" type="text/css"> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript"></script> 
<script type="text/javascript" src="js/pdfobject.js"></script> 
<script type="text/javascript"> 

window.onload = function(){ 

    var msg; 
    var s = document.getElementById("statement"); 
    var params = { 

     url: "Docs/6-Week Calendar.pdf", 

     pdfOpenParams: { 

      navpanes: 0, 
      toolbar: 0, 
      statusbar: 0, 
      view: "FitV" 

     } 

    }; 

    var myPDF = new PDFObject(params).embed("pdf"); 

    if(myPDF){ 
     msg = "The PDF was successfully embedded!"; 
     s.className = "success"; 
    } else { 
     msg = "It appears the embed didn't work."; 
     s.className = "fail"; 
    } 
      s.innerHTML = msg; 
    }; 
</script> 

</head> 
<body> 
    <div class="currmenulist"> 
    <li><a href="Docs/New Employee onboarding curriculum.pdf">Link 1</a></li> 
          <li><a href="">Link 2</a></li> 
          <li><a href="">Link 3</a></li> 
          <li><a href="">Link 4</a></li> 

</div> 
<div id="pdf">It appears you don't have Adobe Reader or PDF support in this web 
browser. <a href="Docs/6-Week Calendar.pdf">Click here to download the PDF</a></div> <p 
id="statement"> </p> 

</body> 
+0

工作,爲什麼它標記jQuery的? – Jai

+0

我會認爲它是標記jQuery,因爲他有可用的。我發佈的答案使用jQuery並解決了這個問題。 – aecend

回答

0

該代碼會爲你

window.onload = function() { 

    var params = { 
     url: "Docs/6-Week Calendar.pdf", 
     pdfOpenParams: { 
      navpanes: 0, 
      toolbar: 0, 
      statusbar: 0, 
      view: "FitV" 
     } 
     }, 
     s = document.getElementById("statement"); 

    function loadPDF() { 
     var msg, 
      myPDF = new PDFObject(params).embed("pdf"); 

     if (myPDF) { 
     msg = "The PDF was successfully embedded!"; 
     s.className = "success"; 
     } 
     else { 
     msg = "It appears the embed didn't work."; 
     s.className = "fail"; 
     } 
     s.innerHTML = msg; 
    } 

    var linklist = document.getElementsByClassName('currmenulist')[0], 
     pdfLinks = linklist.getElementsByTagName('a'); 

    for (var k = 0; k < pdfLinks.length; k++) { 

     //here you can add validation, i.e, if href ends with .pdf etc 
     if (pdfLinks[k].getAttribute('href') == '' || pdfLinks[k].getAttribute('href') == '#') 
     continue; 

     pdfLinks[k].addEventListener('click', function (ev) { 
     ev.preventDefault(); 

     params.url = ev.target.getAttribute('href'); 
     loadPDF(); 
     }); 
    } 

    loadPDF(); 
}; 
+0

非常感謝。它像魅力一樣工作。我希望你有一個美好的一天。 – Wilsons

0

這應該是你所需要的:

var msg; 
var s = document.getElementById("statement"); 
var params = { 
    url: "Docs/6-Week Calendar.pdf", 
    pdfOpenParams: { 
     navpanes: 0, 
     toolbar: 0, 
     statusbar: 0, 
     view: "FitV" 
    } 
}; 

window.onload = function(){ 
    var myPDF = new PDFObject(params).embed("pdf"); 

    if(myPDF){ 
     msg = "The PDF was successfully embedded!"; 
     s.className = "success"; 
    } else { 
     msg = "It appears the embed didn't work."; 
     s.className = "fail"; 
    } 
    s.innerHTML = msg; 
}; 

$(".currmenulist a").on("click", function(e){ 
    e.preventDefault(); 
    params.url = $(this).attr("href"); 

    var myPDF = new PDFObject(params).embed("pdf"); 

    if(myPDF){ 
     msg = "The PDF was successfully embedded!"; 
     s.className = "success"; 
    } else { 
     msg = "It appears the embed didn't work."; 
     s.className = "fail"; 
    } 
    s.innerHTML = msg; 
}); 
+0

如果您將鏈接的href屬性設置爲您需要加載的PDF,這將阻止頁面導航並將PDF加載到div中。 – aecend

+0

我覺得這很愚蠢,但是如何將href屬性設置爲PDF?我試過以下 Link 1 謝謝你的快速回復。 – Wilsons

+0

'Link 2' – aecend