parent.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Parent Page</title>

    <script language="javascript" type="text/javascript">

         function parenttest() {

             alert("这是父页面的方法！");

         }

         function btnClick() {

             document.getElementById("childframe").contentWindow.childtest();

         }

    </script>

</head>

<body>

   <div style="margin:auto;">

       <h1>This is the Parent Page.</h1>

       <input type="button" value="调用子页面的方法"  onclick="btnClick()"/>

    </div>

    <div style="margin:auto;">

       <iframe style="width:300px; height:300px;" id="childframe" src="ChildPage.html"></iframe>

    </div>

</body>

</html>

son.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
　　<head>
　　　　<title>Child Page</title>
　　　　<script language="javascript" type="text/javascript">
　　　　　　function childtest() {
　　　　　　　　alert("这是子页面的方法！");
　　　　　　}

　　　　　　function btnClick() {
　　　　　　　　window.parent.parenttest();
　　　　　　}
　　　　</script>
　　</head>
　　<body>
　　　　<div style="margin:auto;">
　　　　　　<h1>This is the Child Page.</h1>
　　　　　　<input type="button" value="调用父页面的方法" onclick="btnClick()" />
　　　　</div>
　　</body>
</html>

ifram子页面与父页面的方法相互调用的更多相关文章

  1. js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  2. JS中iframe子页面与父页面之间通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  3. Android中通过WebView控件实现与JavaScript方法相互调用的地图应用

    在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用andro ...

  4. JS和Ｃ#方法相互调用

    JS和C#方法相互调用 1.JS调用C#后台方法 方法一: 1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中;2.在前台写一个js函数,内容为document.getEle ...

  5. iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素  parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素  document.getEle ...

  6. 嵌入式iframe子页面与父页面js通信方式

    iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现 ...

  7. html中iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素   parent.document.getElementById('id')和document相关的方法都可以这样用   2.父页面访问子页面元素   document.ge ...

  8. js和vue方法的相互调用（iframe父子页面的方法相互调用）。

    项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...

  9. Unity3D中C#和js方法相互调用

    通过查找资料,Unity3D中C#和js要相互调用彼此的方法,js文件必须放在"Standard Assets". "Pro Standard Assets" ...

随机推荐

  1. Django基础内容整理

  2. CEF 框架使用集锦

    CEF 框架使用集锦: 参考:〓https://github.com/NetDimension/NanUI/wiki/%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8NanUI ...

  3. Can you find it? HDU-2141 （二分查找模版题）

    Description Give you three sequences of numbers A, B, C, then we give you a number X. Now you need t ...

  4. Docker.[2].安装Docker.

    Docker.[2].安装Docker. 学习Docker的时候,也是搜索了好多资料,捣鼓那些理论的东西.什么是镜像?什么是容器 ?特点?用途?.... 巴拉巴拉一大堆. 我这里不再讲述理论,只记录代 ...

  5. TP5动态路由配置好了但是报错was not found on this server的原因以及解决方法

    问题:The requested URL /xxxx.html was not found on this server 原因:apache的重写未开启,开启重写后,问题解决, 方法如下: apach ...

  6. Codeforces 439C

    题目链接 比赛时间没能通过==, 只能说明自己代码写的太不严谨咯! 解题思想就是贪心 先判断无解的情况: 1. 奇数不够,因为偶数是无法凑成奇数的 2. 偶数不够,2个奇数可以凑成一个偶数 3. 在奇 ...

  7. 【Leetcode】两数之和，三数之和，四数之和

    两数之和 题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这 ...

  8. 掀开SQL的神秘面纱，将优化进行到底

    掀开SQL的神秘面纱,将优化进行到底 有这样一条奇怪的SQL,返回结果不足10行,逻辑读达到1.2w,存在索引却走多次全表扫描,如何揭开它神秘的面纱拯救系统性能,答案在这里,你不可错过! 本文来自上周 ...

  9. Linux使用注意事项

    1.Linux严格区分大小写 2.Linux中所有内容以文件形式保存,包括硬件 3.修改任何设置,若想永久生效,都需要修改配置文件(除非某些发现版已经默认设置为同时修改内存和硬盘数据). 4.Linu ...

  10. LeedCode OJ -- String to Integer (atoi)

    点击打开题目链接 题目意思就是自己实现一个atoi函数,也就是将字符串转换成int型. 关于INT_MAX和INT_MIN, 只是在<limits.h>文件中定义的宏..分别是int型可以 ...