javascript
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();
?
??? 是不是非常簡單呢
?
轉載于:https://www.cnblogs.com/DylanZ/p/6112810.html
總結
以上是生活随笔為你收集整理的JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: AC日记——字符替换 openjudge
- 下一篇: 安装phpstudy之后发现80端口被占