zoukankan      html  css  js  c++  java
  • iframe学习(一)之 窗口交互

    在同源的情况下,也就是非跨域时子窗口和父窗口之间才可以通信!!!

    用iframe嵌套页面时,如果父页面要获取子页面里面的内容,可以使用contentWindow或者contentDocument

    语法

    contentWindow:iframeObject.contentWindow

    contentDocument:iframeObject.contentDocument

    区别

    1、contentWindow  这是个只读属性,返回指定的iframe的窗口对象。它虽然不是标准的一部分,但各个主流浏览器都支持。(返回指定iframe的window对象,所有主流浏览器都至此)

    2、contentDocument 能够以 HTML 对象来返回 iframe 中的文档,可以通过所有标准的 DOM 方法来处理被返回的对象  Firefox 支持,IE6,IE7都不支持,IE8开始支持,需要如此访问 document.frames['J_mainframe'].document。(返回指定iframe的document对象,部分浏览器支持)

    兼容获取document对象: 

    var getIFrameDoc = function(){
        var iobj = document.createElement("iframe");
        document.getElementsByTagName("body")[0].appendChild(iobj);
        return iobj.contentDocument || iobj.contentWindow.document;
    }

     或者

    function changeStyle(){
        var x=document.getElementById("myframe");
        var y=(x.contentWindow || x.contentDocument);
        if (y.document)y=y.document;
        y.body.style.backgroundColor="#0000ff";
    }

    基本使用

    父窗口获取子窗口的信息

    获取子窗口的window对象:

    1、document.getElementById("myiframe").contentWindow:得到iframe对象后,就可以通过contentWindow得到iframe包含页面的window对象,然后就可以正常访问页面元素了;

    2、$("#myiframe")[0].contentWindow:jquery选择器获得iframe,先把jquery对象转换为DOM对象,或者使用get()方法转换;

    父窗口和子窗口交互 && 子窗口和子窗口交互

    父窗口操作子窗口中元素:

    $("#myiframe")[0].contentWindow.$("#dd").val(),可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;

    父窗口向子窗口传递参数:

    $("#myiframe")[0].contentWindow.username="zhangsan"; 可以通过这种方式向iframe页面传递参数,先获取子窗口的window,然后将想要传递的数据挂载在window对象上

    子窗口获取父窗口传递的参数:

    在iframe页面window.username就可以获取到值,username是自定义的全局变量;

    子窗口操作父窗口元素:

    parent.document.getElementById("test"); 在iframe页面通过parent可以获得主页面的window,接着就可以正常访问父亲页面的元素了;

    top.document.getElementById("test");在iframe页面通过top获取顶层,即有多层嵌套iframe的时候使用;

    实例:

    top.$("iframe[name='iframeWindow']")[0].contentWindow.$("#inside_tableElement"),这样才能获取到iframe里的元素,注意:top.$("iframe[name='iframeWindow']").eq(0).$("#inside_tableElement"),是获取不到的

    同级子窗口之间相互调用:

    parent.$("#frame_A")[0].contentWindow.document.getElmentById("#frame_B"); 同级iframe页面之间调用,需要先得到父亲的window,然后调用同级的iframe得到window进行操作;

    参考

    iframe.contentWindow 属性:关于contentWindow和contentDocument区分

  • 相关阅读:
    Oracle 推出 ODAC for Entity Framework 和 LINQ to Entities Beta版
    Entity Framework Feature CTP 5系列文章
    MonoDroid相关资源
    MSDN杂志上的Windows Phone相关文章
    微软学Android Market推出 Web Windows Phone Marketplace
    使用 Visual Studio Agent 2010 进行负载压力测试的安装指南
    MonoMac 1.0正式发布
    Shawn Wildermuth的《Architecting WP7 》系列文章
    使用.NET Mobile API即51Degrees.mobi检测UserAgent
    MongoDB 客户端 MongoVue
  • 原文地址:https://www.cnblogs.com/kunmomo/p/12120583.html
Copyright © 2011-2022 走看看