当你浏览一个页面点击一个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. 页签中加按钮 odoo里面

    <notebook> <page string="订"> <field name="line_id" > <tree ...

  2. struts2_maven_learning

    以下为学习maven struts2 的学习过程,现记录如下. 1.创建一个完善的maven程序 maven:(jar) 1)maven project 2)facet 3)pom.xml,depen ...

  3. 1.3《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——手册页

    我们运行的命令行程序,通常在技术上称作shell, 它包含了一个非常强大(也很神秘)的工具,我们将用它来学习更多可用的命令.这个工具本身就是个称作'man'的命令('manual'的简写).它的参数是 ...

  4. 64位RHEL5系统上运行yum出现"This system is not registered with RHN”的解决方法

    在红帽EL5上运行yum,提示“This system is not registered with RHN”,意思是没有在官网上注册,不能下载RH的软件包,替代方案是采用centos源. 1.卸载r ...

  5. 20155330 《网络攻防》 Exp3 免杀原理与实践

    20155330 <网络攻防> Exp3 免杀原理与实践 基础问题回答 杀软是如何检测出恶意代码的? 基于特征码.先对流行代码特征的提取,然后进行程序的比对,如果也检测到相应的特征码的程序 ...

  6. Python基础(字符串和编码)

    字符编码 我们已经讲过了,字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特 ...

  7. Compensating-Transaction模式

    在应用中,会将一系列相关的操作定义为一个连续的操作,当其中一个或者多个步骤失败的时候,Compensating-Transaction模式会重置(回滚)这个连续的操作.在云应用中,这些需要保证一致性的 ...

  8. MFC Timer定时器

    知识点: 定时器Timer 创建定时器 销毁定时器 代码测试 一. 创建定时器 UINT SetTimer( HWND hWnd, // 指定关联定时器的窗口句柄,在MFC版将省略此参数 UINT n ...

  9. Hadoop日记Day16---命令行运行MapReduce程序

    一.代码编写 1.1 单词统计 回顾我们以前单词统计的例子,如代码1.1所示. package counter; import java.net.URI; import org.apache.hado ...

  10. 【转载】C++文件读写详解(ofstream,ifstream,fstream)

    原文:http://blog.csdn.net/kingstar158/article/details/6859379 在看C++编程思想中,每个练习基本都是使用ofstream,ifstream,f ...