当你浏览一个页面点击一个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. leetcode 200. Number of Islands 、694 Number of Distinct Islands 、695. Max Area of Island 、130. Surrounded Regions

    两种方式处理已经访问过的节点:一种是用visited存储已经访问过的1:另一种是通过改变原始数值的值,比如将1改成-1,这样小于等于0的都会停止. Number of Islands 用了第一种方式, ...

  2. 洛谷P4053 [JSOI2007]建筑抢修

    放题解 题目传送门 放代码 #include <bits/stdc++.h>//万能头 #define MAXN 150000//最多的建筑数量(数据范围) using namespace ...

  3. 矿难让显卡压了那么多货咋办?NV如是说

    在苏州 GTC 开幕的几天前,英伟达刚刚遭遇了一次股价的腰斩. 近来加密货币的热度渐低,受到挖矿热潮照顾许多的英伟达「矿机」销量受到打击,甚至出现了严重的库存危机,加上近来刚刚发的 RTX20 系列显 ...

  4. leetcode242—Valid Anagram

    Given two strings s and t , write a function to determine if t is an anagram of s. Example 1: Input: ...

  5. 【转】SQL 常用关键字释义和用法

    转自: http://blog.csdn.net/iamwangch/article/details/8093933     下面 是 从网络上整理 出来的 SQL 关键字和 常用函数的 释义和简单用 ...

  6. H.264从SPS中提取视频宽高

    H.264有两种封装模式: (1)annexb模式:传统模式,使用start code来分隔NAL, SPS和PPS是在ES流的头部: (2)mp4模式:没有start code,使用NALU长度(固 ...

  7. 20155320 Exp7 网络欺诈防范

    20155320 Exp7 网络欺诈防范 [基础问题回答] (1)通常在什么场景下容易受到DNS spoof攻击 乱点链接或者连公共场合的免费WiFi也容易受到攻击,尤其是那种不需要输入密码直接就可以 ...

  8. git 认识

    GIT (分布式版本控制系统) <百度文库>Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.<百度文库>                   ...

  9. TMS320VC5509片内ADC采集

    1. ADC采集比较简单,内部的10位的ADC,AIN0-AIN3的输入,主要是用的CSL的库函数#include <csl_adc.h> ; Uint16 samplestoraage[ ...

  10. 生成本地测试用https证书,支持通配符和多域名,初学OpenSSL

    18-01-26在v2ex上看到一妹纸发的<身为一个 21 岁的年轻程序员,我已经腰突了(躺>,哈哈,感同身受,想到这几天我左腿麻木持续了好几天,前几天屁股疼的只要坐下就站不起来,不过站着 ...