zoukankan      html  css  js  c++  java
  • html之iframe

    在A.html页面中签了iframe标签,iframe的src指向B.html,如果这时候想在A.html页面中通过脚本获取B.html中的某个元素.

    A.html:

    <html>
    ...
    <iframe src='B.html'>
    </iframe>
    </html>

    B.html:

    <html>
    ...
    <div id='testDiv'>
    test...
    </div>
    </html>

    这时候可通过

    //先在A页面获取iframe对象
    var A_iframe=document.getElementsByTagName('iframe');
    //再通过该对象的contentWindow属性,获取B页面中的window对象
    var B_window=A_iframe[0].contentWindow;
    //再通过window对象调用document等方法
    var testDiv=B_window.document.getElementById('testDiv');

    这个是可以获取到B页面的DOM对象的。

    但是!!如果两个页面存在跨域问题,则会报错:SecurityError: Blocked a frame with origin "******" from accessing a cross-origin frame.

    所以,不管是ajax,还是iframe都会存在跨域的问题。。。

    因此,只能把A.html和B.html两个页面都放到同一个域下,就不会报错,也可以在A页面获取B页面的内容

    ---http://127.0.0.1/html5/A.html (B.html也是在hmtl5文件夹下)

    //=========================20150127 start=====================================//

    从嵌套子页面,如B页面,找到A页面中嵌套的其他iframe,如C页面,则在B页面中,可通过如下代码获取到A页面的对象:

    //在B页面,通过window.top可获得其父页面,也就是A页面的window对象

    var A_window_obj=window.top;

    //然后通过A页面的window对象,以及在A页面中定义的iframe的name属性来获取对应的iframe窗口对象

    var C_iframe_window_obj=A_window_obj.frames["C_content"];

    //此时,C_iframe_window_obj就是iframe为C的页面的window对象了。

    //也就是,只要A,B,C三者同一域,它们是互通的。

    <html>
    ...
    <iframe src='B.html' name='B_content'>
    </iframe>
    <iframe src='C.html' name='C_content'>
    </iframe>
    </html>

      

    小结:

    从上到下访问的方式:

    document.getElementsByTagName('iframe')[0].contentWindow

    从下到上访问的方式(通过iframe的name属性):

    window.top--获取父页面的window

    window.top.frames["C_content"]--获取父页面中其他嵌套的iframe页面的window

    //=========================20150127 end=====================================//

     可参考:

    iframe与主框架跨域相互访问方法-->>http://blog.csdn.net/fdipzone/article/details/17619673

    contentWindow-->>http://www.cnblogs.com/wkylin/archive/2011/09/26/2191190.html

    FrametSet中各frame,iframe之间dom的访问-->>http://www.cnblogs.com/hailexuexi/archive/2011/06/03/2072084.html

  • 相关阅读:
    (vue.js)vue中怎么设置select默认选中
    owin搭载静态网页
    Vue在IE11下不兼容,最后问题竟然出现在ie的缓存上
    setTimeout或者setInterval传递参数的解决办法
    jquery 发送post请求访问webapi,无法接到参数
    64位进程和32位进程通信问题,接收端收不到 SendMessage发送的消息
    关于C#设置Form的visible属性隐藏问题
    微信 支付支付授权目录 修改
    微信支付(20140923更新)商户支付密钥key的生成与设置
    申请微信公众平台是服务号,营业执照是个体工商户,没有对公账户,能申请微信支付功能吗?
  • 原文地址:https://www.cnblogs.com/simonbaker/p/3758644.html
Copyright © 2011-2022 走看看