博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法
阅读量:6602 次
发布时间:2019-06-24

本文共 1645 字,大约阅读时间需要 5 分钟。

     今天做了一个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

你可能感兴趣的文章
Android ContentProvider调用报错"Bad call:..."及相关Binder权限问题分析
查看>>
你真的会用strong-weak dance吗?
查看>>
ionic3 教程(二)登录页制作
查看>>
Python正则表达式初识(四)
查看>>
C++课大作业 魔兽世界Part 2
查看>>
不明恶意攻击致<搜狗搜索><搜索结果>跳转<百度搜索>技术原理分析
查看>>
Java并发系列—工具类:CyclicBarrier
查看>>
不务正业的前端之SSO(单点登录)实践
查看>>
linux 远程gui管理 webmin
查看>>
CUDA学习(八十七)
查看>>
VR产业转移线下发力 移动VR体验馆落户北京国美
查看>>
mysql回收用户权限
查看>>
Android之Adapter用法总结
查看>>
Windows server 2012安装.NET 3.5
查看>>
UIWebview与js交互[转]
查看>>
swift:高级运算符(位运算符、溢出运算符、优先级和结合性、运算符重载函数)...
查看>>
安卓-PC-Arduino3方通信实现
查看>>
ASP.NET MVC5+EF6+EasyUI 后台管理系统(7)-MVC与EasyUI DataGrid
查看>>
swift3.0:sqlite3的使用
查看>>
【web JSP basePath】basePath的含义
查看>>