zoukankan      html  css  js  c++  java
  • js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。

    一、同域下父子页面的通信

    父页面parent.html

    1. <html>
    2. <head>
    3. <scripttype="text/javascript">
    4. function say(){
    5. alert("parent.html");
    6. }
    7. function callChild(){
    8. myFrame.window.say();
    9. myFrame.window.document.getElementById("button").value="调用结束";
    10. }
    11. </script>
    12. </head>
    13. <body>
    14. <inputid="button"type="button"value="调用child.html中的函数say()"onclick="callChild()"/>
    15. <iframename="myFrame"src="child.html"></iframe>
    16. </body>
    17. </html>
     

    子页面child.html

    1. <html>
    2. <head>
    3. <scripttype="text/javascript">
    4. function say(){
    5. alert("child.html");
    6. }
    7. function callParent(){
    8. parent.say();
    9. parent.window.document.getElementById("button").value="调用结束";
    10. }
    11. </script>
    12. </head>
    13. <body>
    14. <inputid="button"type="button"value="调用parent.html中的say()函数"onclick="callParent()"/>
    15. </body>
    16. </html>
     

    方法调用

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

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

    DOM元素访问

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

    注意事项

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

    1. iframe上用onload事件

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

    二、跨域父子页面通信方法

    如果iframe所链接的是外部页面,因为安全机制就不能使用同域名下的通信方式了。

    父页面向子页面传递数据

    实现的技巧是利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data就可以了,例如:

    1. 在子页面中通过setInterval方法设置定时器,监听location.href的变化即可获得上面的data信息

    2. 然后子页面根据这个data信息进行相应的逻辑处理

    子页面向父页面传递数据

    实现技巧就是利用一个代理iframe,它嵌入到子页面中,并且和父页面必须保持是同域,然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe,然后由于代理的iframe和主页面是同域的,所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。

     
  • 相关阅读:
    Dos.ORM logo.Net轻量级开源ORM框架 Dos.ORM
    C# FUNC 应用
    WCF教程网址
    C#扩展方法实现 byte[] 输出为HEX字符串形式
    apache配置,禁止指定后缀访问
    IServerChannelSinkProvider
    在服务器端的远程对象中加上抽象工厂的接口和实现类
    pannel加载窗体
    权限框架
    工作周记
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/6771409.html
Copyright © 2011-2022 走看看