一、jquery 父、子页面之间页面元素的获取,方法的调用:
1. 父页面获取子页面元素:
格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();
实例:$("#ifm").contents().find("#iBtnOk").click(); // ifm 为 <iframe> 标签 id; iBtnOk 为子页面按钮 id
2. 父页面调用子页面方法:
格式:$("#iframe的ID")[0].contentWindow.iframe方法();
实例:$("#ifm")[0].contentWindow().iClick(); // ifm 为 <iframe> 标签 id; iClick为子页面 js 方法
3. 子页面获取父页面元素:
格式:$("#父页面元素id" , parent.document);
实例:$("#pBtnOk" , parent.document).click(); // pBtnOk 为父页面标签 id
二、原生 js 父页面元素的获取,方法的调用:
1. 子页面调用父页面方法:
格式:parent.父页面方法
实例:parent.pClick(); // pClick 为父页面 js 方法
2. 子页面获取父页面元素:
格式:window.parent.document.getElementById("父窗口元素ID");
实例:window.parent.document.getElementById("pBtnOk");// pBtnOk为父页面标签 id
(1)以上是在网上找出来的代码,实战中也有使用到,项目中做的后台系统使用了模板,其中就遇到了父页面中的iframe页面无法取到父页面的值,于是用上面的方法获取到了父页面的值看代码:
上面这张图是我获取父页面一个a标签的文本,这个代码是写在子页面的js中,在父页面中添加了子页面的js:
<script type="text/javascript" src="<%=basePath %>/Backstage/houtai_js/coverImg.js"></script>
(2)使用后台模板遇到无法将子页面取到的值显示在弹出的页面上的问题,看示例代码:
第一个框是我点击table一行中的编辑,进行修改,获取的是点击的那行的数据 ;
接着要显示在弹出的窗口上,这是遇到的问题就是不能直接用弹出页面的$(".name").val(cname);赋值,赋值了弹出的页面也接收不到,不会显示,alert($(".name").val(cname);)不会有反应,或者未定义,为了解决这个问题我走了很多弯路,在网上找的答案也是不知道他们写的啥,要么没有用,要么复杂看不懂,像我这种菜鸟只能抓头,好不容易找了解决方法,比如第二个框的代码,这样才能取到弹出页面的属性id,才能将值赋给它:
cids.attr("value", curl);的意思是通过这个id找到这个标签的属性value,将curl这个已经取到的值赋给它,这样弹出页面就能显示取到的数据了。