JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法
今天做了一个frameset的集合页面，其中有多个iframe页面，其中点击frame=leftMenu里的按钮元素后，需要修改frame=Header页面里的一个div元素属性。
1、主页面架构
<html> <head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content=" width= device-width, height=device-height,user-scalable=no,initial-scale=1.0"/>
<script type="text/javascript" src="<%=basePath %>js/jquery-1.9.1.min.js"></script>
<frameset rows="104,*,0" frameborder="no" border="0" framespacing="0">
<frame src="${pageContext.request.contextPath }/loginController/header" name="Header" frameborder="0" scrolling="NO" noresize marginwidth="0" marginheight="0">
<frameset cols="262,*" frameborder="no" border="0" framespacing="0">
<frame src="${pageContext.request.contextPath }/loginController/toLeft" name="leftMenu" frameborder="0" scrolling="NO" noresize marginwidth="0" marginheight="0">
<frame src="${pageContext.request.contextPath }/loginController/toCenter" name="middleFrame" frameborder="0" scrolling="NO" noresize marginwidth="0" marginheight="0" id="centerId">
</frameset>
<frame src="/" name="Footer" frameborder="0" scrolling="no" noresize>
</frameset>
<noframes>
</head>
<body>
</body>
</html>
2、javascript代码写在leftMenu页面中
function reQueryMenu(){
//获取header页面中需要修改的div元素
var headerMenuDiv=$(parent.frames['Header'].document.getElementById('helpDiv'));
//获取该div下所有li元素
var menuLi=headerMenuDiv.find("li");
//为第二个li元素添加hover的样式
menuLi.eq(1).addClass("hover");
}
3、主要代码就是parent.frames['Header']，这个方法能获取到那么是Header的frame页面，然后可以写任何你想获取的元素了
4、leftMenu页面调用Header页面方法.
leftMenu页面需要调用Header页面的yourFunName()方法时，可以执行以下脚本：
self.parent.frames["Header"].yourFuncName();
是不是非常简单呢
