码迷,mamicode.com
首页 > Web开发 > 详细

JS中获取和操作iframe

时间:2015-12-16 15:33:23      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:

一、需求与遇到的问题

  在网站的后台管理中使用了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

标签:

原文地址:http://www.cnblogs.com/niceofday/p/5051238.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!