JS中获取和操作iframe

最新推荐文章于 2022-12-16 16:39:08 发布

weixin_30435261

最新推荐文章于 2022-12-16 16:39:08 发布

阅读量157

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/niceofday/p/5051238.html

版权

一、需求与遇到的问题

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

转载于:https://www.cnblogs.com/niceofday/p/5051238.html

weixin_30435261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中获取和操作iframe

一、需求与遇到的问题　　在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。　　我的思路是：在顶部的菜单页面放一个不可见的“退出”链接，当用户点击位于iframe中的主页面（mainPage.htm）中的按钮时，在顶部菜单页面的右侧显示“退出”。　　我现在遇到的问题是：如何在页...
复制链接

扫一扫