zoukankan      html  css  js  c++  java
  • Iframe父子间元素操作

    1、在父页面 获取iframe子页面的元素

    (在同域的情况下 且在http://下测试,且最好在iframe onload加载完毕后 dosomething...)

    js写法

    a、通过contentWindow获取

    也有用contentDocument 获取的 但是contentWindow 兼容各个浏览器,可取得子窗口的 window 对象。
    contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。

    获取方法

    1. var frameWin=document.getElementById('iframe').contentWindow;    //window对象  
    2. var frameDoc=document.getElementById('iframeId').contentWindow.document  //document对象  
    3. var frameBody=document.getElementById('iframeId').contentWindow.document.body   //body对象  

    还有iframe.contentDocument 方法 //但是ie 6,7不支持

    b、通过frames[]数组获取

    (但是必须在ifram框架加载完毕后获取,iframe1是iframe的name属性)

    1. document.getElementById('iframId').onload=function(){  
    2.     var htmlwindow.frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;  
    3.     alert(html)  
    4. }  
    5.  如果要获取iframe中的iframe  
    6. document.getElementById('iframId').onload=function(){  
    7.     var htmlwindow.frames["name属性"].frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;  
    8.     alert(html)  
    9. }  

    jq写法:必须在iframe加载完毕以后才有效

    1. a、$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 必须在iframe加载完后才有效  
    2. b、$("#iframe中的控件ID",document.frames("frame的name").document)//方法2 必须在iframe加载完后才有效

    =================================

    2、在iframe中获取父级页面的id元素 

    (在同域的情况下且在http://下测试,最好是 iframe记载完毕再dosomething)

    js写法:

    获取父级中的objid

    1. var obj=window.parent.document.getElementById('objId')  
    window.top 方法可以获取父级的父级的....最顶层的元素对象

    jq写法:

    1. $('#父级窗口的objId', window.parent.document).css('height':'height);  // window可省略不写  
    2. 或者  
    3. $(window.parent.document).find("#objId").css('height':'height);   // window可省略不写  
    ===================================

    3、父级窗体访问iframe中的属性  

    (经测试,在ie中最好用原生的onload事件,如果用jq的load把iframe加载完毕 有时候方法调用不到 多刷新才有效果)

    1. a、 用contentWindow方法   
    2. document.getElementById('iframe1').onload=function(){  
    3.          this.contentWindow.run();  
    4.  }  
    5. b、用iframes[]框架集数组方法 -- 中括号中是iframe的name值
    6. document.getElementById('iframe1').onload=function(){  
    7.          frames["iframe1"].run();  
    8. }  

    ===================================

    4、在iframe中访问父级窗体的方法和属性 //window 可以不写

    1. //这里不用写contentWindow 写了之后会报错
    2. window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名  
    3. window.parent.Func();  // 访问属性Func()是在父级窗口的方法  

    5、让iframe自适应高度

    1. $('#iframeId').load(function() { //方法1  
    2.     var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);  
    3.     var h=$(this).contents().height();  
    4.     $(this).height(h+'px');   
    5. });  
    6.   
    7. $('#iframeId').load(function() { //方法2  
    8.     var iframeHeight=$(this).contents().height();  
    9.     $(this).height(iframeHeight+'px');   
    10. });  

    6、iframe的onload的事件,

    主流浏览器都支持 iframe.onload=function....
    在ie下需要用attachEvent绑定事件

    7、在iframe所引入的网址写入防钓鱼代码

    if(window!=window.top){
    window.top.location.href=window.location.href;
    }

    8、获取iframe的高度

    iframe.contentWindow.document.body.offsetHeight;




    还有分享一个技术群,474471759,跟随里面的大佬一起成长,进群之后里面的JimY就是我。

    如果我的博客解决了你的问题,那请你给个关注吧!
  • 相关阅读:
    Oracle 10G R2 RAC 日常管理
    Oracle RMAN 的 show,list,crosscheck,delete命令整理
    drop table 报错ora 全分析
    Oracle RAC 日常基本维护命令
    修改RAC VIP IP
    ASM 管理命令和操作笔记
    用示例说明BitMap索引的效率要优于BTree索引
    用示例说明全文索引的性能优势
    通过append hint来插入数据,演示它和普通插入数据的性能比较。
    用示例说明BTree索引性能优于BitMap索引
  • 原文地址:https://www.cnblogs.com/DreamSeeker/p/7161965.html
Copyright © 2011-2022 走看看