iframe 解析

简介:iframe在日常的开发中经常用到,本随笔在参考http://blog.csdn.net/cuew1987/article/details/11265153的情况下,将对iframe的常用用法进行总结。

1、iframe能解决的问题

(1)、通过iframe能实现跨域

(2)、使用iframe能解决IE6下select遮挡不住的问题

(3)、通过iframe能解决Ajax前进后退的问题

(4)、通过iframe实现异步上传(Easyui的form组件就是通过iframe,实现表单提交时,可以提交上传域)

2、iframe 概要及注意事项

iframe会创建包含另一个文档框架的内联框架(即行内框架)

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。 提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器。 <iframe width=420 height=330 frameborder=0 scrolling=auto src="URL"></iframe>

3、iframe的基本属性

4、iframe访问方式

(1)、iframe访问方式大致有两种,大致如下:

i、contentWindow属性,通过iframe元素的这个属性,可获取子窗口的window对象,该属性兼容各个浏览器

ii、contentDocument属性,通过iframe元素的这个属性,可取得子窗口的document对象,该属性兼容向存在问题:Firefox 支持,大于ie8版本的ie支持.

(2)、获取子窗口document对象,代码如下:

function getIframeDoc(){
    var iobj=document.createElement("iframe");
     document.getElementsByTagName("body"[0].appendChild(iobj);
     return iobj.contentDocument||iobj.contentWindow.document;
}

(3)、通过jQuery对子页面进行操作

i、先通过jQuery获取iframe,再把jQuery对象转换成dom对象,可以通过get()方法进行转换.代码如下:

$("#myiframe")[0].contentWindow

ii、在得到iframe的window对象后,接着可以通过jquery选择器对其进行页面操作,代码如下:

通过上面的方法可以

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WCF系列教程之WCF消息交换模式之单项模式

    1、使用WCF单项模式须知 (1)、WCF服务端接受客户端的请求,但是不会对客户端进行回复 (2)、使用单项模式的服务端接口,不能包含ref或者out类型的参数...

    郑小超.
  • 关于EF Code First模式不同建模方式对建表产生的影响

    今天在学EF Code First模式的时候,发现几个很有趣的问题,问题如下: 1、当编写玩实体后,不指定任何主键约束,EF会找长的最像Id的,然后设置其为主键...

    郑小超.
  • SQL学习之使用常用函数处理数据

    一、在介绍使用函数处理数据前,先说下使用DBMS(数据库管理系统)处理数据所带来的问题! 1、与几乎所有的DBMS都同等的支持SQL语句(如SELECT)不同,...

    郑小超.
  • iframe框架及优缺点

    HTML5不再支持使用frame,关于frame与iframe的区别,可以参阅 iframe与frame的区别

    WindrunnerMax
  • 深入理解iframe

    iframe 用于在页面内显示页面,使用 <iframe> 会创建包含另外一个文档的内联框架(即行内框架)

    Leophen
  • 根据获取内部元素的高度,设置iframe的高度

    德顺
  • 真正解决iframe高度自适应问题

    拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。

    yuezhongbao
  • 前端进程间通讯的渗透之术

    父页面和子页面(iframe)处于2个不同的进程(即使在同一个域),进程之间的通讯必须通过每个进程内【事件监听所在的线程】来完成。最重要的是,通讯时传输的数据格...

    Jean
  • 动态创建iframe标签页并监控其加载成功(onload)的事件

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券