iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使iframe效果,那么就需要了解更多的iframe属性,这里简单的整理下,方便需要的朋友

1、iframe 定义和用法

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

HTML 与 XHTML 之间的差异

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。

提示和注释:

提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器。

iframe标签是成对出现的,以<iframe>开始,</iframe>结束

iframe标签内的内容可以做为浏览器不支持iframe标签时显示

属性

属性 描述 DTD
align
    left right top middle bottom

不赞成使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。

TF
frameborder
    1 0
规定是否显示框架周围的边框。 TF
height
    pixels %
规定 iframe 的高度。 TF
longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。 TF
marginheight pixels 定义 iframe 的顶部和底部的边距。 TF
marginwidth pixels 定义 iframe 的左侧和右侧的边距。 TF
name frame_name 规定 iframe 的名称。 TF
scrolling
    yes no auto
规定是否在 iframe 中显示条。 TF
src URL 规定在 iframe 中显示的文档的 URL。 TF
width
    pixels %
定义 iframe 的宽度。 TF

示例


 
<iframe src="http://www.lovean.com" width="200" height="500">
爱安网使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问爱安网。
</iframe>

使用像素定义iframe框架大小

 
<iframe src="http://www.baidu.com" width="20%" height="50%">
爱安网使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问爱安网。
</iframe>

使用百分比定义iframe框架大小

2、iframe

在transparentBody.htm文件的<body>标签中,我已经加入了style="background-color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景效果的实现方法应该会有个清晰的了解:


 
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </IFRAME>


iframe是迫不得已才使用的,因为使用iframe会带来较多的问题,而有的浏览器可以设置将iframe当作广告屏蔽。

在最近的一个工作内容中使用了iframe,开始遇到的问题是iframe高度自适应的问题,这问题在口碑网ued团队博客中找到了解决办法,后来更遇到一个iframe的问题

通常 iframe底色会是白色,在不同浏览器下可能会有不同的颜色

如果主页面有一个整体的背景色或者背景图片的时候

iframe区域便会出现一个白色块,与主体页面不协调,这就需要iframe

通过google搜索iframe找到了解决办法

 
<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe>当然前提是iframe页面中没有设置颜色
[code]
注:iframe主要是使用了 allowtransparency="true" style="background-color=transparent"
<strong>3、iframe自适应高度
</strong>由于篇幅过长,大家可以移步这里查看
<a target="_blank" href="http://www.lovean.com/article/15780.htm">http://www.lovean.com/article/15780.htm</a>
<strong>4、通过js输出iframe广告代码
</strong>[code]
document.write('<iframe align=middle marginwidth=0 marginheight=0 src="http://img.lovean.com/imgby/468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>');


5、有时候我们需要考虑用户的浏览器是否支持iframe标签,那么就需要如下的写法



<iframe frameborder="0" name="Iframe1" src="http://www.lovean.com/" width="100%" height="200">
您的浏览器不支持嵌入式框架,或者当前配置为不显示嵌入式框架。
</iframe>
最新资讯
“营养又美味”的金属“汉堡”

“营养又美味”的金属

中国科学院合肥物质科学研究院方前锋研究员课题组利用
恒大汽车完成第一期上市辅导

恒大汽车完成第一期上

据深圳证监局10月27日披露,海通证券对恒大汽车科创板上
九号公司成功登陆科创板:开盘大涨超105% 成科创板CDR第一股

九号公司成功登陆科创

截至发稿,九号公司涨105.91%,报39.00元。
苹果供应商欣兴电子工厂发生火灾 起火原因正在调查

苹果供应商欣兴电子工

苹果供应商欣兴电子昨晚发布公告称,公司山莺工厂于10月
YY之于百度,合适的才是完美的

YY之于百度,合适的才是

合适的才是最好的,这句话同样也适用在任何商业合作中。
熬夜使人肥胖,而肥胖反过来会促进失眠,陷入循环,无法自拔

熬夜使人肥胖,而肥胖反

一项研究逆转了肥胖与睡眠的因果关系:不是失眠会诱导肥
最新文章
浅析html webpack plugin插件的使用教程

浅析html webpack plu

这篇文章主要介绍了html webpack plugin插件的使用教
HTML转PDF的纯客户端和纯服务端实现方案

HTML转PDF的纯客户端

这篇文章主要介绍了HTML转PDF的纯客户端和纯服务端实
HTML行内元素与块级元素有哪些及区别详解

HTML行内元素与块级元

这篇文章主要介绍了HTML行内元素与块级元素有哪些及区
html+css 实现图片右上角加删除叉、图片删除按钮

html+css 实现图片右

这篇文章主要介绍了html+css 实现图片右上角加删除叉
详解iframe的src指向的内容不刷新的解决办法

详解iframe的src指向

这篇文章主要介绍了详解iframe的src指向的内容不刷新
浅析HTML 悬浮float的用法

浅析HTML 悬浮float的

float的用途比较广, 本文主要给大家介绍HTML 悬浮floa