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事件
Dec 29 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
html实现随机点名器的示例代码
Apr 02 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安全配置方法
2007/06/16 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
Python底层封装实现方法详解
2020/01/22 Python
python实现图片转字符画的完整代码
2021/02/21 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
企业诚信承诺书
2014/05/23 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
员工手册董事长致辞
2015/07/29 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
导游词之崇武古城
2019/10/07 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫