【HTML】【IFrame】iframe页面跳转
2017-04-08 21:16
204 查看
在html中,iframe的作用就是分割页面,实现一个页面上可以显示多个页面的内容。相信大家在创建iframe框架的时候不是很难,这两天有幸想要扩展下iframe的了解,需要在不同iframe中进行相互操作。那么该如何实现呢?通过网上查找资料,发现这方面的分享有,但是很少。所以,在这里,来献丑一下,分享最近对iframe的了解和使用。
在这里主要描述的是同一个页面中,如何实现一个iframe页面的操作改变另外的iframe页面的内容。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body >
<iframe id="top" src="top.html"></iframe>
<iframe id="bottom" src="bottom.html"></iframe>
</body>
</html>
<div id="bottom" class="bottom">
<div id="reduceWeight" onclick="reduceWeight()" >
<p id="reduceWeight_tab"><i class="tab">测试1</i></p>
</div>
<div id="partner" onclick="partner()">
<p id="partner_tab" ><i class="tab">测试2</i></p>
</div>
<div id="me" onclick="meView()">
<p id="me_tab"><i class="tab">测试3</i></p>
</div>
</div>
top.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div id="test" class="test">123</div>
</body>
</html>
值得提醒的是:html中可以不用写完全,可以直接写body中内容标签即可,如上面bottom.html,也可以写完整的,如top.html。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
Hello World!
</body>
</html>
document.getElementById('iframe的ID')
但是,需要注意的是,这种用法是同一个页面内才能使用,即只能在父窗体中才能这样写。所以需要先转换到父窗体中即可。在子窗体中获得父窗体有专门的操作:即parent。parent代表上一层窗体,另外top代表顶层窗体,扩展parent.parent即代表上上层窗体,依次类推。
所以,在iframe中通用的获取另外兄弟iframe的方法即:
parent.document.getElementById('iframe的ID')
上面的代码是直接在子窗体中处理的,所以有parent前缀,如果是父窗体,将parent去掉即可。
现在获取了iframe元素,接下来就是跳转页面的实现了。相信这里难不倒大家了。通过查找到的资料显示,可以设置区分浏览器的功能实现跳转。即:
if (document.all){ // IE 专用
doc = document.frames["iframe的ID"].src="Hello.html";
}else{ // 标准(其它标准浏览器
doc = document.getElementById("iframe的ID").src="Hello.html";
}
记得将上面的对应JS方法中哦,页面上有方法名,JS的引用大家进行吧,我就不献丑啦!
如果仍有疑问、想法或发现,欢迎多多探讨,共同进步!
在这里主要描述的是同一个页面中,如何实现一个iframe页面的操作改变另外的iframe页面的内容。
父窗体
首先先来创建一个页面做父窗体iframe.html<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body >
<iframe id="top" src="top.html"></iframe>
<iframe id="bottom" src="bottom.html"></iframe>
</body>
</html>
子窗体
父窗体中有两个iframe框架,所以,下来在分别创建两个页面bottom.html<div id="bottom" class="bottom">
<div id="reduceWeight" onclick="reduceWeight()" >
<p id="reduceWeight_tab"><i class="tab">测试1</i></p>
</div>
<div id="partner" onclick="partner()">
<p id="partner_tab" ><i class="tab">测试2</i></p>
</div>
<div id="me" onclick="meView()">
<p id="me_tab"><i class="tab">测试3</i></p>
</div>
</div>
top.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div id="test" class="test">123</div>
</body>
</html>
值得提醒的是:html中可以不用写完全,可以直接写body中内容标签即可,如上面bottom.html,也可以写完整的,如top.html。
跳转页面
另外,再准备一个页面用来跳转Hello.html<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
Hello World!
</body>
</html>
获得IFrame
在这里,我们在子窗体中操作另一个子窗体显示内容,是动态的,所以需要采用JS来实现。在iframe中获取另外一个iframe是唯一的难点。那么该如何获取呢?我也是通过上网查资料,以及自己一点点尝试,找到了结果。通用方法
获取iframe有两种方法可以实现,一种是通用的,通过获取ID值就能得到。document.getElementById('iframe的ID')
但是,需要注意的是,这种用法是同一个页面内才能使用,即只能在父窗体中才能这样写。所以需要先转换到父窗体中即可。在子窗体中获得父窗体有专门的操作:即parent。parent代表上一层窗体,另外top代表顶层窗体,扩展parent.parent即代表上上层窗体,依次类推。
所以,在iframe中通用的获取另外兄弟iframe的方法即:
parent.document.getElementById('iframe的ID')
IE专用
第二种获取iframe方法是IE专用的,及只能在IE浏览器中使用,而通用的则是其它浏览器流通的,如Google、Firefox、360极速等等浏览器。在IE专用获取iframe的方法中也有两种方式,不过都是一个道理://第一种:通过frame数组获取(参数可以是ID也可以是Name parent.frames['iframe的ID'] parent.frames['iframe的name'] //第二种:通过frame元素获得,同样参数既可以是ID,也可以是Name parent.frameElement['iframe的ID']
上面的代码是直接在子窗体中处理的,所以有parent前缀,如果是父窗体,将parent去掉即可。
现在获取了iframe元素,接下来就是跳转页面的实现了。相信这里难不倒大家了。通过查找到的资料显示,可以设置区分浏览器的功能实现跳转。即:
if (document.all){ // IE 专用
doc = document.frames["iframe的ID"].src="Hello.html";
}else{ // 标准(其它标准浏览器
doc = document.getElementById("iframe的ID").src="Hello.html";
}
记得将上面的对应JS方法中哦,页面上有方法名,JS的引用大家进行吧,我就不献丑啦!
如果仍有疑问、想法或发现,欢迎多多探讨,共同进步!
相关文章推荐
- iframe内部嵌入html页面并且能够跳转
- HTML Iframe窗口在页面跳转
- session过期后iframe页面如何跳转到parent页面
- session过期后含用iframe页面如何自动跳转到登陆页
- Html/Jsp常用的页面跳转方法
- 利用HTML的<meta>实现页面跳转
- js 按钮实现跳转页面 jsp html
- 【HTML】打开页面时按照指定的URL直接跳转到另一新页面
- Asp.net 三种页面跳转 转自http://www.cnblogs.com/cyzyimao/archive/2010/07/20/1781500.html
- html页面中iframe的使用
- HTML页面跳转
- iframe中Session丢失以及iframe页面跳转
- .net通过iframe控件控制页面跳转
- html实现以秒为单位倒数,跳转新的页面
- iframe跳转到新页面
- iframe中请求页面而session失效时页面跳转问题
- 用Request方法从页面得到Html内容时的处理 及 iframe中控件内容的获取
- 一些页面自动跳转的实现 转自<a href="http://www.blogjava.net/Jcat/archive/2006/11/22/82831.html" target="_blank">http://www.blogjava.net/Jcat/archive/2006/11/22/82831.html</a>
- PHP/ASP/HTML/JAVASCRIPT 实现页面跳转
- Asp.net Session失效,在包含iframe的页面中跳转至登录窗口