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

        是不是非常简单呢

  • 相关阅读:
    P4556 [Vani有约会]雨天的尾巴 /【模板】线段树合并
    HDU 5649 DZY Loves Sorting
    SpringBoot中控制器如何接纳前台传来的含列表数据
    【Oracle】更改Oracle用户的密码
    运行期建立HikariDataSource和JdbcTemplate
    linux下nginx重启
    kubernetes认证授权机制
    linux中sed如何替换换行符 top p `ps aux | grep "Ali" | egrep v "grep|PID" | awk F'[ ]+' '{print $2}'|sed ":a;N;s/\n/,/g;ta" `
    kubelet使用了一个Node Allocatable
    k8s 证书 ca apiserver etcd kubeproxy kubeletclent
  • 原文地址:https://www.cnblogs.com/DylanZ/p/6112810.html
Copyright © 2020-2023  润新知