加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

行使 jQuery 在新窗口打开外部链接

发布时间:2018-08-25 05:32:42 所属栏目:业界 来源:站长网
导读:我们一样平常都但愿在新窗口打开外部链接,这样用户就不必要分开网站就能会见外部链接,可是假如每个外部链接都手工加上新窗口打开的属性(target=_blank)的话,会让人很是抓狂。行使 jQuery ,我们只必要几行代码就能在新窗口中打开外部链接。 1. 找到外部链
我们一样平常都但愿在新窗口打开外部链接,这样用户就不必要分开网站就能会见外部链接,可是假如每个外部链接都手工加上新窗口打开的属性(target=”_blank”)的话,会让人很是抓狂。行使 jQuery,我们只必要几行代码就能在新窗口中打开外部链接。

1. 找到外部链接
起首我们必要找到全部的外部链接,在 $(document).ready() 函数添加如下代码:

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])");

上面这段代码查找 href 属性是以 http:// 可能 https:// 开始的,而且不包括当前域名(location.hostname)的链接(a)标签。这样我们就不会获取任何相对路径可能绝对毗连中含有当前域名的内部毗连。

2. 给外部链接加上 “external” class
假如我们想给外部链接加上 “external” class,添加如下的代码:

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external");

上面的代码给外部链接加上一个 “external” Class ,这样就可以行使 CSS 来样式化外部链接了。

3. 让外部链接在新窗口打开
假如你想外部链接在新窗口打开,继承增进如下一行代码:

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external")
.attr("target","_blank");

上面的代码给链接标签增进一个 target 属性,而且给他赋值为 _blank,这样外部链接就能在新窗口打开。

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读