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();

 

    是不是非常簡單呢

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM