Js操纵iframe中Dom以及iframe子页面中Js操纵父页面Dom

做后台管理系统一般都会用到框架，而框架又有iframe、frameset两种方式，后者较为老旧，而且Js相互操纵也不是很顺溜，故而鄙人偏向于使用iframe方式解决框架布局问题。以下是后台管理系统的框架父页面代码结构，为了便于说明，假设该父页面文件名称为index.php，同时父页面中的iframe引用页面也简化，即iframe.php文件。

另：因后台管理系统引入的iframe页面是同一主机下的页面，不会牵涉到跨域问题。关于跨域问题，以后遇到再专门介绍。

index.php代码结构

<!DOCTYPE html>
<!--[if lte IE 6 ]> <html class="ie ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9" lang="zh-CN"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-CN"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<title>Demo</title>
<meta name="author" content="Jea Yang https://blog.jjonline.cn"/>
<meta name="description" content="Demo"/>
<meta name="keywords" content="Demo"/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="./Public/Style/reset.css"/>
<link rel="stylesheet" href="./Public/Style/View.css"/>
<script type="text/javascript" src="./Public/Js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="./Public/Js/jlib-1.0.min.js"></script>
<script type="text/javascript" src="./Public/Js/autowrap.min.js"></script>
<!--[if lt IE 9]>
<script src="./Public/Js/html5.js"></script>
<script src="./Public/Js/lte-ie8.js"></script>
<![endif]-->
</head>
<body>
<div class="lock">
 <div class="unlock">
 <h4 class="locktips">锁屏状态，请输入密码解锁</h4>
 <p>
 <label>密码：</label>
 <input type="password" name="lockPass" size="20" class="lockPass">
 <input type="submit" class="lockSub" value=" ">
 </p>
 </div>
</div>
<div class="cos clearfix">
<div class="iframecontent">
<iframe name="framecontent" id="framecontent" frameborder="false" scrolling="auto" allowtransparency="true" src="iframe.php"></iframe>
</div>
</div>
<footer class="footer">
 <p></p>
</footer>
</body>
</html>

目前有这样一个需求，在index.php中添加了一个tooltips组件，也就是全局可用的弹出层提示框，而在iframe中要能操作这个tooltips组件，进行友好交互，这就涉及到框架页面之间的数据交换与js通信了。

tooltips是在index.php父页面中的js组件，而调用这个全局组件经常是在iframe子页面中进行，这就涉及到iframe中的js读取父页面中的Dom元素的问题；同时又有这种情况：父页面中的某些js代码需要检测iframe以及iframe中的Dom情况，总结成两种情况：

一、父页面中Js读取或调用iframe中的Dom或js代码段

二、iframe子页面中的Js调用父页面中的Dom或js代码段

另外，由于chrome与IE关于iframe相互操作需要兼容，故而父页面中iframe标签写法得如上方代码所示，带上id与name属性，且命名一致；上述html代码段中的的id与name均为iframecontent

/*父窗口调用iframe子窗口中的Dom 本例也就是index.php页面中的js读取iframe.php中的id为demoID的Dom元素*/
var Obj = window.frames["iframecontent"].document.getElementById("demoID");
/*子窗口调用父窗口中的Dom 本例也就是iframe.php中的js读取index.php中的id为parentdemoID的Dom元素*/
var Obj1 = parent.document.getElementById("parentdemoID");

/*因为采用原生js代码书写，获得的是Dom元素对象，若需要使用jQuery，则书写如下*/

$(Obj);
$(Obj1);

/*接下来的代码就可以按照jQuery的书写方式进行了*/

/*示例1：假设demoID为一个input元素的id，读取该input中输入的内容代码如下*/
var inputText = $(Obj).val();

/*示例2：建设parentdemoID为一个div元素的id，需要对它进行动画操作，则代码如下*/
$(Obj1).animate();