[HTML]<a>标签:rel 属性值 opener 是什么?
2021/12/26 23:09:50
本文主要是介绍[HTML]<a>标签:rel 属性值 opener 是什么?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<a> 元素,原英文单词为 anchor 的缩写,所以又称之为锚点元素。锚点元素的 href 属性用来创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
在这里,主要探讨锚点元素 rel 属性,该属性指定一个页面到另一个页面之间的关系。
创建一个 index1.html 和一个 index2.html,index1.html 有一个锚点元素,点击之后跳转到 index2.html 页面。
要在 index2.html 页面中获取到 index1.html 的 window 对象,index1.html 的锚点元素的 rel="opener"
和 target="_blank"
就必须一起出现。
rel 属性值默认为 noopener。所以,必须将 rel 属性值设置为 opener,否则无法获取上一个页面的 window 对象。
<!--index1.html--> <a href="./index2.html" target="_blank" rel="opener">into a new page.</a>
BOM(浏览器对象模型)中的 window 对象的 opener 属性表示当前对象是由哪个跳转而来。在 index2.html 页面中,打开浏览器控制台输入 window.opener
,控制台将返回 index1.html 的 window 对象。
基于上面的探讨结果,我们进行一个实验:当跳转到另一个页面之后,利用 window.opener
让上一个页面进行重定向。
<!--index2.html--> <script> window.opener.location.href = '../../01.全局属性/01.accesskey/index.html'; </script>
效果如下,当发生页面跳转之后,上一个页面立马进行重定向。
这篇关于[HTML]<a>标签:rel 属性值 opener 是什么?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-24Vite多环境配置学习:新手入门教程
- 2024-11-23实现OSS直传,前端怎么实现?-icode9专业技术文章分享
- 2024-11-22在 HTML 中怎么实现当鼠标光标悬停在按钮上时显示提示文案?-icode9专业技术文章分享
- 2024-11-22html 自带属性有哪些?-icode9专业技术文章分享
- 2024-11-21Sass教程:新手入门及初级技巧
- 2024-11-21Sass学习:初学者必备的简单教程
- 2024-11-21Elmentplus入门:新手必看指南
- 2024-11-21Sass入门:初学者的简单教程
- 2024-11-21前端页面设计教程:新手入门指南
- 2024-11-21Elmentplus教程:初学者必备指南