JavaScript跳出iframe框架
Posted Mazey
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript跳出iframe框架相关的知识,希望对你有一定的参考价值。
一、window.top
top属性返回最顶层的先辈窗口。
该属性返回对一个顶级窗口的只读引用。如果窗口本身就是一个顶级窗口,top属性存放对窗口自身的引用。如果窗口是一个框架,那么top属性引用包含框架的顶层窗口。
二、window.self
self属性可返回对窗口自身的只读引用。等价于Window属性。
三、window.location
window.location(MDN)对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
3.1 示例
window.location = ‘http://www.mazey.net/‘; //网站将跳转到后面的网址
3.2 属性
- location.hostname返回web主机的域名
- location.pathname返回当前页面的路径和文件名
- location.port返回web主机的端口(80或443)
- location.protocol返回所使用的web协议(http://或https://)
四、iframe示例
<h1>iframe 1</h1> <button type="button" id="self">Show Self</button> <button type="button" id="selflocation">Show Self Location</button> <button type="button" id="selfhref">Show Self Href</button> <button type="button" id="top">Show Top</button> <button type="button" id="toplocation">Show Top Location</button> <button type="button" id="tophref">Show Top Href</button> <button type="button" id="replace">Replace Me To Whole Page</button> <script> document.getElementById(‘self‘).addEventListener(‘click‘, function(){ alert(window.self); }); document.getElementById(‘selflocation‘).addEventListener(‘click‘, function(){ alert(window.self.location); }); document.getElementById(‘selfhref‘).addEventListener(‘click‘, function(){ alert(window.self.location.href); }); document.getElementById(‘top‘).addEventListener(‘click‘, function(){ alert(window.top); }); document.getElementById(‘toplocation‘).addEventListener(‘click‘, function(){ alert(window.top.location); }); document.getElementById(‘tophref‘).addEventListener(‘click‘, function(){ alert(window.top.location.href); }); document.getElementById(‘replace‘).addEventListener(‘click‘, function(){ if(window.top !== window.self){ window.top.location.href = window.self.location.href; console.log(‘You replace successfully!‘); }else{ console.log(‘You don\‘t need replace, i\‘m top!‘); } }); </script>
五、总结
若想页面跳出iframe在里面加上下面这段代码即可。
if(window.top !== window.self){ //若自身窗口不等于顶层窗口 window.top.location.href = window.self.location.href; //顶层窗口跳转到自身窗口 }
以上是关于JavaScript跳出iframe框架的主要内容,如果未能解决你的问题,请参考以下文章
javascript 控制 iframe 里面的 a 元素让它不跳出iframe
JSP中解决session超时跳转到登陆页面并跳出iframe框架或局部区域的方法
如何让jqueryEasyUI里面的dialog弹出层跳出iframe框架在最外层显示以防止拖动时部门被遮住之后无法拖动