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. VMware安装Centos后无法上网

    参考于: http://www.xpxt.net/xtjc/win8/04194953.html

  2. https比http到底那里安全？

    HTTPS和HTTP的概念 HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP ...

  3. css清除浮动各方法与原理

    说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联 ...

  4. No.5 Verilog 建模方式

    5-1 门级建模 VerilogHDL内建基元门: 多输入门:and, nand, or, nor, xor, xnor; 多输出门:buf, not 三态门:bufif0, bufif1, noti ...

  5. [Vue CLI 3] 插件开发之 registerCommand 到底做了什么

    首先,我们看到在 package.json 中有 scripts 的定义: "scripts": { "serve": "vue-cli-servic ...

  6. 只在需要的时候 Polyfill 你的 JavaScript 代码

    本文转载自 Pascal Klau,他是一名来自德国南部的实习生,他讨厌不必要的 HTTP 请求,也不爱吃西兰花.Pascal 将说明使用 polyfill 服务的一种方式,在这种方式下你可能可以完全 ...

  7. Web.xml详解（转）（Filter，context，listener）

    web.xml 详细解释!!(链接) web.xml加载过程(步骤) 首先简单说一下,web.xml的加载过程. 当我们去启动一个WEB项目时,容器包括(JBoss.Tomcat等)首先会读取项目we ...

  8. docker--docker基本命令使用及发布镜像

    docker镜像可以完全看作一台全新的电脑使用,无论什么镜像都是对某一东西进行了配置,然后打包后可以快速移植到需要的地方直接使用 省去复杂的配置工作 比如java web项目部署,如果是新部署,需要装 ...

  9. Spring中使用DataSourceTransactionManager进行事务管理的xml配置

    在一个业务的实现过程中,可能需要多条sql完成对数据库的操作,比如账户登录,需要匹配用户名和密码,然后要增加积分,还要记录登录的ip和时间,这可能需要三个sql语句,这三个语句应当是一个整体,任意一个 ...

  10. quarts之Cron表达式示例

    cron表达式含义及范例如下: 字段名                 允许的值                        允许的特殊字符 秒                         0- ...