首页 > 代码库 > JavaScript跳出iframe框架

JavaScript跳出iframe框架

2024-10-24 13:41:39   208人阅读

一、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 = http://www.mamicode.com/window.self.location.href;>
<iframe src="http://www.mazey.net/baby/iframe/iframe1.html" width="50%" height="240"></iframe> <iframe src="http://www.mazey.net/baby/iframe/iframe2.html" width="50%" height="240"></iframe>
五、总结
若想页面跳出iframe在里面加上下面这段代码即可。
if(window.top !== window.self){ //若自身窗口不等于顶层窗口    window.top.location.href = http://www.mamicode.com/window.self.location.href; //顶层窗口跳转到自身窗口>
JavaScript跳出iframe框架
JavaScript跳出iframe框架


联系
我们