精华内容
下载资源
问答
  • 经常进行页面布局的人对于HTML中的iframe标签一定不陌生,iframe标签是一个内联框架,说白了就是用来在当前 HTML 页面中嵌入另一个文档的。刚刚接触前端的小伙伴可能不知道html中iframe标签的用法,这篇文章就结合...

    经常进行页面布局的人对于HTML中的iframe标签一定不陌生,iframe标签是一个内联框架,说白了就是用来在当前 HTML 页面中嵌入另一个文档的。刚刚接触前端的小伙伴可能不知道html中iframe标签的用法,这篇文章就结合实例给大家讲解html中iframe标签的使用用法,有一定的参考价值,感兴趣的朋友可以看看。

    打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)

    <iframe> 标签是一个内联框架,即用来在当前 HTML 页面中嵌入另一个文档的,且所有主流浏览器都支持iframe标签。

    基本语法:<iframe src="文件路径"></iframe>

    <iframe> 标签常用属性介绍:

    height可以设置框架显示的高度

    width可以设置框架显示的宽度

    name可以定义框架的名称

    frameborder用来定义是否需要显示边框,取值为1表示需要边框

    scrolling用来设置框架是否需要滚动条,取值可以是yes,no,auto

    src用于设置框架的地址,可以使页面地址,也可以是图片地址

    align用于设置元素对齐方式,取值可以是left,right,top,middle,bottom

    以上属性可以根据需要进行设置。

    实例讲解:html中<iframe>标签的使用方法

    首先新建两个HTML页面,一个命名为iframe-content.html,另一个命名为iframe.html,在iframe-content.html中添加内容,代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    </head>

    <body>

    <p>蒹葭苍苍,白露为霜。所谓伊人,在水一方。</p>

    <p>溯洄从之,道阻且长。溯游从之,宛在水中央。</p>

    <p>蒹葭萋萋,白露未晞。所谓伊人,在水之湄。</p>

    <p>溯洄从之,道阻且跻。溯游从之,宛在水中坻。</p>

    </body>

    </html>

    然后用<iframe>标签将iframe-content.html文件嵌入到iframe.html中,可以根据自己的需要设置样式,此例将frameborder设为0,不需要边框, 将scrolling设为no,不需要滚动条,具体代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    </head>

    <body>

    <iframe src="iframe-content.html" width="400px" height="150px" frameborder="0"

    scrolling="no"></iframe>

    </body>

    </html>

    有边框和滚动条的效果图:

    没有边框和滚动条的效果图:

    当页面中有大部分内容相同时,比如页面的头部和底部,我们就可以使用<iframe>标签将重复的部分嵌入页面中,这样可以减少代码的重复率,减轻代码量,但不足之处是页面url地址没有改变。

    以上结合实例给大家介绍了html中<iframe>标签的使用方法,小白一定要自己动手尝试,看看你的代码能不能实现这样的效果,希望这篇文章对你有所帮助!

    展开全文
  • iframe什么iframe用法详解。

    千次阅读 2016-11-21 16:58:01
    对于初涉互联网的新手来说,iframe并不熟悉,那么iframe到底是什么iframe用法有哪些呢? iframe什么 iframe就是我们常用的iframe标签:。iframe标签是框架௚

    经常和网站打交道或者经常建站的朋友对iframe肯定不陌生,网站有了iframe会变得更加美观、大气。对于初涉互联网的新手来说,iframe并不熟悉,那么iframe到底是什么?iframe用法有哪些呢?

    这里写图片描述
    iframe是什么
    iframe就是我们常用的iframe标签:>&#12290;iframe&#26631;&#31614;&#26159;&#26694;&#26550;&#30340;&#19968;&#31181;&#24418;&#24335;&#65292;&#20063;&#27604;&#36739;&#24120;&#29992;&#21040;&#65292;iframe&#19968;&#33324;&#29992;&#26469;&#21253;&#21547;&#21035;&#30340;&#39029;&#38754;&#65292;&#20363;&#22914;&#25105;&#20204;&#21487;&#20197;&#22312;&#25105;&#20204;&#33258;&#24049;&#30340;&#32593;&#31449;&#39029;&#38754;&#21152;&#36733;&#21035;&#20154;&#32593;&#31449;&#25110;&#32773;&#26412;&#31449;&#20854;&#20182;&#39029;&#38754;&#30340;&#20869;&#23481;&#12290;iframe&#26631;&#31614;&#30340;&#26368;&#22823;&#20316;&#29992;&#23601;&#26159;&#35753;&#39029;&#38754;&#21464;&#24471;&#32654;&#35266;&#12290;iframe&#26631;&#31614;&#30340;&#29992;&#27861;&#26377;&#24456;&#22810;&#65292;&#20027;&#35201;&#21306;&#21035;&#22312;&#20110;&#23545;iframe&#26631;&#31614;&#23450;&#20041;&#30340;&#24418;&#24335;&#19981;&#21516;&#65292;&#20363;&#22914;&#23450;&#20041;iframe&#30340;&#38271;&#23485;&#39640;&#12290; <br/>&#10; frame&#29992;&#27861;&#35814;&#35299; <br/>&#10; &#39318;&#20808;&#38656;&#35201;&#20102;&#35299;iframe&#26631;&#31614;&#30340;&#20889;&#27861;&#65292;&#21644;&#22823;&#22810;HTML&#26631;&#31614;&#20889;&#27861;&#30456;&#21516;&#65292;iframe&#26631;&#31614;&#36755;&#20837;&#24418;&#24335;&#20026;&#65306;<iframe>&#21644;。以>&#24320;&#22836;&#65292;&#20197;结尾,将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。
    iframe标签的属性
    align:left、right、top、middle、bottom。用于规定如何根据周围的元素来对齐此框架。不赞成使用。请使用样式代替。
    frameborder:1、0。用于规定是否显示框架周围的边框。
    height:pixels、%。用于规定iframe的高度。
    longdesc:URL。规定一个页面,该页面包含了有关iframe的较长描述。
    marginheight:pixels。定义iframe的顶部和底部的边距。
    marginwidth:pixels。定义iframe的左侧和右侧的边距。
    name:frame_name。规定iframe的名称。
    scrolling:yes、no、auto。规定是否在iframe中显示滚动条。

    src:URL。规定在iframe中显示的文档的URL。
    width:pixels。%。定义iframe的宽度。

    iframe用法详解
    首先需要了解iframe标签的写法,和大多HTML标签写法相同,iframe标签输入形式为:>&#21644;。以>&#24320;&#22836;&#65292;&#20197;结尾,将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。
    iframe标签的属性
    align:left、right、top、middle、bottom。用于规定如何根据周围的元素来对齐此框架。不赞成使用。请使用样式代替。
    frameborder:1、0。用于规定是否显示框架周围的边框。
    height:pixels、%。用于规定iframe的高度。
    longdesc:URL。规定一个页面,该页面包含了有关iframe的较长描述。
    marginheight:pixels。定义iframe的顶部和底部的边距。
    marginwidth:pixels。定义iframe的左侧和右侧的边距。
    name:frame_name。规定iframe的名称。
    scrolling:yes、no、auto。规定是否在iframe中显示滚动条。

    src:URL。规定在iframe中显示的文档的URL。
    width:pixels。%。定义iframe的宽度。

    iframe用法案例
    例子1。
    width="420" height="330" scrolling="auto" src="URL">
     width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条(可选的参数为 auto、yes、no,如果省略这个参数,则默认为auto);frameborder 边框大小;
     注意:URL建议用绝对路径
     传说中百DU用: width="0" height="0" scrolling="auto" src="www.zzidc.com">
    黑了88*8。。。
     例子2。
     如果一个页面里面有框架。。随便点页面里的连接,要求在这个> &#37324;&#25171;&#24320;&#12290;&#22312;iframe &#20013;&#21152;&#20837;name=<em>* &#65288;*</em>&#33258;&#24049;&#35774;&#23450;&#65289;

    >

     然后在修改默认打开模式,:网页HEAD中加上或部分连接的目标框架设为(**)
     例子3。
     要插入一个页面。要求只拿中间一部分。其他的都不要。,。。
     代码:

    align="middle" vspace="-170" hspace="0" src="http://host.zzidc.com/" scrolling="no" width="776" height="2500">

     控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0;控制框架覆盖上部分的深度 vspace=-170
     scrolling滚动条要否(auto、yes、no) frameborder框架的边框大小,width=776 height=2500此框架的大小。
     一、页面内加入iframe

    width="420" height="330" scrolling="auto" src="URL">, scrolling表示是否显示页面滚动条,可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。  二、超链接指向这个嵌入的网页,只要给这个iframe命名就可以了。方法是>&#65292;&#20363;&#22914;&#25105;&#21629;&#21517;&#20026;aa&#65292;&#20889;&#20837;&#36825;&#21477;HTML&#35821;&#35328;<iframe width="420" height="330" src="http://host.zzidc.com">,然后,网页上的超链接语句应该写为:  三、如果把frameborder设为1,效果就像文本框一样  透明的iframe的用法  必需IE5.5以上版本才支持  在transparentBody.htm文件的标签中,我已经加入了style=”background-color=transparent” 通过以下四种iframe的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解:   id="Frame1" src="transparentBody.htm">

      id="Frame2" src="transparentBody.htm">
      id="Frame3" src="transparentBody.htm">
      id="Frame4" src="transparentBody.htm">

    展开全文
  • iframe什么iframe用法详解

    千次阅读 2016-12-12 17:54:09
    对于初涉互联网的新手来说,iframe并不熟悉,那么iframe到底是什么iframe用法有哪些呢?    iframe什么  iframe就是我们常用的iframe标签:。iframe标签是框架的一种形式,也比较常用到,iframe...

     经常和网站打交道或者经常建站的朋友对iframe肯定不陌生,网站有了iframe会变得更加美观、大气。对于初涉互联网的新手来说,iframe并不熟悉,那么iframe到底是什么?iframe用法有哪些呢?
     

    iframe用法

      iframe是什么

      iframe就是我们常用的iframe标签:<iframe>。iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多,主要区别在于对iframe标签定义的形式不同,例如定义iframe的长宽高。

      iframe用法详解

      首先需要了解iframe标签的写法,和大多HTML标签写法相同,iframe标签输入形式为:<iframe>和</iframe>。以<iframe>开头,以</iframe>结尾,将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。

      iframe标签的属性

      align:left、right、top、middle、bottom。用于规定如何根据周围的元素来对齐此框架。不赞成使用。请使用样式代替。

      frameborder:1、0。用于规定是否显示框架周围的边框。

      height:pixels、%。用于规定iframe的高度。

      longdesc:URL。规定一个页面,该页面包含了有关iframe的较长描述。

      marginheight:pixels。定义iframe的顶部和底部的边距。 

      marginwidth:pixels。定义iframe的左侧和右侧的边距。 

      name:frame_name。规定iframe的名称。 

      scrolling:yes、no、auto。规定是否在iframe中显示滚动条。
     
      src:URL。规定在iframe中显示的文档的URL。 

      width:pixels。%。定义iframe的宽度。 
     
      iframe用法案例

      例子1。

      <iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>

     width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条(可选的参数为 auto、yes、no,如果省略这个参数,则默认为auto);frameborder  边框大小;

     注意:URL建议用绝对路径

     传说中百DU用:<iframe width=0 height=0 frameborder=0 scrolling=auto src=www.zzidc.com></iframe>

      黑了88*8。。。

     例子2。

     如果一个页面里面有框架。。随便点页面里的连接,要求在这个<iframe> 里打开。在iframe 中加入name=** (**自己设定)

    <iframe name=**  ></iframe>

     然后在修改默认打开模式,:网页HEAD中加上<a href=URL target=**>或部分连接的目标框架设为(**)

     例子3。

     要插入一个页面。要求只拿中间一部分。其他的都不要。,。。

     代码:

    <iframe name=123  align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="http://host.zzidc.com/"  frameborder=no scrolling=no  width=776  height=2500></iframe>

     控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0;控制框架覆盖上部分的深度 vspace=-170

     scrolling滚动条要否(auto、yes、no)   frameborder框架的边框大小,width=776  height=2500此框架的大小。

     一、页面内加入iframe

    <iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>,

    scrolling表示是否显示页面滚动条,可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。

     二、超链接指向这个嵌入的网页,只要给这个iframe命名就可以了。方法是<iframe name=**>,例如我命名为aa,写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://host.zzidc.com></iframe>,然后,网页上的超链接语句应该写为:<a  href=URL target=aa>

     三、如果把frameborder设为1,效果就像文本框一样

     透明的iframe的用法

     必需IE5.5以上版本才支持

     在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来嵌套,可以增加代码的可...

    优点:

    1. iframe能够原封不动的把嵌入的网页展现出来。
    2. 如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
    3. 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
    4. 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

    缺点:

    1. iframe会阻塞主页面的onload事件;
    2. iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。,会产生很多页面,不容易管理。
    3. iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
    4. 代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化(SEO)。
    5. 很多的移动设备无法完全显示框架,设备兼容性差。
    6. iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。

    现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发。
    如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上一些问题。


    展开全文
  • Web前端之iframe详解

    千次阅读 多人点赞 2019-08-13 12:12:15
    在实现前端页面的时候遇到很多问题,开发进度很慢,实现一个功能基本上都是在走弯路,也不知道如何实现才是最好的选择,所以就一直在爬坑,在实现一个页面数据编辑的功能的时候就需要使用一个iframe内联框架,但是...
  • 前端iframe标签介绍及使用

    千次阅读 2021-09-30 19:40:45
    所以如果是模板渲染方式的,前端就可以使用iframe标签节省一点网络带宽(传输的内容会少一些,并且主页面不会刷新,只是iframe在请求得到新的资源)。 二、模板渲染和iframe的对比: 1.子页面通过继承的方式去
  • 关于iframe切换

    千次阅读 2019-10-09 15:16:12
    关于iframe切换 可以通过F12,ctrl+shift+c定位需要的元素后,在下侧栏看它的iframe 可以看到的方法 driver.switch_to.parent_frame() 切换到上一层iframe,多用于嵌套的frame结构 比如iframe1里面嵌套了iframe0...
  • 现在有什么好的办法取代 iframe我以前就用过AJAX做过管理页面,左侧菜单不用每次都重新加载,你让他每次点击左侧链接或按钮然后调用AJAX加载右侧的内容就行什么东西可以替代iframeHTML,iframe有兼容性问题,有什么...
  • asp.net中iframe详细用法

    千次阅读 2017-06-15 18:46:56
    <iframe name=123 align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src= frameborder=no scrolling=no width=776 height=2500></iframe>  控制插入页被框架覆盖的深度 marginwidth=0 ...
  • 框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
  • iframe实例

    热门讨论 2012-10-11 20:49:23
    html中非常实用的iframe实例,里面有2个例子,保证你看了后就明白其用法
  • 出处:... 使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别。 注:HTML5不再支持使用frame,iframe只有src 属性 一、使用iframe的优缺点 优点: 1.程序
  • 这是官方的一个后台离线模板,我把它下载了分享给大家,是一个html格式的资源,个人感觉还不错,暂时想不到什么说的了,自己看
  • iframe使用 自适应高度 封装js
  • 通过iframe请求的链接是没有请求头Origin的 例如: **一、通过iframe请求** ``` <iframe id="index" name="index" style="width:100%;" src=...
  • 使用iframe实现点击导航页面无刷切换,使用bootstrap布局
  • 默认排序 ...iframe原本的用法在现在看来是不合时宜的,问题太多了,不一一列举,但是它的其他功能却是不错的黑魔法,这里列举一些,想到了再更新: 用来实现长连接,在websocket不可用的时候作为一种
  • 完美解决跨域iframe的高度自适应

    热门讨论 2015-05-25 09:47:13
    完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
  • iframe嵌入网页的一部分, 拿别人网页为你所用
  • iframe缩小引用网页比例代码

    热门讨论 2015-01-04 14:17:21
    HTML使用iframe标签引用外部网页时,可以设置外部网页的显示比例适配当前iframe的大小,兼容各种浏览器哦
  • 现在是一个案例页面,点击不同案例,获得不同的src(微信公众号文章),给iframe赋值,在pc、手机浏览器中都可以正常显示,但在微信中就打不开。。。
  • 认识iframe

    千次阅读 2018-09-02 17:26:23
    iframe什么及作用 iframe是嵌入式框架, 是html标签, 还是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架(即行内框架) . 说白了, iframe用来在页面嵌入其他页面. 二. iframe的优缺点...
  • iframe嵌套页面

    千次阅读 2019-04-03 14:25:50
    iframe嵌套页面方法 <body style="margin:0px;"> <iframe src="" width="100%" height="100%" frameborder="0" ></iframe> </body> iframe常用属性: frameborder:是否显示边框,1...
  • Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
  • 一、修改iframe路径 html页面:/*为元素添加点击事件*/ onclick="iframechange('soft.do')" js: function iframechange(obj){  $('iframe').attr('src',obj); } 常用于:由改变iframe路径的导航...
  • iframe

    千次阅读 2018-05-23 08:18:48
    Html入门学习笔记03—Iframe和form表单理解很久很久以前学习html的笔记记录,很随意,但都是自己记录的,希望对需要的人有所帮助。本文使用word2013编辑并发布Postbird | There I am , in the world more exciting!...
  • iframe网页上下左右布局模板

    千次下载 热门讨论 2014-03-04 13:31:47
    iframe网页上下左右布局模板,可以修改里面的css代码来更改各个模块的大小,位置。很基本使用的网页布局模板
  • iframe定位问题

    万次阅读 2019-08-05 17:27:36
    iframe什么,其实就是页面重新再次嵌套了一个网页,iframe里面一样有html开始结束标签,然后有title,body,就是网页里面套网页,那么selenium操作浏览器只是对当前页面进行操作,那么既然iframe是一个网页,那么要...
  • 在HTML5中有什么可以替代iFrame

    千次阅读 2020-02-07 03:46:16
    iframe的内容完全位于当前页面不同的上下文中。虽然这是一个很棒的功能,而且是不同浏览器版本之间兼容最好的,但是它也带来了额外的问题(将frame大小跟网页内容设置一致比较麻烦)。 AJAX。可以使用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 207,559
精华内容 83,023
关键字:

iframe是什么

友情链接: 06xa-e2.rar