视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
iframe标签用法详解(属性、透明、自适应高度)
2020-11-27 14:45:24 责编:小采
文档


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="https://www.gxlcms.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="https://www.gxlcms.com/article/15780.htm">https://www.gxlcms.com/article/15780.htm</a>
    <strong>4、通过js输出iframe广告代码
    </strong>[code]
    document.write('<iframe align=middle marginwidth=0 marginheight=0 src="http://img.jb51.net/imgby/468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>');


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


    代码如下:
    <iframe frameborder="0" name="Iframe1" src="https://www.gxlcms.com/" width="100%" height="200">
    您的浏览器不支持嵌入式框架,或者当前配置为不显示嵌入式框架。
    </iframe>

    下载本文
    显示全文
    专题