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,您的页面性能可能会 ...
随机推荐
- 映众全新游戏内存条发布:单条16GB 最高4000MHz
近日,显卡与内存厂商映众(INNO3D)推出了一款全新的游戏内存条产品——iCHILL Memory. iCHILL Memory是DDR4内存,单条容量有4GB-16GB可选,内存频率有2400MH ...
- css实现气泡框效果
前提:气泡框或者提示框是网页很常见的,实现它的方式有很多,我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置,但是用这种方式维护很麻烦,比如设计师想改成另外一种 ...
- 将如下三组不同类型的数据利用DataInputStream和DataOutputStream写入文件,然后从文件中读出
三组数据如下: {19.99 , 9.99 , 15.99 , 3.99 , 4.99} {12 , 8 , 13 ,29 ,50} {"Java T-shirt" , " ...
- day69
昨日回顾: 1 路由层: 1简单配置 2无名分组 3有名分组 4反向解析--模板层,视图层 5路由分发 include 6名称空间 7伪静态 2 作业: urlpatterns = ...
- 【转】php容易犯错的10个地方
原文地址: http://www.toptal.com/php/10-most-common-mistakes-php-programmers-make 译文地址:http://codecloud.n ...
- 第2章 如何安装KEIL5
第2章 如何安装KEIL5 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fireg ...
- 20155320《网络对抗》Exp4 恶意代码分析
20155320<网络对抗>Exp4 恶意代码分析 [系统运行监控] 使用schtasks指令监控系统运行 首先在C盘目录下建立一个netstatlog.bat文件(由于是系统盘,所以从别 ...
- # 20155337《网络对抗》Web基础
20155337<网络对抗>Exp8 Web基础 实践目标 1. 实践内容 (1).Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写 ...
- Centos 定时任务发送smtp邮件
接着上一篇文章...... 1.首先创建一个sheel的脚本命令,我是在home文件夹下面创建的命令: touch a.sh 2.编辑a.sh脚本 vim a.sh ,键入键盘 i 键 准备插入 ...
- 汇编 MOVSX与MOVZX 指令
知识点: MOVSX符号扩展传送 MOVZX零扩展传送 一.MOVSX与MOVZX格式 MOVSX 操作数A ,操作数B MOVZX 操作数A ,操作数B 相同点:操作数B 空间必须小于 操作 ...