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. Codeforces 113B

    题目链接 B. Petr# time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  2. LintCode_46 主元素

    题目 给定一个整型数组,找出主元素,它在数组中的出现次数严格大于数组元素个数的二分之一. 样例 给出数组[1,1,1,1,2,2,2],返回 1 思路 首先 发现所给的数组是顺序排列好的. 用动态规划 ...

  3. python 模块 chardet下载及介绍

    python 模块 chardet下载及介绍   在处理字符串时,常常会遇到不知道字符串是何种编码,如果不知道字符串的编码就不能将字符串转换成需要的编码.面对多种不同编码的输入方式,是否会有一种有效的 ...

  4. Linux下安装zookeeper-3.4.13

    转载至:https://yq.aliyun.com/articles/662422 1.zookeeper官网下载安装包http://mirrors.hust.edu.cn/apache/zookee ...

  5. koa上传excel文件并解析

    1.中间键使用 koa-body npm install koa-body --save const koaBody = require('koa-body'); app.use(koaBody({ ...

  6. Vue调试神器之Vue.js devTools

    Vue项目中使用Vue.js devTools这款调试神器,可以极大程度的提高我们的开发效率. 安装 1.打开Chrome网上应用商店安装插件(自墙),直接搜索devTools安装即可.贵宾传送阵,请 ...

  7. SQL优化神器 - Tosska SQL Tuning Expert Pro for Oracle

    SQL Tuning Expert Pro for Oracle 是Tosska 公司推出的划时代SQL优化工具.它可以帮助SQL开发人员和DBA: 找到最快的等价SQL: 调整执行计划: 管理SQL ...

  8. 创建一个User类

    1.用户模型—User类 用户模型或者叫账户模型,为什么这么说看下面代码 using System; using System.ComponentModel.DataAnnotations; name ...

  9. AS2.2使用CMake方式进行JNI/NDK开发

    之前写过一篇比较水的文章Android手机控制电脑撸出HelloWorld 里面用到了JNI/NDK技术. 这篇文章给大家介绍下JNI/NDK开发.采用的是Android Studio2.2开发环境, ...

  10. Neo4j学习笔记(1)——使用Java API实现简单的增删改查

    阅读目录 项目的创建及配置 使用嵌入式数据库 创建节点和关系 查询及更新 删除关系和节点 完整代码 参考资料 回到顶部 项目的创建及配置 因为Neo4j依赖的jar包比较多,所以推荐使用Maven来管 ...