JS中获取和操作iframe
一、需求与遇到的问题
在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。
我的思路是：在顶部的菜单页面放一个不可见的“退出”链接，当用户点击位于iframe中的主页面（mainPage.htm）中的按钮时，在顶部菜单页面的右侧显示“退出”。
我现在遇到的问题是：如何在页面的一个iframe子页面（mainPage.htm）中获取并且操作其它iframe子页面（比如topPage.htm）中的HTML元素？
二、通过JS获取并操作iframe中的元素来解决问题
这里主要就是通过JS来操作Window对象。Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
经过我在网上查资料，找到了JS操作iframe中HTML元素的方法。示例如下。
1 function ShowExit() {
2 //获取iframe的window对象
3 var topWin = window.top.document.getElementById("topNav").contentWindow;
4 //通过获取到的window对象操作HTML元素，这和普通页面一样
5 topWin.document.getElementById("exit").style.visibility = "visible";
6 }
说明：第一步，通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面 （topPage.htm）所在的iframe对象；第二步，通过上一步获取到的iframe对象的contentWindow属性得到了iframe中 元素所在的window对象；第三步，通过上一步获取到的window对象来操作iframe框架中的元素，这和操作不在iframe框架中的普通 HTML元素是一样的。
下面是我在重现以及解决这个问题时写的全部代码（布局太丑，但重点是JS方法）：
1.使用iframe框架布局的顶级页面（JS操作iframe中的元素.htm）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>JS操作iframe中的元素</title>
5 <style type="text/css">
6 #topDiv
7 {
8 width: 100%;
9 height: 100px;
10 background: #b6b6b6;
11 border-top: 0px;
12 }
13 #topNav
14 {
15 width: 100%;
16 border: 0px;
17 margin-top: 45px;
18 }
19 #middleDiv
20 {
21 width: 100%;
22 height: 360px;
23 border-top: 10px solid #fff;
24 }
25
26 #leftNav
27 {
28 float: left;
29 width: 10%;
30 height: 360px;
31 background: #b6b6b6;
32 border: 0px;
33 }
34
35 #mainContent
36 {
37 float: right;
38 height: 360px;
39 width: 89%;
40 border: 0px;
41 margin-left: 10px;
42 }
43
44 #bottomDiv
45 {
46 width: 100%;
47 float: left;
48 }
49
50 #bottomNav
51 {
52 clear: both;
53 margin: 0;
54 padding: 0;
55 width: 100%;
56 height: 46px;
57 background: #b6b6b6;
58 border: 0px;
59 border-top: 10px solid #fff;
60 border-bottom: 10px solid #fff;
61 }
62 </style>
63 </head>
64 <body>
65 <div id="topDiv">
66 <iframe id="topNav" src="topPage.htm"></iframe>
67 </div>
68 <div id="middleDiv">
69 <div id="leftDiv">
70 <iframe id="leftNav" src="LeftPage.htm"></iframe>
71 </div>
72 <div id="mainDiv">
73 <iframe id="mainContent" src="mainPage.htm"></iframe>
74 </div>
75 </div>
76 <div id="bottomDiv">
77 <iframe id="bottomNav" src="bottomPage.htm"></iframe>
78 </div>
79 </body>
80 </html>
2.顶部菜单栏页面（topPage.htm）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>顶部导航</title>
5 <style type="text/css">
6 ul
7 {
8 list-style-type: none;
9 float: left;
10 padding: 0px;
11 margin: 0px;
12 width: 100%;
13 text-align: center;
14 margin: 0px auto;
15 }
16 a
17 {
18 text-decoration: none;
19 color: White;
20 background-color: Purple;
21 border: 1px solid white;
22 float: left;
23 width: 7em;
24 padding: 0.2em 0.6em;
25 font-weight: bold;
26 }
27 a:hover
28 {
29 background-color: #ff3300;
30 }
31 li
32 {
33 display: inline;
34 }
35 #exit
36 {
37 float: right;
38 visibility: hidden;
39 }
40 </style>
41 </head>
42 <body>
43 <ul>
44 <li><a href="#">文章管理</a></li>
45 <li><a href="#">会员管理</a></li>
46 <li><a href="#">系统管理</a></li>
47 <li id="exit"><a href="#">退出</a></li>
48 </ul>
49 </body>
50 </html>
3.左侧导航栏（leftPage.htm）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>左侧导航</title>
5 <style type="text/css">
6 ul
7 {
8 list-style-type: none;
9 float: left;
10 margin: 5px;
11 padding:5px;
12 }
13 a
14 {
15 text-decoration: none;
16 color: White;
17 background-color: Purple;
18 border: 1px solid white;
19 width: 7em;
20 padding: 0.2em 0.6em;
21 font-weight: bold;
22 }
23 a:hover
24 {
25 background-color: #ff3300;
26 }
27 </style>
28 </head>
29 <body>
30 <div>
31 <ul>
32 <li><a href="#">栏目一 </a></li>
33 <li><a href="#">栏目二</a></li>
34 <li><a href="#">栏目三</a></li>
35 </ul>
36 </div>
37 </body>
38 </html>
4.需要访问顶部菜单页面元素的主页面（mainPage.htm）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6 body
7 {
8 background-color: #B9E5FB;
9 }
10 </style>
11 <script type="text/javascript">
12 function ShowExit() {
13 //获取iframe的window对象
14 var topWin = window.top.document.getElementById("topNav").contentWindow;
15 //通过获取到的window对象操作HTML元素，这和普通页面一样
16 topWin.document.getElementById("exit").style.visibility = "visible";
17 }
18 </script>
19 </head>
20 <body>
21 <div>
22 <input type="button" name="btnOk" value="在顶端显示退出" onclick="ShowExit();" />
23 </div>
24 </body>
25 </html>
5.底部页面（bottomPage.htm）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>底部页面</title>
5 </head>
6 <body>
7 <div>
8 底部版权区：这是一个底部的测试页面
9 </div>
10 </body>
11 </html>
JS中获取和操作iframe的更多相关文章
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- JS中获取元素属性的逆天大法
给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...
- 当Thymeleaf遇到向js中传值的操作
在使用Thymeleaf的时候.关于一些点击操作非常头疼.往往需要向JS里面传递各种东西. 然而,在用Thymeleaf的时候.js操作需要拼接语句.但是又不好拼接. 关于一些操作,一般也是在表格中. ...
- js中获取URL中指定的查询字符串
js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. function getSearchString(key) { // 获取URL中?之后的字符 var str ...
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- 【2017-06-27】Js中获取地址栏参数、Js中字符串截取
一.Js中获取地址栏参数 //从地址栏获取想要的参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- 小程序 js中获取时间new date()的用法（网络复制过来自用）
js中获取时间new date()的用法 获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获 ...
- js中的json操作
js中的json操作 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScr ...
随机推荐
- javaweb作業中的幾個要點
1.DDoS攻击原理DDoS是指分布式拒绝服务(Distributed Denial of Service):试图通过恶意请求使系统或者网络超载进而无法继续提供服务.对于一个网站来说,这意味着,该网站 ...
- 如何使用Android中的OpenGL ES媒体效果
引自:http://www.2cto.com/kf/201506/404366.html Android的媒体效果框架允许开发者可以很容易的应用多种令人印象深刻的视觉效果到照片或视频之上.作为这个媒体 ...
- Opencv基础知识-----视频的读取和操作
Opencv读取视频代码 #include "stdafx.h" #include"highgui.h" int main(int argc,char* a ...
- Tinyxml封装类COperatorXml
OperatorXml.h头文件 #ifndef _OPERATOR_XML_H_ #define _OPERATOR_XML_H_ #include <string> class TiX ...
- Python实现删除目录下相同文件
让我们来分析一下这个问题:首先,文件个数非常多,手工查找是不现实的,再说,单凭我们肉眼,在几千张图片或文件里面找到完全相同的难度也是很大的.所以要用程序实现.那么用程序怎么实现呢?根据什么判断两个文件 ...
- 报错：error C2229: class ' ' has an illegal zero-sized array 引发的思考
问题:
- Chapter 1 First Sight——13
It was just drizzling still, not enough to soak me through immediately as I reached for the house ke ...
- 提升html5的性能体验系列之一避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- HDU 5215 BestCoder"杯中国大学生程序设计冠军赛” 边双连通分量取出子图+二分染色判图内奇偶环
Cycle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total Sub ...
- 关于文件读写IDL
1.打开文件 IDL从磁盘上的文件读写数据,必须首先把一盒逻辑设备号连接到一个指定的文件,然后进行文件操作,如打开,关闭和读取等.IDL中的逻辑设备号的范围是-2——128,其中1-99是用户可以任意 ...