摘自:http://blog.csdn.net/kongjiea/article/details/38870399

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 html= window.frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;
  3. alert(html)
  4. }
  5. 如果要获取iframe中的iframe
  6. document.getElementById('iframId').onload=function(){
  7. var html= window.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 <span style="font-family: Arial, Helvetica, sans-serif;">必须在iframe加载完后才有效</span>

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

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[]框架集数组方法
  6. document.getElementById('iframe1').onload=function(){
  7. frames["iframe1"].run();
  8. }

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

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

  1. window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名
  2. 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. $('#iframeId').load(function() { //方法2
  7. var iframeHeight=$(this).contents().height();
  8. $(this).height(iframeHeight+'px');
  9. });

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;

js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度的更多相关文章

  1. js获取iframe中的元素以及在iframe中获取父级的元素(包括iframe中不存在name和id的情况)

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

  2. iframe里访问父级里的方法属性

    window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名 window.parent.Func();  // 访问属性Func()是在父 ...

  3. Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素  1. 格式:window ...

  4. 在iframe窗体内 获取父级的元素;;在父窗口中获取iframe中的元素

    在iframe中获取父窗口的元素 $(‘#父窗口中的元素ID’, parent.document).click(); 在父窗口中获取iframe中的元素 $(“#iframe的ID”).content ...

  5. Js跨域、父级窗口执行JS赋值、取值,更改元素

    网站域名: A:http://www.xxoo.com/a.html B:http://www.aabb.com/b.html B网站嵌套与A网站(A的a中的Iframe指向B中的b)b要让父级a页面 ...

  6. 在iframe的父级作用域操作,ifame中的元素。。

    frames["iframe的name"].SchDatas SchDatas为方法名js中 frames["iframe的name"].document.ge ...

  7. dirname的用法:获取文件的父级目录路径

    命令:dirname 获取文件的路径(到父级目录)用法:dirname file_name [root@bogon opt]# a=$(dirname /mnt/a/b/c/d/a.sh) [root ...

  8. javascript父级鼠标移入移出事件中的子集影响父级的处理方法

    一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级 ...

  9. Easyui弹出窗体在iframe的父级页面显示

    今天做EasyUI学习的预到了一个这样的问题:通过iframe加载的一个页面在调用$.messager.alert();这个方法后只能在iframe中显示alert效果而不是在全局的页面上显示这并不我 ...

随机推荐

  1. 【BZOJ】1596: [Usaco2008 Jan]电话网络(树形dp+特殊的技巧)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1596 一开始交了个貌似正确的dp,wa了. 我只考虑了儿子覆盖的情况,没有考虑父亲QAQ 那么我们要 ...

  2. redis php 实例二

    前面一篇博客主要是string类型,list类型和set类型,下面hash类型和zset类型 1,hset 描述:将哈希表key中的域field的值设为value.如果key不存在,一个新的哈希表被创 ...

  3. linux配置网关

    linux配置网关 输入账号root 再输入安装过程中设置的密码,登录到系统 vi /etc/sysconfig/network-scripts/ifcfg-eth0 #编辑配置文件,添加修改以下内容 ...

  4. border-radius 原理分析

    border-radius 想必大家都有所了解,比较常见的用法就像下面一样: 注意左边的盒子 border-radius: 100px;  右边的为0哦,所以右边的实际上没有设置圆角边框属性:咱们比较 ...

  5. ETCD数据空间压缩清理

    场景:做etcd数据镜像的时候出现如下错误  Error: etcdserver: mvcc: database space exceeded 通过查找官方文档https://coreos.com/e ...

  6. 并发测试 java.lang.OutOfMemoryError: GC overhead limit exceeded Xms Xmx 阻塞请求 单节点 请求分发 负载均衡

    at javax.servlet.http.HttpServlet.service(HttpServlet.java:705) at javax.servlet.http.HttpServlet.se ...

  7. “CMake”这个名字是“cross platform make”

    cmake_百度百科 https://baike.baidu.com/item/cmake/7138032?fr=aladdin CMake 可以编译源代码.制作程序库.产生适配器(wrapper). ...

  8. flink hadoop yarn

    新一代大数据处理引擎 Apache Flink https://www.ibm.com/developerworks/cn/opensource/os-cn-apache-flink/ 新一代大数据处 ...

  9. css中的clear:both,display:flex;

    介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. -------------------------------- ...

  10. office 2013 activiate---(run as admin)

    win7 office 2013 activiate---(run as admin) empty the garbage in osx rm -rf ~/.Trash