同域下父子页面的通信

父页面：

<!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. mysq错误（1）空用户创建库

    mysql5.6.24免安装版: 1.ERROR 1044 (42000): Access denied for user ''@'localhost' to database 现象:创建库失败. 出 ...

  2. hibernate对象关系实现(一)一对多

    hibernate是对jdk一个封装工具,实现对象和数据库之间数据映射.使用时涉及到四个问题:a.对象之间的关系在类中的体现:b,对象关系对应的数据库中表之间体现:c.实现a,b在hibernate的 ...

  3. 2014 Multi-University Training Contest 1

    A hdu4861 打表找规律 #include <iostream> #include<cstdio> #include<cstring> #include< ...

  4. JS实现复选框全选全不选以及子复选框带动全选框的选中

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

  5. Android设置Activity启动和退出时的动画

    业务开发时遇到的一个小特技,要求实现Activity启动时自下向上弹出,退出时自上向下退出. 此处不关注启动和退出时其他Activity的动画效果,实现方法有两种: 1.代码方式,通过Activity ...

  6. 【转载】【Centos linux系统】命令行（静默）安装oracle 11gR2

    [原文]:http://blog.chinaunix.net/uid-23886490-id-3565998.html 一.安装前准备 1.内存及swap要求 至于swap如何添加,后文将提到 gre ...

  7. Python设计模式之单例模式

    1.由于语言的特性不同,设计模式的实现方式和实现难度也会不同 2.有的模式已经在语言内置了,比如迭代器模式. 3.单例模式可以直接用模块级变量来实现 4.普通工厂模式可以直接通过传入"类名& ...

  8. phalcon: 过滤（Phalcon\Filter（））

    过滤,就是清除不需要的数据,留下想要的数据. 其调用方法如下,一: $filter = new \Phalcon\Filter(); $filter->sanitize("some(o ...

  9. 打不开chm文件解决办法

    打不开chm文件解决办法.bat regsvr32 itss.dll /sregsvr32 hhctrl.ocx /s

  10. 关于mvc3.0RadioButtonFor的使用

    以前本人没有使用过mvc,近期的话公司要求使用mvc进行开发项目,我不得不学习,我在这里分享下Html.RadioButtonFor的使用,例如 @Html.RadioButtonFor(d => ...