关于在使用iframe之后子页面中怎么在父级弹窗的有关问题的具体实现
关于在使用iframe之后子页面中如何在父级弹窗的问题的具体实现
原文地址:http://www.cnblogs.com/hxling/archive/2011/07/01/2095252.html
近期 在群中有一个网友总是在纠结这个问题,很多朋友也给出了解决方法,可能不是很深入而该网友的经验可能还差那么一点点。所以我决定为了摆脱其无休止的“纠缠”,就写了小例子给他,现在跟大家分享下,有遇到这种情况的朋友可以参考下,下面是具体实现过程 首先在首页也就是父页面中加一个空DIV容器。如:<div id="pwin"></div> 子页面中的内容如下: html: ? <input type='button' id="btna" value="在父级弹出窗口" > <div id="d" style="display:none;"> <input type="text" name=""><br> <input type="text" name=""> <input type="submit" value="提交"> </div> js: ? var $parent = self.parent.$; $(function(){ $('#btna').click(function(){ $parent('#pwin').window({ modal:true, width:300, height:200, content:$('#d').html(), title:'父级窗口' }); }) }) 到这里就结束了,简单吧,其实大家在做时候会发现,如果页面中要操作的表单很多,这样页面中就会出现很隐藏的DIV,页面看起来很零乱,所以大家可以表单中的HTML放单独的HTML文件中,利用window的href属性加载表单,这样一来,页面就清晰很多了,大至代码会像下面这样: ? var $parent = self.parent.$; $(function(){ $('#btna').click(function(){ $parent('#pwin').window({ modal:true, width:300, height:200, href:'xxxx.html', title:'父级窗口', onLoad:function(){ //在此加入表单初始化的相关代码。 } }); }) })
<script type="text/javascript">
var $parent = self.parent.$;
$(function(){
$('#btna').click(function(){
$parent('#pwin').empty();
$parent('#pwin').window({
modal:true,
width:300,
height:200,
href:'xxxx.html',
title:'父级窗口',
onLoad:function(){
//在此加入表单初始化的相关代码。
}
});
})
})
</script>
打开之前清空一下,就可以对 pwin 的复用了。