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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
javascript基本算法汇总
Mar 09 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
微信小程序用canvas画图并分享
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+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
JQuery for与each性能比较分析
2013/05/14 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
javascript读写json示例
2014/04/11 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Python猴子补丁知识点总结
2020/01/05 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
python获取整个网页源码的方法
2020/08/03 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
四年级科学教学反思
2014/02/10 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
redis lua限流算法实现示例
2022/07/15 Redis