当你浏览一个页面点击一个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. 由微软打造的深度学习开放联盟ONNX成立

    导读 如今的微软已经一跃成为全球市值最高的高科技公司之一.2018年11月底,微软公司市值曾两次超越了苹果,成为全球市值最高的公司,之后也一直处于与苹果胶着的状态.市场惊叹微软是一家有能力改造自己并取 ...

  2. python不要使用可变对象作为参数的默认值

    幽灵乘客例子: . 如上:如果为空时,bus2和bus3引用的是相同的一个list,就会造成粗错误 实际工作中,如果不想改变某个参数值,那么通过以上这种赋值也会改变 解决方式self.passenge ...

  3. SQL实用札记【SQL Sever篇】

    目录 从表中去除重复行 逗号分隔字符串转数据表行 跨DB/Server执行SP[分布式事务] 在OpenQuery中执行带参数的SQL语句 从表中去除重复行数据 1. 如果有ID字段,就是具有唯一性的 ...

  4. Jmeter之目录结构

    首先得了解一下这些东西,以后才能快速的找到某些配置文件进行修改(举个例子,改配置只是其中之一) 一.bin目录examples:  目录中有CSV样例 jmeter.bat  windows的启动文件 ...

  5. HDU 2767 Proving Equivalences(至少增加多少条边使得有向图变成强连通图)

    Proving Equivalences Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

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

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

  7. Docker搭建Mysql容器

    转载自:http://blog.csdn.net/Mungo/article/details/78521832?locationNum=9&fps=1 本文介绍如何使用docker迅速搭建My ...

  8. excel实用技巧——vlookup函数

    1.VLOOKUP函数的套路 VLOOKUP(要找谁,在哪儿找,返回第几列的内容,精确找还是近似找) 最后一个参数: 如果为0或FASLE,用精确匹配方式,而且支持无序查找: 如果为TRUE或被省略, ...

  9. 大数据入门第二十四天——SparkStreaming(一)入门与示例

    一.概述 1.什么是spark streaming Spark Streaming is an extension of the core Spark API that enables scalabl ...

  10. 20155318 《网络攻防》Exp6 信息搜集与漏洞扫描

    20155318 <网络攻防>Exp6 信息搜集与漏洞扫描 基础问题 哪些组织负责DNS,IP的管理. 互联网名称与数字地址分配机构,ICANN机构.其下有三个支持机构,其中地址支持组织( ...