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 相关文章推荐
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
Angular2库初探
Mar 01 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
python实现三次样条插值
2018/12/17 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python3实现二叉树的最大深度
2019/09/30 Python
浅析python redis的连接及相关操作
2019/11/07 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
开业庆典答谢词
2014/01/18 职场文书
经营理念标语
2014/06/21 职场文书
教师工作决心书
2015/02/04 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书