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. 洛谷P1966 [NOIP2013提高组Day1T2]火柴排队

    P1966 火柴排队 题目描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为: ∑(ai-bi) ...

  2. 洛谷P1084 [NOIP2012提高组Day2T3]疫情控制

    P1084 疫情控制 题目描述 H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树,1 号城市是首都,也是树中的根节点. H 国的首都爆发了一种危害性极高的传染病.当局为了控 ...

  3. 【CODEVS】2618 核电站问题

    2618 核电站问题 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 一个核电站有N个放核物质的坑,坑排列在一条直 ...

  4. Leetcode73. Set Matrix Zeroes矩阵置零

    给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 1: 输入: [   [1,1,1],   [1,0,1],   [1,1,1] ] 输 ...

  5. stack的基本使用方式

    #include <iostream> #include <stack>//头文件 using namespace std; stack<int> S; int m ...

  6. DirectX11笔记(七)--Direct3D渲染3--INDICES AND INDEX BUFFERS

    原文:DirectX11笔记(七)--Direct3D渲染3--INDICES AND INDEX BUFFERS 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  7. php文件上传$_FILES数组格式

    <form action="" enctype="multipart/form-data" method="post"> < ...

  8. 使MySQL支持emoji

    1. 修改数据库的字符集 和 排序规则为: ALTER DATABASE database_name CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode ...

  9. 在n个球中，任意取出m个（不放回），求共有多少种取法

    要求: 在n个球中,任意取出m个(不放回),求共有多少种取法 分析: 假设3个球A,B,C,任意取出2个,可分为取出的球中含A的部分和不含A的部分.即AB,AC为一组,BC为一组. 设函数F(n,m) ...

  10. 使用 Docker/LXC 迅速启动一个桌面系统

    使用 Docker/LXC 迅速启动一个桌面系统 Docker 是 dotCloud 最近几个月刚宣布的开源引擎,旨在提供一种应用程序的自动化部署解决方案,简单的说就是,在 Linux 系统上迅速创建 ...