a标签属性 rel=noopener noreferrer

wordpress 前端之家
前端之家收集整理的这篇文章主要介绍了a标签属性 rel=noopener noreferrer，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

当你浏览一个页面点击一个a标签链接跳转到另一个页面时，

Crayon-5c891c9b2f02f147350340" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">
Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">
Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
百度

在新打开的页面（http://www.baidu.com）中可以通过 window.opener 获取到源页面的部分控制权，即使新打开的页面是跨域的也照样可以（例如 location 就不存在跨域问题）。

rel=noopener 新特性

Crayon-main" style="">Crayon-table">Crayon-row">
Crayon-nums " data-settings="show">
Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
Crayon-num" data-line="Crayon-5c891c9b2f038242502235-1">1
Crayon-code">
Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
Crayon-line" id="Crayon-5c891c9b2f038242502235-1">Crayon-o"><Crayon-i">aCrayon-h"> Crayon-v">hrefCrayon-o">=Crayon-s">"http://www.baidu.com"Crayon-h"> Crayon-v">targetCrayon-o">=Crayon-s">"_blank"Crayon-h"> Crayon-v">relCrayon-o">=Crayon-s">"noopener noreferrer"百度Crayon-o"><Crayon-o">/Crayon-v">a

在 Chrome 49+，Opera 36+，打开添加了 rel=noopener 的链接， window.opener 会为null。在老的浏览器中，可以使用 rel=noreferrer 禁用HTTP头部的Referer属性，使用下面JavaScript代替 target=’_blank’ 来解决此问题：

Crayon-5c891c9b2f03b813574988" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">
Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">
Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-language">JavaScript
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
Crayon-main" style="">Crayon-table">Crayon-row">
Crayon-nums " data-settings="show">
Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
Crayon-num" data-line="Crayon-5c891c9b2f03b813574988-1">1
Crayon-num Crayon-striped-num" data-line="Crayon-5c891c9b2f03b813574988-2">2
Crayon-num" data-line="Crayon-5c891c9b2f03b813574988-3">3
Crayon-code">
Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
Crayon-line" id="Crayon-5c891c9b2f03b813574988-1">Crayon-t">varCrayon-h"> Crayon-v">otherWindowCrayon-h"> Crayon-o">=Crayon-h"> Crayon-v">windowCrayon-sy">.Crayon-e">openCrayon-sy">(Crayon-s">'http://www.baidu.com'Crayon-sy">)Crayon-sy">;
Crayon-line Crayon-striped-line" id="Crayon-5c891c9b2f03b813574988-2">Crayon-v">otherWindowCrayon-sy">.Crayon-v">openerCrayon-h"> Crayon-o">=Crayon-h"> Crayon-t">nullCrayon-sy">;
Crayon-line" id="Crayon-5c891c9b2f03b813574988-3">Crayon-v">otherWindowCrayon-sy">.Crayon-v">locationCrayon-h"> Crayon-o">=Crayon-h"> Crayon-v">urlCrayon-sy">;

使用 window.open 打开页面，手动将 opener 设置为 null。

原文链接：https://www.f2er.com/wordpress/238336.html
noopenernoreferrer

猜你在找的wordpress相关文章

WordPres介绍
WordPress是一种使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架...
教你激活 WordPress 3.0 菜单
这两段代码可以让你先体验一下WordPress 3.0的菜单样式 首先在functions.php添加如下代码：...
对比 WordPress 的六种固定URL链接优缺点
有人说 WordPress 本身的 SEO 就比较好，我想这个和 WordPress 可以方便的自定义文章的固定...
WordPress关闭后台的文件编辑功能的方法
曾经给大家介绍了在 WordPress 后台移除主题编辑器，今天继续加深，直接关闭 WordPress 后...
WordPress之iNove主题内容页增加公告栏的方法
WordPress之iNove主题内容页增加公告栏的方法，导航栏下面默认的公告栏只能在首页显示，只...
WordPress主题导航菜单制作的几种方法(一)
在WordPress主题制作中，导航菜单的制作算是一个重点，已经写好导航菜单的HTML代码，放在W...
WordPress网店插件eShop,灵活的电子商务
eShop 和 WP e-Commerc 一样，也是一款功能强大的电子商务插件，几乎可以满足在线销售的各...
博客(BLOG)首页展示的三种方式
Blog的首页是一个重要的入口，所以如何能够做好入口的整理和展示非常重要。 大约在多年以前...
WordPress时间显示成“xxx前”个性时间格式
在微博中，时间的格式都是显示成：20秒前，1小时前，3天前这样的格式，在前边的教程中，网...
Zblog 博客系统如何备份网站数据
一直没有把博客备份问题放在心上。前天，小兵问我要个Zblog的文件。并提醒我要备份，我才关...
wordpressDedecmsphpcmsDiscuz帝国CMS
dedecms怎么换更新dedecms手dedecms怎么让dedecms301重dedecms如何做dedecms网站改dedecms设置行dedecms的全局dedecms备份mdedecms网站搬dedecms更换默dedecms模板修dedecms配置文dedecms转移dedecms缓存dedecms数据表dedecms分页cdedecms水印如何在dedecmdedecms密码dedecms版权标dedecms编辑器dedecms如何播dedecms备份网dedecms添加4dedecms采集dedecms站群文档列表dedecms中id怎DedeCMS提示中