zoukankan      html  css  js  c++  java
  • 父子页面之间元素相互操作(iframe子页面)

    js/jquery获取iframe子页面中元素的方法:

          一、使用window.frames["iframe的ID"]获取元素   

    window.onload = function() {
            var oIframe = window.frames["oIframe"].document.getElementById("getFrame");
            console.log(oIframe);
    }

           注意:此处一定要加上window.onload或者DOMContentLoaded,也就是DOM加载或者页面加载完成后。

         二、使用window.name获取元素   

    var oIDframe = window.oIframe.document.getElementById("getFrame");
    console.log(oIDframe);
    oIframe是iframe的name属性值,这种获取方法不必写在window.onload或者DOMContentLoaded中,请自行测试。

    三、使用getElementById获取元素 
    var oIdFrame = document.getElementById("oIframe").contentWindow.document.getElementById("getFrame");
    console.log(oIdFrame);

    使用document.getElementById获取本页面的iframe元素后,再获取iframe子页面的元素。这种获取方法不必写在window.onload或者DOMContentLoaded中

     四、使用jquery获取

    var ojIframe = $("#oIframe").contents().find("#getFrame").html();
     console.log(ojIframe);

    js/jquery  iframe子页面获取父页面元素的方法:

          一、使用js

    var fatherEle = window.parent.document.getElementById("title");
     console.log(fatherEle);

      二、使用jq

    var fatherEleJq = $("#title",parent.document);
    console.log(fatherEleJq);

    父页面:

    <div id="title">
            index包含iframe子页面
        </div>
        <div id="parent">
            <iframe name="oIframe" id="oIframe" src="iframe.html" frameborder="0" width="1000" height="562"></iframe>
    </div>

    iframe.html子页面:

    <div id="getFrame">iframe</div>

    参考链接:http://java-my-life.iteye.com/blog/1275205

  • 相关阅读:
    eclipse快捷键
    Struts2框架(8)---Struts2的输入校验
    Struts2框架(5)---result结果集
    Spring框架(6)---AspectJ实现AOP
    Spring框架(4)---AOP讲解铺垫
    Spring框架(3)---IOC装配Bean(注解方式)
    Spring框架(2)---IOC装配Bean(xml配置方式)
    Spring框架(1)---Spring入门
    Mybatis框架(5)---动态sql
    Mybatis框架(4)---输入输出映射
  • 原文地址:https://www.cnblogs.com/loveamyforever/p/6222604.html
Copyright © 2011-2022 走看看