zoukankan      html  css  js  c++  java
  • iframe的Dom操作

      我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在iframe中展示被选的页面,并且要对页面做一些Dom相关的处理。也就是说我们需要在父级页面中操作子页面(iframe)的dom。

    我查找了一些资料,简单做了一些整理。

      主要分成两个方向来说明: 父级页面操作子页面 和 子页面 操作父级页面。

    一、父级页面操作子页面

      这里面存在一个问题:两个页面不能跨域(小域名也要相同)。iframe操作是有跨域限制的,试想以下我的页面的iframe引用了竞争对手的页面,但是我用父级页面做一些压力攻击。岂不是非诚的不安全。但是在我的需求中,这不是问题父级页面和子集页面都是东家的。

    jquery:

    $('#iframe').contents().find('选择器')

     原生JS:

      JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器

    ie6和ie7还可以使用document.frames[“iframe Name”]或者document.frames[“iframe ID”]来获取相当于contentWindow属性,而firefox和chrome并不支持这些document.frames[“iframe Name”]或者document.frames[“iframe ID”],但是window.frames[“iframe Name”]或window.frames[index](index是索引值)也支持所有主流浏览器

      我们知道document对象是window对象的一个子对象,所以我们可以通过contentWindow.document来获取iframe的document对象,相当于contentDocument属性。

    document.getElementById(“iframe ID”).contentWindow.document

    、子页面(iframe)操作父级页面

    jQuery: 

    $(window.parent.document).find("选择器"); 

    原生JS:

    parent是父窗口(如果窗口是顶级窗口,那么parent==self==top),top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口(等价window),opener是用open方法打开当前窗口的那个窗口;

    parent,top还能调用父级窗口的的js方法,比如,getIFrameDOM(iID)是父级窗口的一个方法,那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID)方法;

    parent.document.getElementById(“dom ID”)

      关于iframe的dom操作,我参考了以下文章,受益匪浅《JS操作iframe里的dom》 、《用JS访问操作iframe里的dom》和 《用JavaScript在IE和Firefox下进行iframe的DOM操作

          

        

        

      

  • 相关阅读:
    JUC------03
    const、define 和 static 的区别
    Mac Catalina 下 gdb codesign问题解决
    k8s 辨析 port、NodePort、targetPort、containerPort 区别
    centos7.8 安装部署 k8s 集群
    【小白学PyTorch】21 Keras的API详解(下)池化、Normalization层
    【小白学PyTorch】21 Keras的API详解(上)卷积、激活、初始化、正则
    【小白学PyTorch】20 TF2的eager模式与求导
    【小白学PyTorch】19 TF2模型的存储与载入
    【小白学PyTorch】18 TF2构建自定义模型
  • 原文地址:https://www.cnblogs.com/webARM/p/4664008.html
Copyright © 2011-2022 走看看