php程序员的笔记

  • 网站首页
  • PHP笔记
    • 字符串处理
    • php函数总结
    • 正则表达式
    • 模板框架使用
    • 我的网站模板笔记
    • Ecshop二次开发笔记
    • php源码下载
  • 数据库教程
    • MySQL数据库
    • MongoDB
    • Access数据库
    • Redis
  • JavaScript教程
    • Jquery基础
    • Jquery特效
    • JS常用函数
    • 开源插件开发
    • 谷歌地图开发
  • HTML教程
    • DIV+CSS技术篇
    • 网站优化笔记
    • HTML5 技术
  • 操作系统技巧
    • windows 7系统篇
    • Linux操作系统篇
    • 服务器
  • 互联网资讯
    • 生活杂侃
php程序员的笔记 -> JavaScript教程 -> JS常用函数 -> href标签target=_blank属性的妙用

href标签target=_blank属性的妙用

我们都知道 html 超链接标签 href 属性 target="_blank" 的作用是使打开的链接以新开的窗口形式出现。但是除了直接写在 href 标签里面,你还知道有其他更巧妙的给链接加 target="_blank" 的办法吗?下面作者将要和大家分享的是如何巧妙的使用 href target="_blank" 这个标签。

首先来看看 target="_blank" 的用处:

<a href="http://www.phpernote.com/php-template-framework/189.html" target="_blank">php+js 实现瀑布流效果</a>
<form action="http://www.phpernote.com/php-function/172.html" target="_blank">10个不常见却非常有用的PHP函数<input type="submit" value="提交按钮"></form>

上面的代码中,如果不加 target="_blank" 这个属性,默认均为本页直接打开,即:target="_self"。

下面说一下怎么会突然想到这个标签的吧!作者网站在当初设计时,对于链接这一块,没有做太多的想法,所有链接元素打开的方式都是_self。现在才发现存在不少问题,本站自己的内链就不说什么了,但是发表在文章内容中的链接,多半是指向别人网站的连接,而这些链接也都是直接通过_self形式打开的,这个问题就来了,用户体验度不好不说,对自己网站的流量,权重都是个挺大的损失。那怎么解决这个问题呢?我需要的是在网页页面局部实现 href 的 target="_blank" 属性,最后想出了两种方法:

(1)给这些链接一个个手动去加上target="_blank",但这个方法太笨了,太费时费力。

(2)在页面 head 标签内加上 <base target="_blank"> 这个标签,就一劳永逸了。这个标签可以使得页面上的所有连接都以新开窗口的形式打开。但是感觉这个用户体验度很不好,用户才浏览了几个网页就打开的全是我的网站了,这会让人很不爽,至少我是这么感觉的。而且这个在严格的W3C标准中是不标准的,至于为什么?原因很人性化,是因为外国人认为,不经过用户同意,就随便打开新窗口,是不礼貌的,不尊重用户的选择。

那这个时候该怎么办呢?

搜索了大量的资料得出 href 标签在 HTML 4.0 增加了一个新属性:rel,这个属性用来说明链接和包含此链接页面的关系,以及链接打开的目 标。rel 有许多的属性值,比如next、previous,、chapter、section 等等。这里我们可以使用 rel="external" 属性。那么原来这样写的代码:

<a href="http://www.phpernote.com/javascript-function/510.html" target="_blank">右下角弹出广告 js,漂浮效果(兼容多浏览器)</a>

现在要写成这样:

<a href="http://www.phpernote.com/javascript-function/510.html" rel="external">右下角弹出广告 js,漂浮效果(兼容多浏览器)</a>

这是符合strict标准的方法。但是这里还必须配合一个javascript才有效,相关的代码JS如下:

function externallinks(){
	if(!document.getElementsByTagName){
		return;
	}
	var anchors=document.getElementsByTagName("a");
	for(var i=0;i<anchors.length;i++){
		var anchor=anchors[i];
		if(anchor.getAttribute("href")&&anchor.getAttribute("rel")=="external"){
			anchor.target="_blank";
		}
	}
}
window.onload=externallinks;

你可以将以上代码保存成一个.js文件(比如external.js),然后通过外部联接方法调用:

<script type="text/javascript" src="http://www.phpernote.com/external.js"></script>

这样就解决了在网页页面局部实现 href 的 target="_blank" 属性的问题了。

您可能感兴趣的文章

  • PHP中file_get_contents于curl性能效率比较
  • PHP get_class_methods函数用法
  • JS如何操作css中float属性写法
  • PHP中return 和 exit 、break和contiue 区别与用法
  • PHPExcel的exception 'Exception' with message 'The filename is not recognised as an OLE file问题解决
  • php SPL DirectoryIterator 获取网站目录列表的方法
  • robots meta标签的作用及其用法
  • Canonical标签及其作用[网站SEO]
转载请注明出处:php程序员的笔记
本文永久地址:http://www.phpernote.com/javascript-function/714.html
发布时间:2013 年 04 月 15 日 06 时 35 分 18 秒     文章来源:-わ千与千寻
上一篇:div css做的房子,强大到不行
下一篇:php判断今天是星期几(周几)
热门文章
  • JS判断浏览器类型的方法总结(IE firefox chrome opera safari)
  • js打印数组,js打印对象的方法
  • Javascript中如何为函数设置默认参数值
  • js判断一个值是否存在于一个js数组中
  • js 实现页面打印功能
  • javascript获取当前完整的url地址以及参数的方法
随机文章
  • TypeError document.getElementById(...) is null的解决办法
  • 详解JSON
  • 添加到百度首页按钮代码
  • js - DOM编程核心
  • thinkphp更新数据库的五种方法
  • IE6透明PNG图片显示错误的解决办法
  • 周热门文章
    • JavaScript如何打印对象
    • js中将Object转换为String函数代码
    • javascript实现刷新iframe的方法的总结
    • JavaScript 数组操作函数总结(push,pop,join,shift,unshift,slice,splice,concat)
    • js插入元素到body元素最前面的办法
    • href标签target=_blank属性的妙用
    • js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
    • 页面定时跳转(倒计时跳转)代码总结
    • javascript实现原生ajax的几种方法
    • js获取数组的最后一个元素

All rights reserved. Design by -わ千与千寻.  京ICP备16025782号-1网站地图  友情连接有话要说私人建站招募投稿  广告服务  互联网工具大全