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. NOIP模拟17.9.21

    NOIP模拟17.9.21 3 58 145 201 161.5 样例输出21.6 数据规模及约定对于40% 的数据,N <= 20对于60% 的数据,N <= 1000对于100% 的数 ...

  2. Linux常用命令操作详解

    https://mp.weixin.qq.com/s/IR4yy7Q0mOA_XV16R21CdQ 一:Linux下tomcat服务的启动.关闭与错误跟踪 使用PuTTy远程连接到服务器以后,通常通过 ...

  3. asp.net技术（公共方法）

    #region 获取 本周.本月.本季度.本年 的开始时间或结束时间 /// <summary> /// 获取开始时间 /// </summary> /// <param ...

  4. 数据库---JDBC的解析

    一.JDBC是什么? JDBC:Java Database Connectivity(Java数据库连接池).指定了统一的访问各种关系型数据库的标准接口-----桥梁作用.  功能:[与数据库建立连接 ...

  5. Unity3D研究院之为什么Inspector视图中脚本前面的勾选框没了

    我一个同事刚问我为啥有时候脚本的勾选项没有了?有时候不想让某条脚本执行,可以直接在编辑器中点掉勾选按钮即可.如下图所示 以前我也遇到过这个问题,但是一直都没怎么注意,因为一般情况下也用不到.今天刚好有 ...

  6. Codeforces Round #309 (Div. 2) A. Kyoya and Photobooks【*组合数学】

    A. Kyoya and Photobooks time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  7. Docker.[4].容器操作.

    Docker.[4].容器操作. 熟悉的指令: 启动容器 docker run 交互式启动容器 docker run -i -t IMAGENAME /bin/bash 停止容器 exit 停止容器 ...

  8. Nginx 对访问量的控制

    目的 了解 Nginx 的 ngx_http_limit_conn_module 和 ngx_http_limit_req_module 模块,对请求访问量进行控制. Nginx 模块化 nginx ...

  9. Leetcode709.To Lower Case转换成小写字母

    实现函数 ToLowerCase(),该函数接收一个字符串参数 str,并将该字符串中的大写字母转换成小写字母,之后返回新的字符串. 示例 1: 输入: "Hello" 输出: & ...

  10. Spark day06

    SparkStreaming简介 SparkStreaming是流式处理框架,是Spark API的扩展,支持可扩展.高吞吐量.容错的实时数据流处理,实时数据的来源可以是:Kafka, Flume, ...