js实现iframe跨页面调用函数的方法

最新推荐文章于 2020-12-10 19:14:10 发布

chenqianggang

最新推荐文章于 2020-12-10 19:14:10 发布

阅读量3k

点赞数

分类专栏：其他

其他专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这篇文章主要介绍了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="调用本页面函数" οnclick="parent_click();" />

　　<input type="button" value="调用子页面函数" οnclick='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="调用父页面函数" οnclick='parent.window.parent_click();' />

　　<input type="button" value="调用本页面函数" οnclick="child_click();" />

　　</body>

　　</html>

chenqianggang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现iframe跨页面调用函数的方法

这篇文章主要介绍了js实现iframe跨页面调用函数的方法,实例展示了iframe中父页面调用子页面和子页面调用父页面的实现技巧,非常具有实用价值,需要的朋友可以参考下　　本文实例讲述了js实现iframe跨页面调用函数的方法。分享给大家供大家参考。具体实现方法如下：　　在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数
复制链接

扫一扫