iframe的替代品

2023-11-17

           面试题:使用过iframe框架,那你对于iframe框架的优缺点知道多少?并且由于iframe的一些缺点,国内外针对这个框架的替代品你知道有哪些呢?

知识点1:iframe框架的优缺点?

优点

1、可以跨域请求其他网站,并将网站完整展示出来;

2、典型系统结构可以提高代码的复用性;

3、创建一个全新的独立的宿主环境,可以隔离或者访问原生接口及对象;

4、模块分离,若多个页面运用同一个iframe,则便于修改操作,如果网页为了统一样式而有相同的header和version,可以写成一个page,用iframe嵌套,这样可以增加代码的复用性;

5、实现广告展示的一个解决方案,如果遇到加载缓慢的第三方内容,如图标或广告,这些问题可以由iframe来解决;

6、若需要刷新iframe则只需要刷新框架内,不需要刷新整个页面;

7、重新加载页面时,不需要重新加载整个页面,只需要重新加载页面中的一帧画面,减少了数据的传输,提高了网页的下载速度。

缺点:

1、iframe会阻塞主页面的Onload事件,iframe加载完毕之后才会触发window.onload事件;iframe和主页面共享链接池,而浏览器对相同城的链接有限制,所以会影响页面的并行加载;使用iframe之前需要考虑这两个缺点,如果需要使用iframe,最好是通过Javascript动态给iframe添加src属性值,这样可以绕开上面两个问题;

2、不利于SEO,代码复杂,搜索引擎的爬虫无法解读iframe的页面;

3、加载了新页面,增加了css与js文件的请求,即额外增加了http请求,增加了服务器负担,对于大型网站不可取;

4、很多的移动设备无法完全显示框架,设备兼容性差

5、有时iframe由于页面挤占空间的原因出现滚动条,造成布局混乱

6、浏览器返回按钮不可用;

7、页面样式调试比较麻烦,会有多个滚动条,而且会生成多个页面,不好打印;

知识点二:iframe框架的替代品?

1、使用object标签替代

我们可以使用HTML中的object标签在网页中嵌入外部资源。我们可以使用标签在我们网页中显示另一个网页。object标签是HTML中iframe标签的替代品。我们可以使用标签来嵌入不同的多媒体组件,如图像、视频、音频等。object标签有一个属性data,我们可以在其中定义要嵌入的网页的URL。我们甚至可以使用width和height属性设置容器的宽度和高度。

<object data="https://www.baidu.com" 
width="800" 
height="800" 
type="text/html">
</object>

2、使用embed标签替代

embed标签类似于object标签,用于相同的目的,我们可以使用object标签在我们的网页中嵌入各种外部资源。我们可以嵌入PDF、图像、音频、视频和网页等媒体。标签定义了一个容器,我们可以在其中嵌入我们想要的内容。object标签是一个自闭合标签。我们可以使用src属性来指定要嵌入的网页的URL。该标签有一个type属性来指定要嵌入的内容类型。我们可以类似地定义高度和宽度,与object标签相同。注意:embed标签可用于flash文件或者在使用video标枪不成功的情况下使用,不兼容移动端,只支持pc端

<embed type="video/webm" src="video.mp4" width="10" height="10">

3、使用video标签替代

如果加载资源时视频的话可以使用video标签替代,video标签可以兼容移动端和PC端,支持Ogg\MPEG4\WebM三种格式的视频

<video width="10" height="10" controls>
    <source src="movie.mp4" type="movie/mp4">
    <source src="movie.ogg" type="movie/ogg">
</video>

4、区别

1)embed是针对非IE的浏览器的媒体播放器;

2)object标签一般是用在IE中的,非IE很少支持object;

3)object与embed同时出现,为的就是兼容不同的浏览器;

4)video是html5出的一种新标准,但并不是所有的浏览器都支持;

5)video虽然号称可以支持三种媒体类型,但常用的只有mp4.

object和embed有一个特点,就是无法动态渲染,所以无法通过jQuery去操作dom实现数据加载,要改变数据,可以重新筛选一遍达到效果。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

iframe的替代品 的相关文章

随机推荐

  • PageHelper的概述和基本使用

    PageHelper介绍 PageHelper是国内非常优秀的一款开源的mybatis分页插件 它支持基本主流与常用的数据库 例如mysql oracle mariaDB DB2 SQLite Hsqldb等 本项目在 github 的项目
  • 线与逻辑详解

    什么是线与逻辑 需要和CMOS漏极开路门 Open Drain OD 一起介绍 通常CMOS门电路都有反相器作为输出缓冲电路 而在工程实践中 有时需要将两个门的输出端并联以实现 与 逻辑的功能称为 线与 逻辑 或者用于驱动大电流负载 或者实
  • 第一章 webpack与构建发展简史

    官方loader和插件 Loaders webpack Plugins webpack 为什么需要构建工具 初识webpack webpack默认配置文件 webpack config js 可以通过webpack config
  • 数据结构-图的创建(邻接矩阵,邻接表)C语言实现

    图的定义 图 Graph G由两个集合V和E组成 记为 G V E 其中V是顶点的有穷非空集合 其实就是顶点 E是V中顶点偶对的有穷集合 就是边 V G 和E G 通常分别表示图G的顶点集合以及边集合 E G 可以为空集合 但是此时的图只有
  • 502 Bad Gateway The proxy server received an invalid response from an upstream server

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 打开网站一直报错 查看了一下nginx错误日志 发现很多的报错 2018 12 24 11 02 51 alert 20026 20026 33113943 socket
  • 【渗透测试笔记】之【内网渗透——Windows系统散列值获取与防范】

    拓扑图 Windows系统散列值获取 1 通过CS模块获取用户凭证信息 在获取到目标主机权限后 我们可以抓取hash和dump明文密码 这两项功能都需要管理员权限 如果权限不足 先要进行提权操作 抓取密码哈希 右键被控主机 gt Acces
  • 【OpenCV学习笔记】【教程翻译】五 (车牌识别之OCR分割)

    车牌识别 车牌识别的第二步主要是提取出车牌中的字符 对于每个被检测出的车牌 我们对车牌进行分割获取每个字符 然后用神经网络机器学习算法实现字符的识别 在这个过程中 我们也可以学习到如何评估一个分类算法 OCR分割 首先 我们将车牌图像作为具
  • sqli-labs 21——40关攻略

    Less 21 基于错误的复杂的字符型Cookie注入 base64编码 单引号 报错型 cookie型注入 本关和less 20相似 只是cookie的uname值经过base64编码了 登录后页面 圈出来的地方显然是base64加密过的
  • 浅谈Linux的文件系统, 新增XFS.Ext3.GFS.ReiserFS.JFS相关知识

    如果您是一位新手 也许 您还不知道如何把文件从Windows拷贝到 Linux上吧 下面 我们将说明Unix文件系统以及mount的工作过程 然后再比较详细地讨论 mount的使用和有关选项 如果您已经了解Unix文件系统是如何工作的 那么
  • debug调试神器pysnooper

    异常bug定位 print 函数也可以 但效率上还是慢 后来发现了一个叫PySnooper的装饰器 一般debug调试 都是在我们可能觉得会有问题的地方 去打印输出 看下实际输出了什么 然后思考问题所在 下载库 pip install py
  • python3 练习题100例 (十二)

    题目十二 打印出所有的 水仙花数 所谓 水仙花数 是指一个三位数 其各位数字立方和等于该数本身 例如 153是一个 水仙花数 因为153 1的三次方 5的三次方 3的三次方 usr bin env python3 coding utf 8
  • “ModuleNotFoundError: No module named sklearn”解决办法

    最近在跑实验的时候 需要导入sklearn 但是运行代码一直提示 ModuleNotFoundError No module named sklearn 实验中导入sklearn的代码 from sklearn import metrics
  • Linux CentOS7 中 完美解决VMTools失效,windows 与 Liunx间完美复制文件,无报错的解决方案

    问题 我也是才刚使用CentOS7没多久 搭建好环境后出现比较头疼的问题就是 Windows 和 Linux 之间无法复制粘贴文本和文件 这个问题只要在虚拟机中安装 VMTools 就能解决 但是不知道什么原因导致 我在CentOS 6 8
  • Linux 狂神说学习笔记

    狂神说linux Linux 基本目录 目录相关命令 文件属性 查看文件 硬链接和软链接 vim 账号管理 用户组管理 磁盘管理 进程管理 环境安装 基本目录 目录相关命令 ls al 列出目录 a所有文件包括隐藏文件 l列出所有文件包括文
  • MyBatis ognl.NoSuchPropertyException 或者 Invalid bound statement (not found)

    描述 SpringBoot Mybatis plus 项目 运行时出现如下错误 ognl NoSuchPropertyException 没有对应属性异常 Invalid bound statement not found 绑定语句无效 未
  • 问题小结(3)-dialog标题居中

    dialog标题居中问题 用系统的AlertDialog Builder创建dialog时 如果需要将dialog的title居中显示 需要调用 setCustomTitle View view 方法 对需要设置的view设置居中的相关属性
  • zookeeper 分布式共享锁的流程图

    1分布式共享锁的流程图 原理 package cn itcast bigdata zklock import java util Collections import java util List import java util Rand
  • 水球图 及各种参数设置

    水球图 Liquid Fill Chart 是Echarts的一个插件 在官方文档中没有 可以用来优雅的展示百分比数据 水球图 gif 安装 HTML中引入水球图
  • docker基础1——架构组成、安装配置

    文章目录 一 发展起源 1 1 传统虚拟化与容器虚拟化 1 2 docker底层核心技术 1 2 1 命名空间 1 2 2 控制组 1 3 docker工作方式 1 4 docker容器编排 1 5 docker优劣势 1 6 docker
  • iframe的替代品

    面试题 使用过iframe框架 那你对于iframe框架的优缺点知道多少 并且由于iframe的一些缺点 国内外针对这个框架的替代品你知道有哪些呢 知识点1 iframe框架的优缺点 优点 1 可以跨域请求其他网站 并将网站完整展示出来 2