引入:
在项目开发一个小的控件,加载了很多数据,每次使用这个控件都要请求后台动态加载数据,这样可以将数据在登陆的时候就放在Javascript定义的全局变量中,再从这里取,这样就会用到父页面和iframe子页面的交互。
页面原型:
jsonBranchData
<script type="text/javascript">
var jsonBranchData;
$(function(){
$.ajax({
type:'GET',
url:CONTEXT_PATH+'/sysConfig.do?action=jsonBranchInfo',
dataType:'json',
success:function(data){
jsonBranchData = data;
}
});
});
function test(){alert(1111);}
</script>
<!--载入内容区-->
<div class="main" style="overflow: hidden;">
<input type="text" id = "st">
<iframe style="border-left: 0px;margin-left: 0px;padding-left: 0px;" name="main_area" frameborder="0" src="${pageContext.request.contextPath }/pageHome.jsp"></iframe>
</div>
子页面获取父页面的javascript全局变量:
在pageHome.jsp想要获取 jsonBranchData,可以使用 window.parent.jsonBranchData, 注意这个获取的是父页面的全局变量
子页面获取父页面的js对象:
window.parent.document.getElementById('st') 或者 $("#st",window.parent.document)
子页面获取父页面的方法
window.parent.parentMethod(); 例如 window.parent.test()
下面的这些都没有测试过,暂且记下 ,转载http://www.cnblogs.com/Capricorn-HCL/articles/4216302.html
父页面获取子页面的元素
document.getElementById('iframeId').contentDocument.getElementsByTagName('table');
contentDocument后可以使用document相关方法
var tet = document.getElementById('iframeId').contentWindow.document.getElementById("text_inputId");
alert(tet.value);
父页面获取子页面的js变量
这部分目前的解决方案是在父页面设置全局变量,在子页面进行修改后将子页面的变量赋值给父页面