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();
是不是非常简单呢
JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法的更多相关文章
- 跨域获取json数据
原文地址:http://my.oschina.net/LinBandit/blog/34570 前阵子做了一个前端动态加载json数据的应用,其中使用xmlhttprequest动态加载js,但是 ...
- 利用location.hash+iframe跨域获取数据详解
前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- 再也不学AJAX了！（三）跨域获取资源 ① - 同源策略
我们之前提到过,AJAX技术使开发者能够专注于互联网中数据的传输,而不再拘泥于数据传输的载体.通过AJAX技术,我们获取数据的方式变得更加灵活,可控和优雅. 但是AJAX技术并不是一把万能钥匙,互联网 ...
- jsonp跨域获取数据实现百度搜索
本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...
- 跨域获取json一些理解[腾讯电商数据的拉取方式]
如何跨域获取json数据源?我们都知道要有callback,具体callback是如何工作的呢?如果服务器端不接收callback,我们是不是就没有办法处理了呢?读完本文后相信你会有一个大体的了解. ...
- jQuery之ajax的跨域获取数据
如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...
- ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...
随机推荐
- scrapy暂停和重启，及url去重原理,telenet简单使用
一.scrapy暂停与重启 1.要暂停,就要保留一些中间信息,以便重启读取中间信息并从当前位置继续爬取,则需要一个目录存放中间信息: scrapy crawl spider_name -s JOBDI ...
- sed 双引号 单引号的区别
a="abcd" b="abc" sed -i '/$a/ s/$/$b/' test.a 我想在test.a中匹配以”abcd“开头的行,然后在行尾加入”ab ...
- Java多线程2：线程的使用及其生命周期
一.线程的使用方式 1.继承Thread类,重写父类的run()方法 优点:实现简单,只需实例化继承类的实例,即可使用线程 缺点:扩展性不足,Java是单继承的语言,如果一个类已经继承了其他类,就无法 ...
- jdbc 接口的用法 Statement和PreparedStatement的区别！
package cn.zhouzhou; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Resu ...
- 五、compose 部署 GitLab 应用
1.我们部署的是sameersbn/docker-gitlab这个镜像. docker pull sameersbn/gitlab 2.配置文件,我们不需要去run它,只需要先下载一个compose的 ...
- linux寻找依赖文件
在linux下编译安装软件有时候会遇到依赖文件找不到的情况,很多时候可以通过 sudo apt install -f 来解决:实在找不到怎么办,还有一个绝招可以用: 安装 apt-file sudo ...
- Jenkins+PowerShell持续集成环境搭建(三)Web项目
1. 新建一个名字为HelloWorld.Web的Freesyle项目: 2. 配置源码管理: 3. 编译配置: 版本:选择MSBuild4 文件:D:\CI\Config\HelloWorld.We ...
- 当考虑到并发问题时候,我们需要将给表插入id的代码挪到service中,目的是将其放到一个事务中,保准事务的一致性
- Nginx split_client模块
一般用户AB测试根据比例调用指定的接口 默认编译进nginx Syntax: split_clients string $variable { ... } Default: — Context: h ...
- 修改iptables后重启返回错误
在防火墙添加规则后我是这样改的vi /etc/sysconfig/iptables -A INPUT -m state --state NEW -m tcp -p tcp --dport 21 -j ...