在带有JavaScript的新窗口中打开 pdf

分享于 

8分钟阅读

Web开发

  繁體 雙語

介绍

在新窗口中打开pdf等文档时,应该使用 JavaScript 自动 ,原因如下:

  • 当打开PDF时,用户将经常关闭网络浏览器,错误地认为文档已经在Adobe阅读器中打开
  • 以前用来打开新窗口 target的属性已经从 HTML 4.01严格规范中删除( 现在已经废弃了)
  • 打开一个新窗口是一个行为,应该将它的移动到行为层( )。

当网站的内容被管理时,使用JavaScript也会特别有用。 而不必依靠站点编辑器记住在新窗口中打开PDF链接,这个过程由一个简单的JavaScript函数处理。

JavaScript

因此,你可以看到我们的目标,查看这个的完整功能示例。

注册事件

第一个任务是创建在页面加载时发生的事件。 使用函数调用来执行函数调用 <body onload="callfunction()"> 在HTML页面中,我们将使用Willison的Simon addLoadEvent(func)。 这将允许我们在页面加载后添加函数调用。

我们将在. js 文件(。所有后续代码都应该在这里函数之前输入,这样 addLoadEvent 才是最后一个) 中键入以下 JavaScript:

function addLoadEvent(func)
{
 var oldonload = window.onload;
 if (typeof window.onload!= 'function')
 {
 window.onload = func;
 } else {
 window.onload = function()
 {
 oldonload();
 func();
 }
 }
}
addLoadEvent(fNewPDFWindows); 

函数 fNewPDFWindows()

我们将在名为 fNewPDFWindows的JavaScript文件中创建一个空函数。 为了避免脚本中出现任何JavaScript错误,我们还检查命令 getElementsByTagName 是否可用:

function fNewPDFWindows ()
{
 if (!document.getElementsByTagName) returnfalse;
} 

第二个任务是创建页面中任何链接的HTML对象 Collection。 下面的行获取页面中的所有链接:

var links = document.getElementsByTagName("a"); 

在检查后插入此行,查看 getElementsByTagName 对象方法是否存在,如下所示:

function fNewPDFWindows ()
{
 if (!document.getElementsByTagName) returnfalse;
 var links = document.getElementsByTagName("a");
} 

下一个任务是遍历所有链接,并检查是否要打开一个新窗口中的任何链接。 如果链接是一个PDF文档,那么我们将在一个新窗口中打开它。

通过链接循环

首先,创建遍历页面中所有链接的循环,如下所示:

function fNewPDFWindows ()
{
 if (!document.getElementsByTagName) returnfalse;
 var links = document.getElementsByTagName("a");
 for (var eleLink=0; eleLink <links.length; eleLink ++) {
 }
} 

indexOf 方法

接下来我们需要确定我们是否循环通过链接,链接是否是PDF文档或者不是。 indexOf 方法是理想的方法,它返回搜索值( 搜索值在字符串中的位置)的索引。 indexOf 方法需要搜索值,但还可以指定从字符串( 在本例中,我们不需要传递这个参数) 中开始搜索的位置:

所以传递 indexOf 方法的字符串". pdf"来查明链接的文件是否为PDF文档。 如果未找到字符串或者匹配文本的索引,indexOf方法返回 -1.

function fNewPDFWindows ()
{
 if (!document.getElementsByTagName) returnfalse;
 var links = document.getElementsByTagName("a");
 for (var eleLink=0; eleLink <links.length; eleLink ++) {
 if (links[eleLink].href.indexOf('.pdf')!== -1) {
 }
 }
} 

onclick 函数

接下来我们需要对每个到PDF文档的链接应用一个 onclick 事件,所以当它们被单击时打开:

links[eleLink].onclick =
 function() {
 } 

首先,让我们打开新窗口,并给窗口一些参数。 我们将要传递的参数如下所示。

  • URL - 要在新窗口中显示的文档
  • spec - 一个逗号分隔的窗口属性列表,如滚动条等

有关 Windows 属性的全面列表,请查看 W3C的DOM方法页

本示例中完成的函数如下所示。 这将在一个带有滚动条的新窗口中打开链接地址:

links[eleLink].onclick =
 function() {
 window.open(this.href,'resizable,scrollbars');
 returnfalse;
 } 

在检测PDF文档是否已经找到的if 语句中插入 onclick 事件:

function fNewPDFWindows ()
{
 if (!document.getElementsByTagName) returnfalse;
 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');
 returnfalse;
 }
 }
 }
} 

警告用户文档在新窗口中打开

final 任务是为了确保用户知道链接将在新窗口中打开。 我们需要尽可以能清晰地使用这种方法来最小化混淆。

我们将首先修改链接的标题文本,然后再用"( 在新窗口中打开)的备用文本插入一个图像。 链接标题可以按如下方式设置:

links[eleLink].title += "n(opens in a new window)"; 

接下来我们将创建一个图像元素,并设置它为 srcalt 属性。 finally 我们将使用 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); 

final 函数如下所示:

function fNewPDFWindows ()
{
 if (!document.getElementsByTagName) returnfalse;
 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');
 returnfalse;
 }
 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);
 }
 }
} 

结束语

这个简短的函数演示了在新 Windows 中自动打开链接是多么容易。 这意味着你的站点更可能验证,更可能在未来的浏览器中正常工作,并且更适合用户使用。 查看这个的完全功能示例。


JAVA  Javascript  Window  PDF