a标签属性 rel=noopener noreferrer
当你浏览一个页面点击一个a标签链接跳转到另一个页面时,
|
1
|
<a href="http://www.baidu.com" target="_blank">百度</a>
|
在新打开的页面(http://www.baidu.com)中可以通过 window.opener 获取到源页面的部分控制权,即使新打开的页面是跨域的也照样可以(例如 location 就不存在跨域问题)。
rel=noopener 新特性
|
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’ 来解决此问题:
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的更多相关文章
- a rel=noopener
看vue-element-admin的源码的时候,看到a 标签使用 rel=noopener: 然后就很奇怪这个是干什么用的:然后百度到一篇文章,涨知识了. 个人的理解是:不加 rel=noopen ...
- a标签一个有利于SEO的属性rel="nofollow"
最近想了解学些一下SEO,然后看了一些基础的视频,视频里提到了a标签的rel="nofollow"属性. 说来惭愧,第一次看到这个属性,都不知道这个属性是干嘛的 nofollow是 ...
- <link>标签的rel属性全解析
<link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,&l ...
- link标签中rel属性的作用
Link标签有两个作用:1. 定义文档与外部资源的关系:2. 是链接样式表.link标签是用于当前文档引用外部文档的 这个标签的rel属性用于设置对象和链接目标间的关系,说白了就是指明你链进来的对象是 ...
- Web 安全问题 rel="noopener nofollw"
1. noopener 如果你需要用 a 标签打开一个标签页时,你会使用 target='_blank' 这个属性,此时你需要添加 rel='noreferrer noopener' 当你使用 tar ...
- HTML的常用标签属性及使用时需注意的一些细节
前言 本篇随笔的主要是复习一下常用的一些HTML(Hyper Text Markup Language)标签及其属性,并总结一些使用过程中需要注意的一些细节,本篇提及的常用标签主要有: iframe标 ...
- html标签属性大全
<marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marqu ...
- Html 改变原有标签属性
内容简要: 当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<tr> 当tr内的值符合某一条件时把<tr>变成<a>标签 例:当订单状体编程已支付的时 ...
- 网站使用 rel="noopener" 打开外部锚
当您的页面链接至使用 target="_blank" 的另一个页面时,新页面将与您的页面在同一个进程上运行. 如果新页面正在执行开销极大的 JavaScript,您的页面性能可能会 ...
随机推荐
- Node.js实战(三)之第一个Web服务器
这次的示例同样也可以说是HelloWorld,只不过不同的是这是web服务器示例. (1)编写web.js,内容如下: var http = require("http") fun ...
- 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 ...
- CSS3注意点
1.background-Origin属性指定了背景图像的位置区域.content-box, padding-box,和 border-box区域内可以放置背景图像.注意:背景色是不起作用的 2.ba ...
- C#构造方法--实例化类时初始化的方法
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- golang 文件服务器
在go语言中可以用一句代码做一个文件服务器.如果有很多文件需要通过网页来供其他人下载,可以使用这个方法. package main import ( "log" "net ...
- 关于mydumper的.metadata文件丢失
今天要进行MySQL的数据迁移,所以把数据库通过mydumper工具备份的文件解压后.通过myloader进行导入 可是导入的时间出现这个报错: ** (myloader:766): CRITICAL ...
- Docker的Mysql数据库:把数据存储在本地目录
Docker mysql 把数据存储在本地目录,很简单,只需要映射本地目录到容器即可 1.加上-v参数 $ docker run -d -e MYSQL_ROOT_PASSWORD=admin --n ...
- 【小程序】 的识别
给标签添加 decode="{{true}}" space="{{true}}" 属性 eg: <text decode="{{true} ...
- 20155223 Exp8 WEB基础实践
20155223 Exp8 WEB基础实践 基础问题回答 什么是表单? 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素. 表单使 ...
- 20155304《网络对抗》Exp7 网络欺诈技术防范
20155304<网络对抗>Exp7 网络欺诈技术防范 实践内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 (1)简单应用SET工具建立冒名网 ...