zoukankan      html  css  js  c++  java

  • 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）

    View Code 
     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）

    View Code 
     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）

    View Code 
     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）

    View Code 
     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）

    View Code 
     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>

    　　参考资料：http://wenku.baidu.com/view/76d53a7b168884868762d6cb.html

    　　　　　　   http://www.w3school.com.cn/htmldom/dom_obj_window.asp
  • 相关阅读:
    基于Hadoop的数据仓库Hive
    hadoop课堂测试之数据清洗
    实验6：Mapreduce实例——WordCount
    暑期--第五周
    暑期--第四周
    暑期--第三周
    暑期--第二周
    软件工程——个人课程总结
    周计划03（20201005-20201011）
    周计划02（20200928-20201004）
  • 原文地址：https://www.cnblogs.com/sunyunh/p/2687056.html
Copyright © 2011-2022 走看看