同域下父子页面的通信

父页面：

<!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. C/C++中static关键字作用总结

    来来来,来看这篇文章: http://www.cnblogs.com/biyeymyhjob/archive/2012/07/19/2598815.html 总结一下: 1.先来介绍它的第一条也是最重 ...

  2. 进程 & 线程相关知识

    不管Java,C++都有进程.线程相关的内容.在这里统一整理吧. Python的线程,其实是伪线程,不能真正的并发.下面也有讲. 线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序 ...

  3. Android 项目中常用到的第三方组件

    项目中常用到的第三方组件 1 社会化分享ShareSDK-Core-2.5.9.jarShareSDK-QQ-2.5.9.jarShareSDK-QZone-2.5.9.jarShareSDK-Sin ...

  4. ZendStudio的配置导出

    File(文件)->Export(导 出),再弹出Export窗口中点击"General(常规)",选择"Preferences(首选项)" 点击&quo ...

  5. mysql使用笔记（二）

    一.启动和关闭mysql服务 windows下 启动 (方法1)管理员权限进入cmd,执行 net start mysql (方法2)管理员权限进入cmd,执行 mysqld -uroot --con ...

  6. vim 学习记录

    VIM中PHP代码使用tab键自动完成 更新于 2013-01-18 05:47:55UEANER 目录结构 $ tree -C ~/.vim | grep -v ".cnx" | ...

  7. ListView配合BaseAdapter

    BaseAdapter使用比较麻烦,它是个抽象类,需要重写4个方法分别是getCount() getItem(..) getItemId(..) getVew(..),相应的使用BaseAdapter ...

  8. 解决由于一个软件限制策略的阻止，windows无法运行此程序cmd.reg

    解决由于一个软件限制策略的阻止,windows无法运行此程序cmd.reg Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SOFT ...

  9. 【转】commons-lang.jar包简介

    转自:http://zhidao.baidu.com/share/71b48e6b3e1b1dc73fe705604b9c7584.html 1.下载jar包 包官方下载地址:http://commo ...

  10. 对Linux新手非常有用的 20个命令

    你打算从Windows换到Linux上来,还是你刚好换到Linux上来?哎哟!!!我说什么呢,是什么原因你就出现我的世界里了.从我以往的经验来说,当我刚使用Linux,命令,终端啊什么的,吓了我一跳. ...