在新窗口中打开PDF
在新窗口中打开PDF
原帖地址：http://www.codeproject.com/jscript/pdf-javascript.asp
我认为在新窗口重打开一个类似PDF的文档应该使用脚本自动完成，理由如下：
-
在一个PDF文档打开时用户经常想关闭浏览器，因为他们误以为文档是在Adobe Reader 中打开的。
-
以前使用的打开新窗口的属性“target”已经从HTML 4.01 的规范中移除。
-
打开新窗口是一种行为应该移到 行为层 。
管理一个网站的内容，使用javascritp是十分有效的。在一个新窗口中打开PDF链接的处理过程由一个简单的javascript函数来处理，胜过必须依靠一个网站编辑记得设置链接新开窗口。
JavaScript
现在你明白我们的目标了吧，点这个理查看完整的函数示例 。
注册一个事件
首要的任务是在页面载入的时候创建一个事件。比在Html页面里面使用<body onload="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可用性和易用性顾问工作
他十分擅长于引导卡片分连和真得十分享受易用性的审查。