调用iframe中父页面/子页面中的JavaScript方法
今天做公司的内部流程系统,发现一问题。怎么调用iframe外面的方法呢?于是百度了一下,呵呵,把搜索结果摘抄下来。
转自:http://hi.baidu.com/zh_m_zhou/blog/item/e79d56d4daa2eecd50da4b24.html
作者:pocky
说明:假设有2个页面,index.html和inner.html。其中index.html中有一个iframe,这个iframe的src指向inner.html。
我们现在要做的就是:
1.在index.html中调用inner.html上的一个js方法
2.在inner.html中调用index.html上的一个js方法
实现代码如下:
index.html
1.<html>
2.<head>
3.<script type="text/javascript">
4.function ff(){
5.alert(">>this is index's js function");
6.}
7.</script>
8.</head>
9.<body>
10.<div style="background: lightblue;">
11.This is index page.
12.<input type="button" value="run index's function" onclick="ff();" />
13.<input type="button" value="run inner page's function" onclick='window.frames["childPage"].ff();' />
14.</div>
15.<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
16.</body>
17.</html>
inner.html
1.<html>
2.<head>
3.<script type="text/javascript">
4.function ff(){
5.alert(">>this is inner page's js function");
6.}
7.</script>
8.</head>
9.<body>
10.<div style="background: lightgreen;">
11.This is inner page.
12.<input type="button" value="run index's function" onclick='parent.window.ff();' />
13.<input type="button" value="run inner page's function" onclick="ff();" />
14.</div>
15.</body>
16.</html>
调用iframe中父页面/子页面中的JavaScript方法的更多相关文章
- Jquery中父,子页面之间元素获取及方法调用
一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...
- javascript中父、子页面间调用
本文主要转自:http://www.360doc.com/content/11/0525/17/6161903_119333834.shtml http://zh ...
- iframe获取父、子窗口的元素和方法
原文地址:https://www.cnblogs.com/BlingSun/p/7484237.html jQuery.js调用iframe父窗口与子窗口元素的方法(亲测有效) 子页面获取父页面的id ...
- 转:jquery 父、子页面之间页面元素的获取,方法的调用
一.jQuery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...
- jquery 父、子页面之间页面元素的获取,方法的调用
一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...
- 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据
利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...
- js 两个页面的传值 可以用父页面 子页面做
js 两个页面的传值 可以用父页面 子页面做 比如弹窗 将值传到子页面的时候 用get超长
- bootstrap在iframe框架中实现由子页面在顶级页面打开模态框(modal)
我需要完成的效果: 1.在顶级页面打开模态框,并且遮罩层也要再顶级页面 2.单击遮罩层部分,模态框不关闭 问题描述: 不知为什么,可能是bootstrap前端框架添加遮罩层的一些问题.通过子页面在顶级 ...
- art.dialog.art 中,将子页面窗口中的值传递给父框架中
artDialog.open.origin.document.getElementById('父元素ID').value=document.getElementById('子页面元素ID').valu ...
随机推荐
- 免费下载:用于原型设计的 iOS 7 线框图
André Revin 使用 Illustrator 创建 iOS7 iPhone 5 的样机原型.这是一个像素完美的线框样机,可以帮助超级轻松的打造你的原型.你可以免费下载源文件,并在工作中使用. ...
- LeetCode——Find Median from Data Stream
Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...
- WCF回顾一、基本概念和应用场景
一.WCF描述 wcf是一款基于面向服务的架构的通讯框架平台,在分布式框架中得到了广泛使用. wcf入门非常简单,只要花几分钟就能编写一个完整的wcf程序,而实际上WCF是概念非常多的一门技术,需要花 ...
- UWP开发入门(十九)——10分钟学会在VS2015中使用Git
写程序必然需要版本控制,哪怕是个人项目也是必须的.我们在开发UWP APP的时候,VS2015默认提供了对微软TFS和Git的支持.考虑到现在Git很火,作为微软系的程序员也不得不学一点防身,以免被开 ...
- 一个关于explain出来为all的说明及优化
explain sql语句一个语句,得到如下结果,为什么已经创建了t_bill_invests.bid_id的索引,但却没有显示using index,而是显示all扫描方式呢,原来这还与select ...
- Spring应用——事务管理
事务基础:请参看:http://www.cnblogs.com/solverpeng/p/5720306.html 一.Spring 事务管理 1.前提:事务管理器 在使用 Spring 声明式事务管 ...
- MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页
系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (10) 数据查询页面 源码下载:点我下载 我工作的源码:http://www.jin ...
- LINQ TO XML 个人的一些心得1
最近没事做,刚来到一个新公司.写了一些处理xml的项目 就是把一些xml的数据处理后存储到数据库中.原本还是准备用原来的xml来写的.在群里有个人说,用linq to xml 好了,比较快捷.就看了 ...
- Servlet-中文乱码
背景 从Tomcat5.x开始,GET,POST方法提交信息,Tomcat采用不同的方式来处理编码. 对于GET请求,Tomcat不会考虑使用request.setCharacterEncoding( ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— WebAPI项目主体结构(四)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 5.0 WebAPI项目主体结构 5.1 总体结 ...