经常看新闻网页的读者一定知道,很多时候我们单击一个链接打开新闻时,都会在一个新窗口中打开新闻的详细页面。用技术一点的术语来说,就是在新窗口中打开用户操作的链接。使用HTML中a标签的target="_blank"属性可以在新窗口打开链接,而在目前流行的jQuery框架下,此功能还可以有几种不同的形式来实现。本例效果如图1.17所示。
图1.17 在新窗口中打开链接的演示效果
本例主要代码如下:
本例代码分别演示了“在新窗口中打开链接”的几种方法,具体如下。
(1)第1种方法,见代码第04行,使用jQuery框架的.attr()函数。
jQuery框架属性操作attr()函数用于设置或返回被选择元素的属性值,根据该函数不同的参数,其工作方式也有所差异,其语法形式如下:
(2)第2种方法,见代码第05~07行,通过给链接指定rel=ext属性,自动在新窗口中打开链接,具体代码分析如下:
● $('a[rel=ext]').click()函数用于获取HTML文档中定义的rel属性值为ext的<a>元素,然后相应click单击事件并完成后续处理。
● $(this).attr()函数通过设定target属性值为'_blank'来实现在新窗口中打开链接,此处与上面第1种方法相同。
(3)第3种方法,见代码第10~11行。window.open()函数用于打开一个新的浏览器窗口或查找一个已命名的窗口,其语法如下:
其中URL参数声明了要在新窗口中显示的文档链接地址;name参数声明新窗口的名称;features参数声明新窗口要显示的标准浏览器的特征;最后replace参数定义为一个布尔值,用于判断装载到窗口的URL是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。
设计人员需要注意以下两点:
● 在XHTML 1.0 Strict版本中并不支持target="_blank"属性,而使用jQuery框架可以很好地解决这个问题。
● 设计编码时不要混淆函数window.open()与document.open(),这两者的功能完全不同。这里有个小技巧,为了使代码清晰明了,可以使用window.open()函数替代open()函数。