您的位置:晶晶的博客>前端>Js操纵iframe中Dom以及iframe子页面中Js操纵父页面Dom

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 http://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();
转载请注明本文标题和链接:《Js操纵iframe中Dom以及iframe子页面中Js操纵父页面Dom

相关推荐

网友评论抢沙发

路人甲 表情
Ctrl+Enter快速提交