Javscript调用iframe框架页面中函数的方法


Posted in Javascript onNovember 01, 2014

本文实例讲述了在Javscript调用iframe框架页面中函数的方法,这个调用方法其实非常的简单,有了这个方法我们就可以实现iframe之间传值或修改值了,操作起来都非常的简单。分享给大家供大家参考。具体实现方法如下:

访问iframe里面的函数:

document.getElementById('commentIframe').contentWindow.hasLogined();

commentIframe为iframe的id.
要在 window.onload里面执行

例子如下:

1.html

<a href="#" onclick="window.frames['frame1'].MyNext()">aa</a>

<iframe id="frame1" src="2.html" ></iframe>

2.html 页面
<script language="javascript" type="text/javascript">

 function MyNext()

 {

   alert(1);

 }

</script>

在1.htm中点击test按钮,可以使2.htm(iframe页面)中mybutton按钮失效.就这么简单,呵呵.如果要调用2.htm中的JS函数这样写:

self.frames['a'].funtionname(param)

在1.htm中调用2.htm中的JS函数:iframe2.showInfo();

例子说明:

假设有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:

<html> 

<head> 

<script type="text/javascript"> 

function ff(){ 

alert(">>this is index's js function  index.html"); 

} 

</script> 

</head> 

<body> 

<div style="background: lightblue;"> 

This is index page. 

<input type="button" value="run index's function" onclick="ff();" /> 

<input type="button" value="run inner page's function" onclick='window.frames["childPage"].sonff();' /> 

</div> 

<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe> 

</body> 

</html>

inner.html:

<html> 

<head> 

<script type="text/javascript"> 

function sonff(){ 

alert(">>this is inner page's js function"); 

} 

</script> 

</head> 

<body> 

<div style="background: lightgreen;"> 

This is inner page. 

<input type="button" value="run index's function" onclick='parent.window.ff();' /> 

<input type="button" value="run inner page's function" onclick="sonff();" /> 

</div> 

</body> 

</html>

希望本文所述对大家基于javascript的web程序设计有所帮助。

Javascript 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 #Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 #Javascript
js实现按钮加背景图片常用方法
Nov 01 #Javascript
js实现网页随机切换背景图片的方法
Nov 01 #Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 #Javascript
一个检测表单数据的JavaScript实例
Oct 31 #Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 #Javascript
You might like
php随机抽奖实例分析
2015/03/04 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
总结对比php中的多种序列化
2016/08/28 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
详解vue 图片上传功能
2019/04/30 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python中input与raw_input 之间的比较
2017/08/20 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Django的CVB实例详解
2020/02/10 Python
Django数据库操作之save与update的使用
2020/04/01 Python
基于python实现操作redis及消息队列
2020/08/27 Python
python 多线程中join()的作用
2020/10/29 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
应届毕业生自荐信
2014/05/28 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android