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

<a href="http://www.baidu.com" target="_blank">百度</a>
1
<a href="http://www.baidu.com" target="_blank">百度</a>

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

rel=noopener 新特性

<a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">百度</a>
1
<a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">百度</a>

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

var otherWindow = window.open('http://www.baidu.com');
otherWindow.opener = null;
otherWindow.location = url;
1
2
3
var otherWindow = window.open('http://www.baidu.com');
otherWindow.opener = null;
otherWindow.location = url;

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

a标签属性 rel=noopener noreferrer的更多相关文章

  1. a rel=noopener

    看vue-element-admin的源码的时候,看到a 标签使用  rel=noopener: 然后就很奇怪这个是干什么用的:然后百度到一篇文章,涨知识了. 个人的理解是:不加 rel=noopen ...

  2. a标签一个有利于SEO的属性rel="nofollow"

    最近想了解学些一下SEO,然后看了一些基础的视频,视频里提到了a标签的rel="nofollow"属性. 说来惭愧,第一次看到这个属性,都不知道这个属性是干嘛的 nofollow是 ...

  3. <link>标签的rel属性全解析

      <link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,&l ...

  4. link标签中rel属性的作用

    Link标签有两个作用:1. 定义文档与外部资源的关系:2. 是链接样式表.link标签是用于当前文档引用外部文档的 这个标签的rel属性用于设置对象和链接目标间的关系,说白了就是指明你链进来的对象是 ...

  5. Web 安全问题 rel="noopener nofollw"

    1. noopener 如果你需要用 a 标签打开一个标签页时,你会使用 target='_blank' 这个属性,此时你需要添加 rel='noreferrer noopener' 当你使用 tar ...

  6. HTML的常用标签属性及使用时需注意的一些细节

    前言 本篇随笔的主要是复习一下常用的一些HTML(Hyper Text Markup Language)标签及其属性,并总结一些使用过程中需要注意的一些细节,本篇提及的常用标签主要有: iframe标 ...

  7. html标签属性大全

    <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marqu ...

  8. Html 改变原有标签属性

    内容简要: 当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<tr> 当tr内的值符合某一条件时把<tr>变成<a>标签 例:当订单状体编程已支付的时 ...

  9. 网站使用 rel="noopener" 打开外部锚

    当您的页面链接至使用 target="_blank" 的另一个页面时,新页面将与您的页面在同一个进程上运行. 如果新页面正在执行开销极大的 JavaScript,您的页面性能可能会 ...

随机推荐

  1. Node.js实战(三)之第一个Web服务器

    这次的示例同样也可以说是HelloWorld,只不过不同的是这是web服务器示例. (1)编写web.js,内容如下: var http = require("http") fun ...

  2. leetcode63—Unique Path II

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  3. CSS3注意点

    1.background-Origin属性指定了背景图像的位置区域.content-box, padding-box,和 border-box区域内可以放置背景图像.注意:背景色是不起作用的 2.ba ...

  4. C#构造方法--实例化类时初始化的方法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  5. golang 文件服务器

    在go语言中可以用一句代码做一个文件服务器.如果有很多文件需要通过网页来供其他人下载,可以使用这个方法. package main import ( "log" "net ...

  6. 关于mydumper的.metadata文件丢失

    今天要进行MySQL的数据迁移,所以把数据库通过mydumper工具备份的文件解压后.通过myloader进行导入 可是导入的时间出现这个报错: ** (myloader:766): CRITICAL ...

  7. Docker的Mysql数据库:把数据存储在本地目录

    Docker mysql 把数据存储在本地目录,很简单,只需要映射本地目录到容器即可 1.加上-v参数 $ docker run -d -e MYSQL_ROOT_PASSWORD=admin --n ...

  8. 【小程序】&nbsp; 的识别

    给标签添加   decode="{{true}}" space="{{true}}"  属性 eg: <text decode="{{true} ...

  9. 20155223 Exp8 WEB基础实践

    20155223 Exp8 WEB基础实践 基础问题回答 什么是表单? 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素. 表单使 ...

  10. 20155304《网络对抗》Exp7 网络欺诈技术防范

    20155304<网络对抗>Exp7 网络欺诈技术防范 实践内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 (1)简单应用SET工具建立冒名网 ...