js实现iframe跨页面调用函数的方法
更新时间：2014年12月13日 11:55:35 投稿：shichen2014
这篇文章主要介绍了js实现iframe跨页面调用函数的方法,实例展示了iframe中父页面调用子页面和子页面调用父页面的实现技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了js实现iframe跨页面调用函数的方法。分享给大家供大家参考。具体实现方法如下：
在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数。比如说：现在有两个页面parent.html和child.html。其中parent.html中含有IFrame并且IFrame指向child.html。现在需要在parent.html/child.html中调用child.html/parent.html的一个js方法。
具体的代码实现如下：
parent.html父页面：
复制代码 代码如下:
<html>
<head>
<script type="text/javascript">
function parent_click(){
alert("来自父页面");
}
</script>
</head>
<body>
<input type="button" value="调用本页面函数" onclick="parent_click();" />
<input type="button" value="调用子页面函数" onclick='window.frames["childPage"].child_click();' />
<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
</body>
</html>
<head>
<script type="text/javascript">
function parent_click(){
alert("来自父页面");
}
</script>
</head>
<body>
<input type="button" value="调用本页面函数" onclick="parent_click();" />
<input type="button" value="调用子页面函数" onclick='window.frames["childPage"].child_click();' />
<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
</body>
</html>
child.html子页面：
复制代码 代码如下:
<html>
<head>
<script type="text/javascript">
function child_click(){
alert("调用的子页面函数");
}
</script>
</head>
<body>
<input type="button" value="调用父页面函数" onclick='parent.window.parent_click();' />
<input type="button" value="调用本页面函数" onclick="child_click();" />
</body>
</html>
<head>
<script type="text/javascript">
function child_click(){
alert("调用的子页面函数");
}
</script>
</head>
<body>
<input type="button" value="调用父页面函数" onclick='parent.window.parent_click();' />
<input type="button" value="调用本页面函数" onclick="child_click();" />
</body>
</html>
希望本文所述对大家基于javascript的web程序设计有所帮助。
相关文章
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
这篇文章主要介绍了Bootstrap编写一个兼容IE8、谷歌等主流浏览器的受众巨幕式风格页面，感兴趣的小伙伴们可以参考一下2016-07-07
使用TypeScript实现一个类型安全的EventBus示例详解
EventBus是工作中常用的工具,本文用Typescript实现一个具备基础功能且类型安全的EventBus，是我近期学习Typescript的知识总结，对TypeScript实现EventBus相关知识感兴趣的朋友一起看看吧2022-06-06
这篇文章主要介绍了JS函数基本定义与用法,结合实例形式分析了JavaScript函数基本定义、参数、返回值等相关使用技巧,需要的朋友可以参考下2020-01-01
这篇文章主要为大家详细介绍了layui表格数据重载，根据条件查询，监听按钮事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
JS 中的类Public,Private 和 Protected详解
这篇文章主要介绍了JS中的类Public,Private和Protected详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章主要介绍了uniapp通过调用百度语音，实现录音转文字的功能。文中的示例代码对我们学习或工作有一定的帮助，感兴趣的小伙伴可以跟随小编学习一下2021-12-12
这篇文章主要给大家介绍了关于three.js中文文档学习之通过模块导入的相关资料，文中通过示例代码介绍的非常详细，对大家学习或使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
驱动事件的addEvent.js代码...2007-03-03
下面小编就为大家带来一篇js前端实现多图图片上传预览的两个方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
本文详细介绍了如何正确的加载和执行JavaScript代码，从而提高其在浏览器中的性能。对JavaScript学习者很有帮助，有需要的可以参考学习。2016-08-08
最新评论