JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法

今天做了一个frameset的集合页面，其中有多个iframe页面，其中点击frame=leftMenu里的按钮元素后，需要修改frame=Header页面里的一个div元素属性。

1、主页面架构

</frameset>

</frameset>

</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信息方能实现. 此处手札供后人参 ...

随机推荐

Entity Framework 6 自定义连接字符串ConnectionString连接MySQL
在开始介绍之前,首先来看看官方对Entity Framework的解释:Entity Framework (EF) is an object-relational mapper that enable ...
python设计模式第九天【策略模式】
1. 定义对一系列算法进行封装,为所有算法定义一个抽象的算法接口,可以平滑的进行算法切换 2. 策略模式的UML图 3.代码实现 #!/usr/bin/env python #! _*_ codin ...
wget 下载网页
如有转载,不胜荣幸.http://www.cnblogs.com/aaron-agu/ wget --http-user=username --http-passwd=password http:/w ...
faster rcnn讲解很细
https://blog.csdn.net/bailufeiyan/article/details/50749694 https://www.cnblogs.com/dudumiaomiao/p/65 ...
当进行数据查询时候要考虑创建一个model ;具备传入与输出的字段
当进行数据查询时候要考虑创建一个model ;具备传入与输出的字段
React 学习(三) ---- state 和事件处理函数
在上两节中,我们讲述了props, 组件使用props进行渲染,但是这是一次性的, props渲染完成之后就不做任何事情了,但是现实中却不是这样的,当我们点击购物车上的加减按钮时,数量会自动加1或减1 ...
Jquery中val方法使用的坑
Jquery中val方法使用 val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox.多选selec ...
python----re正则模块详解
今天介绍一下Python中常用的正则表达式处理函数.Python的正则表达式主要有两种方法完成模式匹配:『搜索』和『匹配』 re.match re.match 尝试从字符串的开始全部或者部分匹配某个模 ...
BZOJ5203 [NEERC2017 Northern] Grand Test 【dfs树】【构造】
题目分析: 首先观察可知这是一个无向图,那么我们构建出它的dfs树.由于无向图的性质我们可以知道它的dfs树只有返祖边.考虑下面这样一个结论. 结论:若一个点的子树中(包含自己)有两个点有到它祖先的返 ...
洛谷P1118数字三角形题解
题目这个题我们乍一看会有些熟悉.觉得是可以用DP来做的那个题.但是打眼一看,就会发现不对了.因为那个题是顺推而这个题则是逆推. 这样的话可怎么办呢. 我们可以在草稿纸上推一下,我们随便写个数n. 再 ...

JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法

JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法的更多相关文章

随机推荐

热门专题