同域下父子页面的通信

父页面：

<!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. PHP基础知识之————PDO预处理语句

    转载处:http://www.cnblogs.com/xiaohuochai/p/6133353.html 定义 在生成网页时,许多PHP脚本通常都会执行除参数之外,其他部分完全相同的查询语句,针对这 ...

  2. 关于tomcat8在windows2008下高并发下问题的解决方案

    因为客户服务器特殊的环境问题,只能使用windows2008r2服务器,然而配置过后,网站的高访问量很快就出现了各种问题,以下是解决的问题汇总. 服务器环境:windows2008R2+jdk8.0+ ...

  3. [转载] 多年积累的 mysql 运维经验

    原文: http://mp.weixin.qq.com/s?__biz=MzA3MzYwNjQ3NA==&mid=207132223&idx=1&sn=f5d98146f282 ...

  4. windos命令行下的程序编写

    1.命令行下写程序. 写程序一定要用IDE?不,我还可以用记事本呢.呵呵,写程序一定要用记事本?? ———————————————— 命令行下输入copy con test.txt后回车可在相应目录下 ...

  5. angularjs探秘<一>

    首先聊聊angularjs是啥. 首先AngularJS 是一个 JavaScript 框架.(PS:其实就是外部引用的js文件) 所以AngularJS的使用依然是外部引用js文件. 附上引用地址 ...

  6. wireshark使用教程

    Wireshark: https://www.wireshark.org/ 安装: apt-get install wireshark 教程: http://blog.csdn.net/leichel ...

  7. js跨域问题的解决

    js提交请求给别的应用实例或者别的服务器,由于同源策略,存在js跨域的情况,我所知道两种处理方式: 1.jquery ajax+jsonp <script type="text/jav ...

  8. Freemarker 入门示例(zhuan)

    http://cuisuqiang.iteye.com/blog/2031768 ************************************ 初步学习freemarker ,先做一个简单 ...

  9. 添加无线服务wzcsvc服务，Eventlog服务

    <添加eventlog服务.reg> Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentCont ...

  10. SQL实现数组的功能

    今天在工作遇到了一个问题,需要往表中添加数量不小而且没有规律的的数据.思考后我想到了使用高级语言中的数组功能解决. 由于SQL Server并没有数组类型,ANSI SQL-92标准中并没有任何有关数 ...