html中iframe标签的用法详解

最新推荐文章于 2024-06-19 16:15:06 发布
最新推荐文章于 2024-06-19 16:15:06 发布
阅读量4w 收藏 113
点赞数 34
文章标签： yii

<iframe>是什么？html中iframe标签的用法详解

原创  2018-10-26 10:24:35 03690

第六期线上培训班

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

 

<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中添加内容，代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

<!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，不需要滚动条，具体代码如下：

1

2

3

4

5

6

7

8

9

10

11

<!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>

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

图片1.jpg

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

图片2.jpg

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

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

 

今天碰到一个需求，要求引入一个外部页面，由于对yii框架不甚熟悉，所以不太会，这边日志很好的帮助了我，直接用<iframe>标签将外部页面引入你要加载的页面即可

 

 

 

---不积跬步，无以至千里，不积小流，无以成江海

fly_on_the_sky
关注
  • 34
    点赞
  • 踩
  • 113
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
使用iframe标签实现html页面局部刷新
MrsZhang1995的博客
12-12 1406
Iframe是一种嵌入网页的框架形式，Web页面可以通过更改嵌入的部分，达到部分内容刷新。 Iframe的用法与普通的标签元素DIV类似，可以指定在页面中嵌入的位置、颜色、界面布局等。 <a href="a1.html" id="a1" name="a1.html" target="i">1</a> <a href="a2.html" id="a2" name="a2.html" target="i">2</a> <iframe src="" id="i
HTML中iFrame标签的两个用法介绍
12-13
最近工作有个在项目-布兜收藏夹。简言之就是将喜欢的图片收藏到布兜页面上来，这其中用到了很多关于iframe的方面，总结如下：　　1. 作为弹出层铺底覆盖 　　大家如果做过那种黑色遮罩盖住整张页面，而碰巧用户用的是IE6，更碰巧的是页面上有select元素，那就有得头疼了（原理就不在这里赘述了）。我们会发现弹出的DIV没法遮住select, 轮到我们的iframe出场了。逻辑如下：     与弹出div同级放入iframe    保证iframe的 z-index小于弹层div z-index    增加window resize和scroll事件, 保证iframe能盖住整张页面 　　部分代码
详解iframe与frame的区别
11-22
开门见山了，大家需要注意的地方：HTML5不再支持使用frame，iframe只有src 属性 一、使用iframe的优缺点 优点: 　　1.程序调入静态页面比较方便; 　　2.页面和程序分离; 缺点： 　　1.iframe有不好之处：样式/脚本需要额外链入，会增加请求。另外用js防盗链只防得了小偷，防不了大盗。 　　2.iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你的网站即使做的在好,也排不到好的名次!如果是动态网页，用include还好点！但是必须要去除他的<html><head><title><body>标签！ 　　3.框架结构有时
HTML Iframe
最新发布
geng1025的博客
06-19 276
height 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。frameborder 属性规定是否显示 iframe 周围的边框。iframe 可用作链接的目标（target）。指向隔离页面的位置。
捕捉IFrame SRC改变事件
04-30
页面中的使用到Iframe时，我们如何需要对IFrame中页面是否改变进行判断，我们可以使用到window.onbeforeunload事件.
iframe 详解和避坑
weixin_40348267的博客
04-22 1150
2.SEO 问题：搜索引擎可能无法正确地解析 <iframe> 中的内容，这可能影响页面的搜索引擎优化（SEO）。比如之前瑶琴遇到的一个小需求，需要在 PC 端显示移动端的某个商品详情页面，由 pc 端拼接参数到移动端链接上，获取到具体的商品信息后显示页面，就是用的 <iframe> 标签。始终确保嵌入的内容是可信的。上面就是关于 <iframe> 标签的用法了，<iframe> 标签在写网页中不常用到，但在一些特殊的场景中，还是会用到的。2）如果使用 <iframe>，请确保嵌入的内容来自可信任的源。
【HTML 教程】iframe
web前端开发
12-06 1842
作者 |阮一峰<iframe>标签用于在网页里面嵌入其他网页。1、基本用法<iframe>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏...
iframe标签的基本使用
winnieFighting
07-17 2473
Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于 Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML 文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。 一开始我听到这个理解以为是页面...
iframe的基本介绍与使用
热门推荐
qq_45799465的博客
03-31 4万+
一、iframe的基本介绍 二、iframe的基本使用 三、iframe的属性介绍 四、iframe注意事项 五、iframe的URL传参方法 六、iframe的postMessage（）传参方法
HTML 框架iframe
Serena_tz的博客
02-24 2424
通过使用iframe框架，我们可以在一个浏览器窗口浏览多个页面。 iframe语法: <iframe src="URL"></iframe> 该URL指向不同的网页。 1、Iframe - 设置高度与宽度 height 和 width 属性用来定义iframe标签的高度与宽度。 属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。 实例： <iframe src="demo_iframe.htm" width="200" height="200">&
iframe,我们来谈一谈
weixin_34342578的博客
02-27 3846
某大咖说: "iframe是能耗最高的一个元素，请尽量减少使用"某大牛说: "iframe安全性太差，请尽量减少使用"...wtf, 你们知不知道你们这样浇灭了多少孩纸学习iframe的热情和决心。 虽然，你们这样说的我竟无法反驳，但是iframe强大功能是不容忽视的。 可以看看各大邮箱网站是否还在使用iframe，查查知乎iframe....
【HTML】深入全掌握 iframe：了解 its 技术原理、优缺点、最佳应用场景及实战指南
weixin_55846296的博客
06-08 4505
Web 应用开发中，包含其他网页的框架是很常见的需求。HTML 标签iframe提供了一个容器，可以用来嵌入其他页面，并且它自带了一些有用的特性，如调整大小、滚动等。本文将深入介绍iframe技术原理、优缺点、最佳应用场景及实战指南，希望能帮助您更好地运用 iframe，提升 Web 应用开发效率。（内嵌框架）元素是一种HTML常用元素，用于在一个HTML文档中嵌入另一个HTML文档。其实际效果是将一个文档嵌入到另一个文档中，用户在浏览器中正常浏览父文档的同时，可以看到和与子文档交互。
iframe标签用法详解(属性、透明、自适应高度)
01-19
1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 HTML 与 XHTML 之间的差异 ...iframe标签内的内容可以做为浏览器不支持iframe标签时显示 属性 属性 值 描述 DT
举例讲解HTML中iframe和frame的区别
09-28
frame这个标签不知大家注意过没有,它必须放在frameset中使用,而且经常容易和iframe混淆,这里我们就来举例讲解HTML中iframe和frame的区别,需要的朋友可以参考下
html标签之Object和EMBED标签详解
01-19
此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。 <object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。 object 的初衷是...
jQuery取得iframe中元素的常用方法详解
11-23
本文将详细讲解如何使用jQuery来取得`iframe`中元素的方法。 首先，我们要明确一点：跨域的`iframe`是无法直接进行DOM操作的，这是浏览器的安全策略，以防止恶意网站对其他网站的页面进行篡改。但如果是同源策略下...
学习HTML：iframe用法总结收藏
笨鸟快飞的专栏
09-15 1685
Html代码   P>iframe>是框架的一种形式，也比较常用到。 P>DIV class=blogstory>P>SPAN style="FONT-SIZE: large">SPAN style="COLOR: #0000ff">SPAN style="FONT
HTML中的iframe简介
萌萌白白的博客
02-16 1208
详细讲述如何使用HTML中的iframe标签，以及包含属性
《HTML标准》解读：详解Iframe元素
weixin_44384265的博客
11-23 2859
本文主要是基于《HTML标准》4.8节讲解iframe元素，主要的内容是iframe的发展历史、基础使用以及相关的安全考量。
html中iframe用法
06-06
HTML中的iframe（内嵌框架）元素可以用来嵌入其他网页或文档到当前页面中。iframe元素具有src、width、height、frameborder等属性，可以通过这些属性来配置iframe的展示效果和内容。 以下是一个基本的iframe用法示例： ```html <iframe src="https://www.example.com" width="100%" height="400px" frameborder="0"></iframe> ``` 这个示例中，iframe元素的src属性指向了 https://www.example.com，即嵌入的网页地址，width和height属性指定了iframe的宽度和高度，frameborder属性指定了是否显示边框（0为不显示，1为显示）。 需要注意的是，由于iframe嵌入了其他网页或文档，可能会存在安全风险，因此需要谨慎使用。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值