在新窗口中打开PDF
在新窗口中打開PDF
原帖地址：http://www.codeproject.com/jscript/pdf-javascript.asp
我認為在新窗口重打開一個類似PDF的文檔應該使用腳本自動完成，理由如下：
- 在一個PDF文檔打開時用戶經常想關閉瀏覽器，因為他們誤以為文檔是在Adobe Reader?中打開的。
- 以前使用的打開新窗口的屬性“target”已經從HTML 4.01 的規范中移除。
- 打開新窗口是一種行為應該移到 行為層 。
?管理一個網站的內容，使用javascritp是十分有效的。在一個新窗口中打開PDF鏈接的處理過程由一個簡單的javascript函數來處理，勝過必須依靠一個網站編輯記得設置鏈接新開窗口。
?
?
JavaScript
?現在你明白我們的目標了吧，點這個理查看完整的函數示例 。
?
注冊一個事件
?首要的任務是在頁面載入的時候創建一個事件。比在Html頁面里面使用<body οnlοad="callfunction()"> 來執行一個函數更好的做法是使用 Simon Willison's
的addLoadEvent函數。它允許我們在頁面載入的時候只加載一次函數。
?
?我們將把下面這些代碼保存到一個.js文件中。（所有后面的代碼應該在下面代碼之前，addLoadEvent 是在最后）。
?function addLoadEvent(func)
{
? var oldonload = window.onload;
? if (typeof window.onload != 'function')
? {
??? window.onload = func;
? } else {
??? window.onload = function()
??? {
????? oldonload();
????? func();
??? }
? }
}
addLoadEvent(fNewPDFWindows);
函數fNewPDFWindows()
我們會在js文件中創建一個名為fNewPDFWindows的空函數。為了避免腳本錯誤，我們因該檢查下getElementsByTagName 命令是否可以執行。
function fNewPDFWindows ()
{
? if (!document.getElementsByTagName) return false;
}
第二個任務是獲取頁面內所有a標簽的集合。下面的代碼就是獲取頁面所有的鏈接。
var links = document.getElementsByTagName("a"); 接下來的任務是循環所有的a鏈接檢查是否需要在新窗口中打開。如果鏈接是個PDF文檔那么就在新窗口中打開。?循環所有的鏈接
首先循環頁面內所有的鏈接，如下
?function fNewPDFWindows ()
{
? if (!document.getElementsByTagName) return false;
? var links = document.getElementsByTagName("a");
? for (var eleLink=0; eleLink < links.length; eleLink ++) {
? }
}
?
?indexOf? 方法
?接著我們需要通過循環來判斷一個鏈接是否是PDF鏈接。通過返回查詢字符串的索引（查詢字符串在被查詢字符串中位置），indexOf可以很好的完成我們的任務。
?indexOf需要一個查詢值當然你也可以具體指定從字符串的什么位置開始查詢（本例里我們不需要傳遞這個參數給indexOf）.
所以我們可以通過傳遞字符串“.pdf”給indexOf方法來確定一個鏈接是否指向一個PDF方法。indexOf 將返回-1或者查詢到字符串在原字符串中的索引。
?function fNewPDFWindows ()
{
? if (!document.getElementsByTagName) return false;
? var links = document.getElementsByTagName("a");
? for (var eleLink=0; eleLink < links.length; eleLink ++) {
??? if (links[eleLink].href.indexOf('.pdf') !== -1) {
??? }
? }
}
?
onlclick 函數
?對于每個指向pdf文但的鏈接我們需要實現一個onclick事件，那么當他們點擊的時候就會彈出一個新窗口了。
links[eleLink].onclick =
? function() {
? }
首先，讓我們打開一個新窗口，傳遞參數給它。要傳遞的參數如下:
* Url -我們現在新窗口顯示的文檔
* Specs -一個用逗號分割的字符串比如說滾動條之類的。
想詳細的窗口屬性列表可以參看w3c機構 的公開方法頁面
本例子中最后完成部分如下。將會在一個新窗口中打開一個帶滾動條的可托動的窗口
links[eleLink].onclick =
? function() {
??? window.open(this.href,'resizable,scrollbars');
??? return false;
? }
我們把onclick事件插入在if語句中來判斷時候打開了一個pdf文檔
function fNewPDFWindows ()
{
? if (!document.getElementsByTagName) return false;
? var links = document.getElementsByTagName("a");
? for (var eleLink=0; eleLink < links.length; eleLink ++) {
??? if (links[eleLink].href.indexOf('.pdf') !== -1) {
????? links[eleLink].onclick =
??????? function() {
????????? window.open(this.href,'resizable,scrollbars');
????????? return false;
??????? }
??? }
? }
}
警告讀者文檔在新窗口中打開
最后的任務是確認用戶明白鏈接是在新窗口中打開的。我們應該盡可能清楚去避免這樣的混淆。
我們打算這樣做首先修正鏈接的標題，接著插入一個帶有交替出現文字“(opens in a new window)”圖片標記
鏈接標題設置如下：
接著 我們創建一個圖片元素，設置它的src和alt屬性。最后我們用appendChild方法把圖片追加到鏈接之后。
var img = document.createElement("img");
img.setAttribute("src", "i/new-win-icon.gif");
img.setAttribute("alt", "(opens in a new window)");
links[eleLink].appendChild(img);
最終的函數如下：
?function fNewPDFWindows ()
{
? if (!document.getElementsByTagName) return false;
? var links = document.getElementsByTagName("a");
? for (var eleLink=0; eleLink < links.length; eleLink ++) {
??? if (links[eleLink].href.indexOf('.pdf') !== -1) {
????? links[eleLink].onclick =
??????? function() {
????????? window.open(this.href,'resizable,scrollbars');
????????? return false;
??????? }
????? var img = document.createElement("img");
????? img.setAttribute("src", "i/new-win-icon.gif");
????? img.setAttribute("alt", "(opens in a new window)");
????? links[eleLink].appendChild(img);
??? }
? }
}
結論
??? 個非常短的函數證明了在新窗口中打開一個鏈接是多么的容易。這也意味著你們的網站
將會更好用，在將來的瀏覽器中工作得更好，對于用戶來說是很好用
點這里察看整個例子.
關于作者
?Trenton Moss
??? Trenton Moss 對于web的可用性和易用性很狂熱。如此的狂熱以至于他已經開始他自己的web可用性和易用性顧問工作???
?他十分擅長于引導卡片分連和真得十分享受易用性的審查。
?
總結
以上是生活随笔為你收集整理的在新窗口中打开PDF的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 时尚外观颜值高，性能不输大牌，五款平价蓝
- 下一篇： 中国航天日，主题是“格物致知，叩问苍穹”