一、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框架的更多相关文章

  1. 当session过期后自动跳转到登陆页而且会跳出iframe框架

    写项目时在重定向后一直存在一个问题就是重定向后登陆页面会出现在跳出的子框架里.

  2. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  3. easyui弹出层在最顶层显示跳出iframe框架通用javascript代码

    有时候我们用easyui在后台框架中弹框的时候,总是显示在框架页面里面而不是整个系统框架的上面,看着有些不太乐意. dialog = function (opts) { var query = par ...

  4. session过期跳转到登陆页面并跳出iframe框架的两个方法

    最近在做拦截器,判断用户登录后操作超时,失去权限然后要重新登录,但是用的iframe,返回的登陆页总是在框架中显示,我百度了下,总是只有其中一个方法,现在分享下两种解决方法,希望对你们有帮助: 方法一 ...

  5. JSP中解决session超时跳转到登陆页面并跳出iframe框架或局部区域的方法

    当session会话超时,页面请求被重新定位到了登陆界面.但登录界面在iframe中的解决方案:在登录页面中加入下面的js代码: <script type="text/javascri ...

  6. Session过期,如何跳出iframe框架页的问题

    跳出框架页,实际上是更改父页面地址.那么更改父页面地址很简单即: window.parent.location='/Login/loginindex'; 这里说session过期,那么浏览器端的任何请 ...

  7. Session过期,跳出iframe框架页显示会话过期页面

    web开发中经常会有这种情况,在一个主页面中包含侧边导航菜单和iframe,点击菜单项,对应页面会在iframe中显示,整个页面不会刷新.但是如果设置了会话Session,在会话过期后再操作会自动re ...

  8. 解决session过期跳转到登录页并跳出iframe框架(或者layui弹出层)

    当用户长时间停留在管理界面没有操作,等到session过期后,进行了操作,那么只是iframe跳转到login页面,这不是我们想要的结果.解决方法:在login页面加一个逻辑判断: <scrip ...

  9. Jsp中解决session过期跳转到登陆页面并跳出iframe框架的方法

    1.可以用javaScript解决在你想控制跳转的页面,比如login.jsp中的<head>与</head>之间加入以下代码: <script language=”Ja ...

随机推荐

  1. ActivityGroup window bad token问题深入分析

    如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456 ActivityGroup window bad token问题深入分析 近期帮别人调试一个webview ...

  2. springboot+thymeleaf打war包在外部tomcat运行

    工程目录 pom文件注意点 <packaging>war</packaging> <dependency> <groupId>org.springfra ...

  3. iOS开发多线程篇 11 —自定义NSOperation

    iOS开发多线程篇—自定义NSOperation 一.实现一个简单的tableView显示效果 实现效果展示: 代码示例(使用以前在主控制器中进行业务处理的方式) 1.新建一个项目,让控制器继承自UI ...

  4. unity3d 动画卡帧 动画合成 动画层次

    2013-02-26 16:22 2059人阅读 评论(0) 收藏 举报 unity3d 中动画的添加   http://unity3d.com/support/documentation/Manua ...

  5. JS鼠标的拖拽原理

    拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 ...

  6. Java时间类总结

    java.util.Date 包含有年月日时分秒,精确到毫秒级别. 官方解释: // The class Date represents a specific instant in time, wit ...

  7. 使用httpClient发送get\post请求

    maven依赖 <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId&g ...

  8. 超级拷贝scp

    scp -r 超级拷贝,其是ssh的一个组件,通过ssh访问来拷贝文件.首先保证已安装openssh-server. 用法:scp -r 目标用户名@目标ip:目标文件绝对路径  存放位置 $ scp ...

  9. 【Mac + Appium + Python3.6学习(二)】之Android自动化测试,appium-desktop配置和简易自动化测试脚本

    上一篇文章介绍安装appium测试环境,这一片研究介绍如何测试Android自动化. 上一篇地址:<[Mac + Appium学习(一)]之安装Appium环境> 这一篇参考:<Ma ...

  10. 离散数学及其应用(Discrete Mathematica With Application 7th)学习笔记 第一章

    目前本人只进行到了第五章的章末补充练习,应该是从4月6号开始学习的,又是英文版,而且基本就下班回家抽2个小时左右去学,所以进度较慢. 由于本质是数学,除了一些程序处理和大计算量的问题,基本上一本草稿本 ...