javascript之iframe

Enlightenment 发布于2019-08-22 12:45 / 996人阅读

摘要：可取得子窗口的对象。获取页面高度父子页面互访子访问父等到的信息父访问子等到的信息

iframe可以做的事情：

实现跨域

解决IE6下select遮挡不住的问题

解决ajax的前进后退问题

实现异步上传

iframe基本知识

iframe元素会创建包含另外一个文档的内联框架

操作iframe

1）隐藏iframe表框
设置frameborder为0；

2)动态创建iframe

3)获取iframe

获取iframe中的window对象

如果是获取document对象，则

return obj.contentWindow.document || obj.contentDocument;

a>contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。
b>contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。

4)获取iframe页面高度

function getIframeHeight(obj){  
    var idoc = getIframeWindow(obj).document;   
    if(idoc.body){  //W3C
        return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);     
    }else if(idoc.documentElement){  //IE
        return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);     
    }  
}

5)父子页面互访

子访问父：  
    parent.html:  
      
        等到的信息：  
          
      
    son.html:

父访问子：
parent.html:

    等到的信息：  
    
  
      
      
  
 son.html:  
  
    Hello world!!!

服务器托管云服务器 ifram iframe webrtc iframe 父级iframe

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92351.html

H5与Native交互之JSBridge技术

摘要：一原理篇下面分别介绍和与的底层交互原理在讲解原理之前，首先来了解下的组件，先来看一下苹果官方的介绍上面的意思是说是一个可加载网页的对象，它有浏览记录功能，且对加载的网页内容是可编程的。做过混合开发的很多人都知道Ionic和PhoneGap之类的框架，这些框架在web基础上包了一层Native，然后通过Bridge技术使得js可以调用视频、位置、音频等功能。本文就是介绍这层Bridge...

zacklee 2019-08-20 18:19 评论0 收藏0
原生App与javascript交互之JSBridge接口原理、设计与实现

摘要：相关参考中与之间相互调用的实现实现了与相同的机制的对象注入漏洞解决方案存在的意义前期调研调研对象：支付宝，微信，云之家调研文档：Android中JS与Java的极简交互库 SimpleJavaJsBridge 设计需求阅读类型的业务功能页面需要由前端H5实现，需要做到服务端可控；页面界面更改减少重新发布新版本的频率；功能页面部分原型需求无法实现，需要原生功能支持；对未来...

Lyux 2019-08-21 11:29 评论0 收藏0
WEB开发面面谈之（5）——写JS时必须注意的的一些问题

摘要：更多详情请看下面例举了日常前段开发中遇到的场景，解决方案有很多，但从开发阶段就进行规范，可以很大程度避免很多后续的潜在和兼容问题。更多详情请看http://blog.zhangbing.club/%E... 下面例举了日常前段开发中遇到的场景，解决方案有很多，但从开发阶段就进行规范，可以很大程度避免很多后续的潜在和兼容问题。获取body元素非标准做法 document.body ...

nihao 2019-08-22 18:22 评论0 收藏0