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

本文实例讲述了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>

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>

希望本文所述对大家基于javascript的web程序设计有所帮助。

时间: 2024-09-21 16:55:50

js实现iframe跨页面调用函数的方法_javascript技巧的相关文章

Javscript调用iframe框架页面中函数的方法_javascript技巧

本文实例讲述了在Javscript调用iframe框架页面中函数的方法,这个调用方法其实非常的简单,有了这个方法我们就可以实现iframe之间传值或修改值了,操作起来都非常的简单.分享给大家供大家参考.具体实现方法如下: 访问iframe里面的函数: 复制代码 代码如下: document.getElementById('commentIframe').contentWindow.hasLogined(); commentIframe为iframe的id. 要在 window.onload里面执

js检测iframe是否加载完成的方法_javascript技巧

本文实例讲述了js检测iframe是否加载完成的方法.分享给大家供大家参考,具体如下: 这里是继上一篇<js实现iframe框架取值的方法(兼容IE,firefox,chrome等)>的扩展应用: 应用场景:iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外,还没找到更有效的办法),但是有时候我们不知道这个iframe页面是否执行完毕,有没有办法判断iframe里的页面是否load完成了呢? iframe1.html: <html> &

JS判断iframe是否加载完成的方法_javascript技巧

本文实例讲述了JS判断iframe是否加载完成的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content=&qu

JavaScript中5种调用函数的方法_javascript技巧

这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! JavaScript,调用函数的5种方法 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的

JS中使用apply方法通过不同数量的参数调用函数的方法_javascript技巧

apply()方法定义 函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同. apply()方法接收两个参数,一个是对象,一个是参数数组. apply()作用 1.用于延长函数的作用域 示例: var color='red'; var o={color:'blue'}; function sayColor(){ console.log(this.color); } sayColor();//"red" sayColor.apply(o);//"blu

js关于getImageData跨域问题的解决方法_javascript技巧

在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): function createGSCanvas(img){ var canvas=document.createElement("canvas"); canvas.width=img.width; canvas.height=img.height; var ctx=canvas.getContext("2d"); ctx.dra

php中动态调用函数的方法_php技巧

本文实例讲述了php中动态调用函数的方法.分享给大家供大家参考.具体分析如下: php中你可以动态调用函数,分为以下步骤: 1. 定义一个函数 2. 将函数名(字符串)赋值给一个变量 3. 使用变量名代替函数名动态调用函数 详细代码如下所示: <?php function addition ($a, $b){ echo ($a + $b), "\n"; } $result = "addition"; $result (3,6); ?> 希望本文所述对大家

js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法_javascript技巧

重点是阻止默认的刷新,这样外部页面就不刷新了,然后指定刷新iframe,我下面给出了思路 document.onkeypress = function(e){ if(e.keyCode == 116){ e.preventDefault(); //组织默认刷新 var iframeSrc = iframe.src; iframe.src = iframeSrc; } } iframe页面里再写如下: var iframeSrc = parent.iframe.src; document.onke

浅谈js控制li标签排序问题 js调用php函数的方法_javascript技巧

[Html代码] <span style="font-size:14px;"><ul class="list-group"> <? if ($categorys): ?> <? foreach ($categorys as $category):?> <li class="list-group-item" data-id="<? echo $category->id ?&