iframe及其引出的页面跳转问题
前提:在前一段的工作中碰到了一些页面跳转,子页面跳到父页面上的等等问题,当时页面总是跳不对,或者跳错,要不就是不需要重新打开窗口,却又重新打开一个了,特此搜寻网上各大博客论坛,加上项目经验整理一篇文章,会有后续的修改和更新,如果有错误还希望大家及时指出,谢谢。
一、什么是iframe?
iframe也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中。 这是一般网页上给出的答案。然而,在说明什么是iframe之前,需要有一点提醒大家,由于iframe有诸多缺点,因此不符合标准网页设计的理念,已经被标准网页设计抛弃,但是美国前 10 大网站都使用了 iframe。在大部分情况下,他们用它来加载广告。这是可以理解的,也是一种符合逻辑的解决方案。但请记住,iframe 会给你的页面性能带来冲击。只要可能,不要使用 iframe。当确实需要时,谨慎的使用他们。
那么下面就来介绍iframe,我想,没有什么比这幅图片更能解释iframe了,一看就明了。

iframe就是我们常用的iframe标签:<iframe>。iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,超链接指向这个嵌入的网页,只要给这个iframe命名就可以了。方法是<iframe name=**>,例如我命名为aa,写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://host.zzidc.com></iframe>,然后,网页上的超链 接语句应该写为:<a href=URL target=aa>,而这个连接,就是指图中的衣服下的衬衫 西服 T恤的a连接,这些应该是写在index.html里面的。这样,大家就会对iframe有一个初步的了解了,具体的iframe的样式什么的这里就不做解释了。接下来的页面链接才是重点,毕竟大部分公司已经摒弃了iframe的用法,只有一些框架还选择用iframe。
二、跳转页面
在最近的项目中遇到的有关跳转页面的目前就这三个:
1.刷新当前页: window.location.reload(true);
2.跳转其他页:window.location.href='此处是接口'; 是本页面跳转
3.跳转其他页:window.parent.document.
举例说明:
1、window.location:
如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写 即:A>B>C>D,
"window.location.href"、"location.href"、"self.location.href":D页面自身跳转(即本页面跳转);
"parent.location.href":C页面跳转
"top.location.href":A页面跳转
刷新页面也是如此。
2.window.parent.document:
先举一个例子:
window.parent.document.getElementById("myEle").innerHTML = html;
即指明了是在 window.parent.document 中查找 id=myEle 的元素,并把它的HTML设置为html.那么用jQuery则应如下:
1.$("#myEle", window.parent.document).html(html);
还有一种写法是:
2.parent.$("#myEle").html(html);
这些就很好的解释了我在项目中遇见的这段师傅写的代码:

取父窗口的元素方法:$(selector, window.parent.document);
那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);
类似的,取其它窗口的方法大同小异
$(selector, window.top.document);
$(selector, window.opener.document);
$(selector, window.top.frames[0].document);
目前就是这么多,会做后续补充~~谢谢~~
iframe及其引出的页面跳转问题的更多相关文章
- 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题
<frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...
- iframe重定向让父页面跳转
情景描述 我们在使用一些后台程序的html模板(比如H-ui)的时候,这些html前端程序是iframe版的, 也就是说在使用的时候,每当我点击左侧导航栏的一个按钮,在右侧就会弹出一个菜单栏,在显示的 ...
- iframe 的使用和登陆退出的实现——整个页面跳转
iframe中如果只是页面跳转的话,我们依然只是部分的加载的了,为了实现整个页面的所有内容跳转,下面提供了整个页面跳转的方法. iframe例子 1.总的iframe页面(访问就访问这个) all. ...
- javascript控制页面(含iframe进行页面跳转)跳转、刷新的方法汇总
一.JS方式的页面跳转1.window.location.href方式 <script language="JavaScript" type="text/ja ...
- JS页面跳转和js对iframe进行页面跳转、刷新
一.js方式的页面跳转1.window.location.href方式 <script language="JavaScript" type="text/ja ...
- 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据
利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...
- iframe中请求页面而session失效时页面跳转问题
iframe中请求页面而session失效时页面跳转问题 分类: Web2009-12-11 15:01 656人阅读 评论(0) 收藏 举报 sessioniframejsp 有时候做了就忘了,我记 ...
- 解决iframe重定向让父级页面跳转
原文:http://www.jb51.net/article/40583.htm 有内嵌iframe的页面,当session过期时,点击连接重定向后的跳转会在iframe中跳转,在登录页面中加入下面的 ...
- 关于使用struts2时子窗体页面跳转后在父窗体打开的问题以及Session过期后的页面跳转问题
问题1:传统的系统界面,iframe了三个页面,上,左,右,用户点击注销的按钮在上面得top.jsp里面,方法:<a href="../adminAction/admin_logout ...
随机推荐
- eureka-注册中心使用密码验证
spring cloud 1.1 版本之后可以使用 配置文件: bootstrap.yml server.port: 9000 spring.application.name: registry eu ...
- RTC脚本模型课堂 - ShowMessage(Star5的博客)
ShowMessage对delphi开发人员而言,是个非常熟悉的玩意,常常需要在软件上做一些合适的提醒,以达到更好的用户体验.今天我们来介绍一下网站里的提示框,也就是JavaSciprt中的alert ...
- linux初级学习笔记七:linux用户管理,密码和组命令详解!(视频序号:04_1)
本节学习的命令: 用户管理命令:useradd,userdel,id,finger,usermod,chsh,chfn,passwd,pwck, 组管理命令:groupadd,groupmod,gro ...
- html5--6-4 CSS选择器
html5--6-4 CSS选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用 ...
- UVA-10391(字符串检索)
题意: 给定一个字典,要求找出所有的复合词; 思路: 用map把词都存起来,再把词拆开看是否是出现过的单词; AC代码: #include <bits/stdc++.h> #include ...
- 微信小程序 WXML、WXSS 和JS介绍及详解
前几天折腾了下.然后列出一些实验结果,供大家参考. 百牛信息技术bainiu.ltd整理发布于博客园 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML( ...
- 创建纯文本Banner
场景: 最近再学习Spring Boot的过程中,想要自定义一个Banner,就是再工程启动是输出的那个文本图案,但是自己拼写既麻烦又不好看,所以找到一个工具,自动输出文字代表的纯文本Banner,例 ...
- 任务28:RequestDelegate管道实现思路
任务28:RequestDelegate管道实现思路 管道的实现机制 RequestDelegate是管道的核心.ApplicationBuilder就是接收了很多个RequestDelegae把它拼 ...
- find 是区分大小写的。对于不区分大小写的写法(转载)
转自:http://justwinit.cn/post/3633/ 默认情况下,find 是区分大小写的.对于不区分大小写的 find,将 -iname 测试替换为 -name 测试. find do ...
- HDU 4542 小明系列故事——未知剩余系 (数论|反素数)
分析 kuangbin的blog已经讲的很好了,我做一点补充 1.当做x*y>z的比较时,如果x \(\ast\) y过大,可以写成x>z/y 2.分解质因数时选择用f[][0]保存质数, ...