同域下父子页面的通信

父页面：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript">

        function say(){

            alert("调用父页面方法成功");

        }

        function callChild(){

            myFrame.window.say();

            myFrame.window.document.getElementById("button").value="调用结束";

            console.dir(myFrame);

        }

    </script>

</head>

<body>

<input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>

<iframe name="myFrame" src="child.html"></iframe>

</body>

</html>

子页面：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript">

        function say(){

            alert("调用子页面方法成功");

        }

        function callParent(){

            parent.say();

            parent.window.document.getElementById("button").value="调用结束";

            console.dir(parent.window);

        }

    </script>

</head>

<body>

<input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>

</body>

</html>

方法调用

父页面调用子页面方法：FrameName.window.childMethod();

子页面调用父页面方法：parent.window.parentMethod();

DOM元素访问

获取到页面的window.document对象后，即可访问DOM元素

注意事项

要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：

1. iframe上用onload事件

2. 用document.readyState=="complete"来判断

iframe子页面与父页面通信的更多相关文章

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

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

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

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

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

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

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

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

  5. ifream子页面与父页面互调

    function a1(x){ alert('父页面:' + x); } function acc(){ var frames = document.getElementById("dial ...

  6. iframe框架子页面与父页面间的通信

    需要注意的问题:页面最好放在服务器上测试避免跨域问题. 具体参考:http://www.cnblogs.com/ljhero/archive/2011/07/09/2101540.html

  7. html中 iframe子页面 与父页面之间的方法调用 ;

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

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

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

  9. iframe子页面与父页面元素的访问以及js变量的访问[zhuan]

    https://www.cnblogs.com/Capricorn-HCL/articles/4216302.html

随机推荐

  1. [转载] HTTP请求的TCP瓶颈分析

    原文: http://bhsc881114.github.io/2015/06/23/HTTP%E8%AF%B7%E6%B1%82%E7%9A%84TCP%E7%93%B6%E9%A2%88%E5%8 ...

  2. Tomcat的使用

    Tomcat的安装较为简单,尤其是Tomcat的安装文件apache-tomcat-7.0.19-windows-x86.zip,直接解压至目标目录下即可. Tomcat的安装目录下包括bin.con ...

  3. poj2002Squares(点集组成正方形数）

    链接 可以枚举两个点,因为是正方形两外两点可以由已知求出,据说可以根据三角形全等求出下列式子,数学渣不会证... 已知: (x1,y1)  (x2,y2) 则:   x3=x1+(y1-y2)   y ...

  4. Path,Files巩固,题目:从键盘接收两个文件夹路径,把其中一个文件夹中(包含内容)拷贝到另一个文件夹中

    这个题目用传统的File,InputStream可以做,但是如果用Files,Path类做,虽然思路上会困难一些,但是代码简洁了很多,以下是代码: import java.io.IOException ...

  5. (六)ARM状态寄存器-PSR

    ARM程序状态寄存器Program State Register 在ARM模式中, 有16个数据寄存器和1或2个状态寄存器是可以随时访问的.在特权模式 (privileged mode) 下, 对应的 ...

  6. FSL安装

    本文介绍如何安装医学图像处理软件fsl. 安装环境:Win8和Ubuntu 14.04 LTS(双系统和虚拟机皆可) 1. 安装ubuntu 14.04 LTS 2. 打开终端,设置ip代理:expo ...

  7. android 主线程和子线程之间的消息传递

    从主线程发送消息到子线程(准确地说应该是非UI线程)  package com.zhuozhuo; import android.app.Activity; import android.os.Bun ...

  8. iOS开发之Xcode 6更新默认不支持armv7s架构

    最近一次的Xcode 6更新默认不再支持arm7s架构,究竟是要废除不用呢还是仅仅只是一个疏忽? 目前的Xcode 6配置里定义${ARCHS_STANDARD}为armv7, arm64,当然这个定 ...

  9. CSocket必须使用stream socket不能够使用数据报 socket

    如果使用MFC socket类CSoket通讯,必须使用stream socket,不能够使用 SOCK_DGRAM 类型socket.原因如下: 1 stream socket和数据报socket的 ...

  10. win8style布局

    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...