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

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

php+js 实现瀑布流效果

10个不常见却非常有用的PHP函数

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

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

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

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

那这个时候该怎么办呢?

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

右下角弹出广告 js,漂浮效果(兼容多浏览器)

现在要写成这样:

右下角弹出广告 js,漂浮效果(兼容多浏览器)

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

function externallinks(){

if(!document.getElementsByTagName){

return;

}

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

for(var i=0;i

var anchor=anchors[i];

if(anchor.getAttribute("href")&&anchor.getAttribute("rel")=="external"){

anchor.target="_blank";

}

}

}

window.οnlοad=externallinks;

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

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

php target当前页面,href标签target=_blank属性的妙用相关推荐

  1. html使用第三方标签,不使用第三方框架获取html页面某个标签的某个属性值

    (); String reg = "]*?\\s" + attr + "=['\"]?(.*?)['\"]?(\\s.*?)?>"; ...

  2. 前端 - a标签target=”_blank”

    一.概述 我们知道,网页里的a标签默认在当前窗口跳转链接地址,如果需要在新窗口打开,需要给 a 标签添加一个target="_blank"属性,这个属性的意思是在新的浏览器窗口打开 ...

  3. A href中target属性的用法

    A href中target属性的用法 target这个属性指定所链接的页面在浏览器窗口中的打开方式, 它的参数值主要有:_blank._parent._self._top,这些参数值代表的含义如下: ...

  4. a标签target属性

    <a target="t1" > 1</a> <a target="t1" > 2</a><a targe ...

  5. 实例应用 自定义页面taglib标签

    关于继承TagSupport与BodyTagSupport的区别说明 * <code>TagSupport</code>与<code>BodyTagSupport& ...

  6. html5y页面布局标签,HTML常用标签 - osc_wc3dz06y的个人空间 - OSCHINA - 中文开源技术交流社区...

    1 HTML初识 HTML标签就是用来表达网页上的文字.图片.链接.音视频等等的······ 1.1 HTML标签分类 在HTML页面中,带有"< >"符号的元素被称为 ...

  7. HTML页面制作标签学习

    HTML 1.快速入门: 语法 html文档后缀名.heml或者.htm 标签分为 围堵标签:有开始标签和结束标签.如< html>< /html> 自闭和标签:开始标签和结束 ...

  8. 转:MSDN Visual系列:MOSS企业级搜索之一——在搜索中心里创建自定义搜索页面和标签选项卡...

    MSDN Visual系列:MOSS企业级搜索之一--在搜索中心里创建自定义搜索页面和标签选项卡 原文:http://msdn2.microsoft.com/en-us/library/bb42885 ...

  9. 内省、JavaBean、PropertyDescriptor类、Introspector类、BeanUtils工具包、注解、Rentention、Target、注解的基本属性和高级属性...

    内省.JavaBean.PropertyDescriptor类.Introspector类.BeanUtils工具包.注解.Rentention.Target.注解的基本属性和高级属性 本文转载自:h ...

最新文章

  1. 实验matlab计算30,计算方法实验结果及Matlab程序
  2. 在Flash中调用xml文档
  3. C语言堆排序Heap Sort算法(附完整源码)
  4. 判定重大风险有哪几种_化工生产安全管理信息化平台可以解决哪些重大问题
  5. figtree需要在JAVA下运行吗_Phylogenomic_Tutorial || ML_Tree inference
  6. 综合场景搞清楚同步 异步 阻塞 非阻塞
  7. python switch语句的多种实现方法
  8. Web 前端知识体系精简
  9. InitializeSecurityDescriptor、InitializeAcl、AddAccessAllowedAce、SetSecurityDescriptorDacl
  10. xshell 输入w 命令后报错 66 column window is too narrow
  11. 数学建模按赛题划分常用代码
  12. Java JDBC学习
  13. Unity3D自动寻路之Nav Mesh Agent(导航网格代理)
  14. Vue学习之旅Part3:Vue的全局过滤器和私有过滤器
  15. 鲁棒性的含义以及如何提高模型的鲁棒性
  16. android 跟屁虫 教程,鬼谷八荒跟屁虫使用方法指南介绍 鬼谷八荒好感度快速提升方法教程攻略...
  17. TDSQL TCA 分布式实例特点初探--分布表和SQL透传
  18. 中医卫统直报、重点专科、绩效考核病案首页字段汇总-标出差异
  19. C++-容器-string:数字to字符串【std::to_string()】、字符串to数字【std::stoi、stol、stoll、stoul、stoull、stof、stod、stold】
  20. 网站底部版权信息正确写法

热门文章

  1. SVG进阶-sprite 雪碧图
  2. 京东AI:戴口罩人脸识别pytorch开源库
  3. square在matlab是什么意思,square是什么意思
  4. ios 自定义滑杆
  5. 王立平--scard0与scard1分别指的是什么?以及路径获取
  6. 数字图像处理|Matlab-数字图像编码实验-无损编码/压缩算法实验-实现行程编码压缩, 计算原图和压缩以后的尺寸,计算压缩率并比较分析
  7. 有助于理解分辨率、帧率、压缩率、码率和视频大小的关系式
  8. 青少年编程平台系统设计与实现
  9. 三种网络模型(OSI七层参考模型、TCP/IP参考模型、五层参模型)
  10. MacW小编分享设计师们常用Sketch插件合集,让你效率翻倍!