同域下父子页面的通信

父页面：

<!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. java实现将资源文件转化成sql语句导入数据库

    文档结构

  2. Python循环嵌套

    可以在循环体内嵌入其他的循环体,如在while循环中可以嵌入for循环, 反之,你可以在for循环中嵌入while循环. 实例: 以下实例使用了嵌套循环输出3~13之间的素数: 以上实例输出结果: F ...

  3. android模拟器中文乱码

    问题:在xml文件中设置的中文能正确输出,但是在java文件中设置的中文会在模拟器上呈现乱码 解决方案:在build.gradle文件中添加一行代码 android {compileOptions.e ...

  4. golang执行linux命令

    golang exec 执行系统命令 golang    2014-09-25 13:17:44    2779    0    0 exec.Command() 最简单的方法: cmd := exe ...

  5. 转：不是技术牛人，如何拿到国内IT巨头的Offer

    转自:http://blog.csdn.net/lsldd/article/details/13506263 不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些牛 ...

  6. Statspack安装配置及使用

    1.1 概念 statspack,用于收集系统信息,诊断数据库故障,也方便第三方技术支持进行远程阅读和建议.它连续收集数据信息,能够提供趋势分析,同时也需要单独分配一个表空间来存储这些统计数据.即在安 ...

  7. C#_抓包HttpWebRequest跟HttpWebResponse

    1.第一招,根据URL地址获取网页信息  这招是入门第一式, 特点: 1.最简单最直观的一种,入门课程. 2.适应于明文,无需登录,无需任何验证就可以进入的页面. 3.获取的数据类型为HTML文档. ...

  8. hiho_1059_string matching content length

    题目大意 两个字符串strA和strB(长度最大为2100),他们中按照顺序有一些公共的子串,且公共子串的长度大于等于3,否则不认为是合法的,比如 abcdef 和 abcxcdef, 按照顺序有合法 ...

  9. 清理PC垃圾

    @echo off pause echo 正在清除系统垃圾文件,请稍等...... del /f /s /q %systemdrive%\*.tmp del /f /s /q %systemdrive ...

  10. 素定位器(ElementLocators)

    元素定位器(ElementLocators)告诉Selenium是向HTML中的哪一个元素发送命令.一个定位器的格式如下:locatorType=argument 我们支持如下写法用于定位元素:ide ...