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 条评论
登录 后参与评论

相关文章

来自专栏吾爱乐享

php学习之初识html

1714
来自专栏与神兽党一起成长

使用echarts问题1

如果如果你是这样使用echarts的,那请注意了。 刚开始我用页面的DOM去做echarts.init(dom);

1924
来自专栏LeoXu的博客

[翻译]VelocityLayoutServlet (VLS) 综观

这一个基本的VelocityViewServlet的一个扩展。它为基于Velocity Tools 的工程项目提供了一个简单的布局控制和定制的错误显示屏幕。Ve...

701
来自专栏前端之路

–[Hot] Vue-cli 引入VueAwesomeSwiper

1403
来自专栏ionic3+

【技巧】ionic3的页面导航后退事件拦截

写一篇简单的,有这样一种业务场景:当使用push后,页面导航栏会自动添加后退按钮,当点击后退按钮后,拦截事件(如付费进来了,没有完成后续操作就后退退出,良好的用...

1095
来自专栏搜云库

手把手教你 MongoDB 的安装与详细使用(二)

上一篇文章练习了,MongoDB 的以下操作

51210
来自专栏iOS开发日记

iOS开发系列补充知识点

1.iOS尺寸设置--在iOS中尺寸的单位是点不是像素,在retina屏幕中一个点有两个像素。此外在retina屏幕中图片一般采用“xxx@2x.png”命名,...

3606
来自专栏从零开始学自动化测试

Selenium2+python自动化23-富文本(自动发帖)

前言 富文本编辑框是做web自动化最常见的场景,有很多小伙伴遇到了不知道无从下手,本篇以博客园的编辑器为例,解决如何定位富文本,输入文本内容 一、加载...

3598
来自专栏JackeyGao的博客

定义横向和纵向不同的print样式

最近优化了 中文诗歌 的打印样式, 由于 Chrome 在打印的时候可以选择横向或者纵向的布局, 所以想同时支持两种布局。

2451
来自专栏守望轩

Visual Studio 2008 每日提示(三)

#021、 调整字符、词或行的顺序 原文地址:http://blogs.msdn.com/saraford/archive/2007/08/23/did-yo...

2743

扫码关注云+社区

领取腾讯云代金券