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 ...
随机推荐
- Guess the Array
Guess the Array time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- python顶级执行代码
只有主程序中由大量顶级执行代码(即没有被缩进的代码行),所有其他被导入的模块只应该又很少的顶级执行代码. 如果模块是被导入,__name__就是模块名. 如果模块是被直接执行,__name__就是__ ...
- c# 获取客户端ip
针对 HttpContext.Current.Request.UserHostAddress 如果客户使用的是代理,将获取不到真是的ip 要想透过代理服务器取得客户端的真实IP地址,就要使用 Requ ...
- Linux学习 -- 用户和用户组管理
1 用户配置文件 1.1 用户信息文件 /etc/passwd 查看帮助 man 5 passwd -- account:password:UID:GID:GECOS:directory:shell ...
- PAT (Advanced Level) 1115. Counting Nodes in a BST (30)
简单题.统计一下即可. #include<cstdio> #include<cstring> #include<cmath> #include<vector& ...
- Stem Cell 华人科学家
Jianping Fu 密歇根大学机械工程系生物医学工程专业 PhD, Massachusetts Institute of Technology, 2007MS, University of Cal ...
- 【转】PHP代码审计
PHP代码审计 目录 1. 概述3 2. 输入验证和输出显示3 2.1 命令注入4 2.2 跨站脚本4 2.3 文件包含5 2.4 代码注入5 2.5 SQL注入6 2.6 XPath注入6 2.7 ...
- Cacti安装详细步骤（转）
一.cacti概述 1. cacti是用php语言实现的一个软件,它的主要功能是用snmp服务获取数据,然后用rrdtool储存和更新数据,当用户需要查看数据的时候用rrdtool生成图表呈现给用户. ...
- Integer自动装箱拆箱bug,创建对象在-128到127
1 public class Demo3 { public static void main(String[] args) { Integer a = 1; Integer b = 2; Intege ...
- oracle有三个默认的用户名和密码,但是都无法登录的解决方法
system/change_on_install, system/manager是较旧版的预设密码, 在安装较新版时会提示你设定密码, 若没有或忘了设定, 请参考以下重设: sqlplus / as ...