今天做了一个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页面方法的更多相关文章

  1. 跨域获取json数据

    原文地址:http://my.oschina.net/LinBandit/blog/34570   前阵子做了一个前端动态加载json数据的应用,其中使用xmlhttprequest动态加载js,但是 ...

  2. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

  3. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  4. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  5. 再也不学AJAX了！（三）跨域获取资源 ① - 同源策略

    我们之前提到过,AJAX技术使开发者能够专注于互联网中数据的传输,而不再拘泥于数据传输的载体.通过AJAX技术,我们获取数据的方式变得更加灵活,可控和优雅. 但是AJAX技术并不是一把万能钥匙,互联网 ...

  6. jsonp跨域获取数据实现百度搜索

    本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...

  7. 跨域获取json一些理解[腾讯电商数据的拉取方式]

    如何跨域获取json数据源?我们都知道要有callback,具体callback是如何工作的呢?如果服务器端不接收callback,我们是不是就没有办法处理了呢?读完本文后相信你会有一个大体的了解. ...

  8. jQuery之ajax的跨域获取数据

    如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...

  9. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

随机推荐

  1. rsync: chgrp "/.hosts.NBCxBB" (in test) failed: Operation not permitted (1)

    #记一次rsync出现的错误(网上基本都是说权限问题) #这并不是权限的问题,应为实际的文件已经传过去了,但是rsync就是会报这个错误,(虽然使用是正常的,但是看着就是不爽) [root@local ...

  2. python time模块介绍(日期格式化 时间戳)

    import time # 1.time.time() 用于获取当前时间的时间戳, ticks = time.time() print(ticks) # 1545617668.8195682 浮点数 ...

  3. Lodop获取全部JS代码，传统JS模版的生成

    Lodop模版有两种方法,一种是传统的JS语句,可以用JS方法里的eval来执行,一种是文档式模版,是特殊格式的base64码,此篇博文介绍传统JS模版的生成方法.两种模版都可以存入一下地方进行调用, ...

  4. 官网下载旧版本jdk,老版本jdk,jdk1.7,jdk1.8

    1.进入中文oracle官网(不是国内官网下载速度超级慢): http://www.oracle.com/technetwork/cn/indexes/downloads/index.html 2.进 ...

  5. Linux 学习 (一) Linux简介

    Linux达人养成计划 I 学习笔记 Linux 内核官网:www.kernel.org 内核版本说明:主版本.次版本.末版本,如2.6.18 Linux 主要发行版本 RedHat: 服务器领域,部 ...

  6. Spring Boot 构建电商基础秒杀项目 (一) 项目搭建

    SpringBoot构建电商基础秒杀项目 学习笔记 Spring Boot 其实不是什么新的框架,它默认配置了很多框架的使用方式,就像 maven 整合了所有的 jar 包, Spring Boot ...

  7. 学习 Spring (九) 注解之 @Required, @Autowired, @Qualifier

    Spring入门篇 学习笔记 @Required @Required 注解适用于 bean 属性的 setter 方法 这个注解仅仅表示,受影响的 bean 属性必须在配置时被填充,通过在 bean ...

  8. python时间模块time

    时间模块 时间模块主要处理和时间相关的事件,我们可以通过模块获取不同数据类型的时间以便我们需求. 表现时间的三种方式: 在pythn中表现时间的方式主要有三种:时间戳(stamptime).元祖时间( ...

  9. win10安装MySql 5.7.23

    下载安装 因为Django2.1不再支持MySQL5.5,这里需要重新安装一下MySQL 首先去官网下载 这里使用的是msi版本 https://dev.mysql.com/downloads/win ...

  10. ☆ [POJ2559] Largest Rectangle in a Histogram 「单调栈」

    类型:单调栈 传送门:>Here< 题意:给出若干宽度相同的矩形的高度(条形统计图),求最大子矩形面积 解题思路 单调栈的经典题 显然,最终的子矩形高度一定和某一个矩形相等(反证).因此一 ...