父页面和iframe子页面变量的交互

引入:

在项目开发一个小的控件，加载了很多数据，每次使用这个控件都要请求后台动态加载数据，这样可以将数据在登陆的时候就放在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变量

这部分目前的解决方案是在父页面设置全局变量，在子页面进行修改后将子页面的变量赋值给父页面