<iframe>标签生成一个指定区域,在该区域中嵌入其他网页。它是一个容器元素,如果浏览器不支持<iframe>,就会显示内部的子元素

<iframe src="https://www.example.com"width="100%" height="500" frameborder="0"allowfullscreen sandbox><p><a href="https://www.baidu.com">点击打开百度页面</a></p>
</iframe>

1.iframe标签的常用属性:
allowfullscreen:允许嵌入的网页全屏显示,需要全屏 API 的支持,请参考相关的 JavaScript 教程。

frameborder:是否绘制边框,0为不绘制,1为绘制(默认值)。建议尽量少用这个属性,而是在 CSS 里面设置样式。

src:嵌入的网页的 URL。

width:显示区域的宽度。

height:显示区域的高度。

sandbox:设置嵌入的网页的权限,详见下文。

importance:浏览器下载嵌入的网页的优先级,可以设置三个值。high表示高优先级,low表示低优先级,auto表示由浏览器自行决定。

name:内嵌窗口的名称,可以用于<a>、<form>、<base>的target属性。

referrerpolicy:请求嵌入网页时,HTTP 请求的Referer字段的设置。参见<a>标签的介绍。

2.iframe的优缺点。

优点:

iframe能够原封不动的把嵌入的网页展现出来。

如果有很多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。

网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。

如果遇到加载缓慢的第三方内容,如图标、广告,这些问题可以由iframe来解决。

缺点:

1.iframe会阻塞主页面的onload事件。

2.iframe和主页面共享链接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。会产生很多页面,不容易管理。

3.iframe框架结构有时会让人感到迷惑,如果框架个数多,可能会出现上下、左右滚动条,会分散访问者的注意力,造成用户体验感差。

4.iframe代码复杂,无法被一些搜索引擎搜到,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以不利于搜索引擎优化。

5.很多的移动设备无法完全显示iframe框架,设备兼容性差。

6.iframe框架页面会增加服务器的http请求。

3.为什么很多项目的时候一般不用iframe?

iframe是一个单独的容器,因此不会应用全局的css样式。
iframe会和网页共用域名链接池,因此可能由于iframe占用了连接数导致加载阻塞。

html的iframe属性相关推荐

  1. 获得html页面的iframe,iframe属性值获取

    js 如何获取包含自己iframe 属性 a.html 如何在b.html里获取包含他的iframe的id 在父页面中定义函数,再到子页面中调用. 父页面parent.html function ge ...

  2. iframe属性简单示例

    iframe属性简单示例 -------------------------------------------------------------------------------- 将ifram ...

  3. iframe属性参数

    iframe属性参数 当点击一个子页面的链接时, 如何将另一个子页面嵌入到当前iframe中 只要给这个iframe命名就可以了. <iframe width=420 height=330 na ...

  4. html5 iframe 属性,html中关于iframe的allowTransparency属性的详解

    IE5.5开始支持浮动框架的内容透明.如果想要为浮动框架定义透明内容,则必须满足下列条件. 1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true. 2 ...

  5. tc.html是什么页面,HTML iframe属性详细说明

    HTML iframe 标签的作用是创建包含另外一个文档的内联框架(即行内框架),通俗点的说法就是在一个html页面嵌入另外一个html页面.这个标签在实际工作中还是比较常见而且重要的.比如一般web ...

  6. iframe属性即使用

    iframe通常使用其来嵌套一个网页,插入项目中 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了 <iframe src="192.168.2.11:88 ...

  7. iframe属性与用法

    iframe标签 小明说,iframe是能耗最高的一个元素,尽量减少使用. 小蓝说,iframe的安全性太差,尽量减少使用. 虽然他们说的是真的,但是iframe的强大功能是不容忽视的,而且现在不乏公 ...

  8. iframe属性 及用法

    1.frameborder 值为 1或0     规定是否显示框架周围的边框   1是显示 0不显示 2.height 值为 px或%   设置iframe的高度 3.marginheight 值为 ...

  9. iframe属性allowTransparency

    IE5.5开始支持浮动框架的内容透明.如果想要为浮动框架定义透明内容,则必须满足下列条件. 1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true. 2 ...

最新文章

  1. 前端要完!人工智能已经能实现自动编写 HTML 和 CSS
  2. 求解线性最小二乘问题的奇异值分解及广义逆法的C++实现
  3. 给某社区技术写作大赛当评委,我的个人资料
  4. java swing 示例_JAVA简单Swing图形界面应用演示样例
  5. android webview url scheme,Android Webview ERR_UNKNOWN_URL_SCHEME错误
  6. filestorage 修改吧部分数据_数据库系统概论课后答案||第五版
  7. IFIX 6.0 安全登录
  8. 钱大妈关闭所有北京门店:低估了北京市场的难度
  9. virus test
  10. 2019-5-5学习心得
  11. fig, ax = plt.subplots(figsize = (a, b))解析 与 plt.subplot()函数解析
  12. Python机器学习简介
  13. 正点原子STM32F4笔记
  14. 计算机系酒店管理毕业论文,计算机专业酒店管理系统毕业论文讲述.doc
  15. Android内存优化深入解析
  16. IntelliJ IDEA2021.1中英文菜单对照
  17. android 厨房的使用方法,安卓ROM厨房定制工具使用教程
  18. python运行文件时说系统找不到指定文件-python找不到指定文件
  19. 如何用AI伴侣同步测试App Inventor软件
  20. 如何用3D流体实现逼真水流效果?

热门文章

  1. 【Android开发】ViewHolder
  2. Android Compose 权限请求
  3. Vue父子组件传值问题
  4. C++迷途指针(dangling pointer)与野指针
  5. 特征工程——文本特征
  6. java装箱_Java基础 【自动装箱和拆箱、面试题】
  7. pythons+selenium, 下拉框非select选元素
  8. 哈工大/哈工深电子与信息工程学院篇|2022年(23届)电子信息/通信工程夏令营保研/考研复试经验贴
  9. 精益管理学会:精益生产是谁命名的?99.9%人都说错了
  10. 如何将APP部署在阿里云服务器上