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 ...
随机推荐
- spring bean之间关系
ByeService.java package com.service; public class ByeService { public String sayBye() { return " ...
- 关于Spring的69个面试问答——终极列表
本文由 ImportNew - 人晓 翻译自 javacodegeeks.欢迎加入翻译小组.转载请见文末要求. 这篇文章总结了一些关于Spring框架的重要问题,这些问题都是你在面试或笔试过程中可能会 ...
- Food on the Plane
Food on the Plane time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- Swift 学习笔记 （二）
原创:转载请注明出处 41.闭包表达式语法(Closure Expression Syntax) 闭包表达式语法有如下一般形式: { (parameters) -> returnType in ...
- php薪资
2千的php程序员就是可以用cms,做一个小企业的门户网站. 3千的php程序员,可以自己写代码开发php软件,但是这样程序员写的代码非常混乱,通常只能写数千行代码的小软件,并且痛苦的完工. 4K的p ...
- Gson解析数据
package com.bwie.test;import java.io.BufferedReader;import java.io.IOException;import java.io.InputS ...
- Base64笔记
1. 昨天的<MIME笔记>中提到,MIME主要使用两种编码转换方式----Quoted-printable和Base64----将8位的非英语字符转化为7位的ASCII字符. 虽然这样的 ...
- sphinx multi valued filter
publn_date is multi-valued <?php ini_set('memory_limit', '-1'); ini_set('max_execution_time', '10 ...
- 看详细的tomcat报错信息
WEB-INF/classes目录下新建一个文件叫logging.properties handlers = org.apache.juli.FileHandler, java.util.loggin ...
- hihocoder网络流一·Ford-Fulkerson算法
网络流一·Ford-Fulkerson算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho住在P市,P市是一个很大很大的城市,所以也面临着一个大城市都会遇 ...