5.iframe

news2025/1/10 20:25:56

iframe

经典真题

  • iframe 框架有哪些优缺点?
  • iframe 用来干什么的

iframe 介绍

iframe 称之为嵌入式框架,嵌入式框架可以把一个完整的网页内容嵌入到现有的网页中。

下面是一个 iframe 的简单示例:

<body>
    <p>iframe 示例</p>
    <iframe src="https://juejin.cn/"></iframe>
</body>

效果:

image-20240222111516248

可以看到,在当前的网页,又嵌入了一个其他页面。

那么这在实际开发中有啥意义呢?

实际上,在早期的时候, iframe 在开发中用得很多。使用 iframe 可以很方便的制作一个页面的公共部分,例如导航栏。

现在仍然能够找到使用 iframe 的网站(大多是旧的项目)

例如 W3C school

image-20240222111530634

再比如邮箱:

但是随着 Ajax 的出现,iframe 用得越来越少了。现在在某些特定的场景还能见到,比如模拟窗口,邮箱或者 HTML 在线编辑器等。

究其原因,是因为 iframe 有种种不便,比如一个直观的问题就是 iframe 的自适应高度,这是处理起来比较麻烦的问题,随便百度下都是一大串的代码。

另外还有个重大的缺点,那就是搜索引擎的“爬虫”程序无法解读这种页面,当“爬虫”遇到多个页面嵌套的网页时只看到框架却找不到链接,然后认定此网站是死站点并离开。这对于 SEO 来讲无疑是毁灭性的打击。并且使用大量的 iframe 标签也会稀释你该页面的关键词密度并对其产生影响。

真题解答

  • iframe 用来干什么的?有哪些优缺点?

参考答案:

iframe 也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中。

优点

  • 重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,增加了网页下载速度)
  • 方便制作导航栏

缺点

  • 会产生很多页面,不容易管理
  • 调用外部页面,需要额外调用 CSS,给页面带来额外的请求次数
  • 会阻塞页面的加载,windowonload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发
  • 浏览器的后退按钮无效
  • 无法被一些搜索引擎索引到
  • 多数小型的移动设备(PDA 手机)无法完全显示框架

由于上面诸多缺点,因此不符合标准网页设计的理念,已经被标准网页设计抛弃,目前框架的所有优点完全可以使用 Ajax 实现,因此已经没有必要使用 iframe 框架了。

-EOF-

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1464893.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Spring Boot+Mybatis+Shiro+EasyUI的宠物医院管理系统

项目介绍 本系统前台面向的用户是客户&#xff0c;客户可以进行预约、浏览医院发布的文章、进入医院商城为宠物购物、如有疑问可以向官方留言、还可以查看关于自己的所有记录信息&#xff0c;如&#xff1a;看病记录、预约记录、疫苗注射记录等。后台面向的用户是医院人员&…

2024年小白搭建雾锁王国Enshrouded服务器搭建教程

雾锁王国游戏服务器怎么创建&#xff1f;阿里云雾锁王国服务器搭建教程是基于计算巢服务&#xff0c;3分钟即可成功创建Enshrouded游戏服务器&#xff0c;阿里云8核32G雾锁王国专用游戏服务器90元1个月、271元3个月&#xff0c;阿里云百科aliyunbaike.com亲自整理雾锁王国服务器…

【Oracle】玩转Oracle数据库(四):SQL语言

前言 嘿&#xff0c;各位数据达人们&#xff01;准备好迎接新的挑战了吗&#xff1f;今天&#xff0c;我们要探索的是数据库世界的魔法咒语——SQL语言&#xff01;&#x1f52e;&#x1f4bb; 在这篇博文【Oracle】玩转Oracle数据库&#xff08;四&#xff09;&#xff1a;SQL…

Puppeteer 使用实战:如何将自己的 CSDN 专栏文章导出并用于 Hexo 博客(三)

文章目录 往期效果将文章信息导出适配 hexo 的文章模板导出的文章路径问题终端控制执行脚本代码整理结尾 往期 Puppeteer 使用实战&#xff1a;如何将自己的 CSDN 专栏文章导出并用于 Hexo 博客&#xff08;二&#xff09; 效果 写了一个 node 脚本用来批量处理 md 文件 本期…

Jenkins 中部署Nodejs插件并使用,并构建前端项目(3)

遇到多个版本nodeJS需要构建的时候 1、第一种就是一个配置安装&#xff0c;然后进行选中配置 2、第二种就是插件&#xff1a;nvm-wrapper&#xff0c;我们还是选用NodeJS插件&#xff1a; &#xff08;1&#xff09;可以加载任意npmrc文件&#xff1b; &#xff08;2&#x…

【DAY03 软考中级备考笔记】存储系统,总线系统,输入输出系统和可靠性

存储系统&#xff0c;总线系统&#xff0c;输入输出系统和可靠性 2月22日 – 天气&#xff1a;阴转晴 济南下大雪&#xff0c;居家办公两天。 1. 计算机存储器的分类 根据存储位置划分&#xff1a; 内存/主存&#xff1a;用来保存当前正在运行的程序所需要的数据&#xff0c…

远程连接 vscode 出错 “远程主机可能不符合 glibc 和 libstdc++ VS Code 服务器的先决条件”

原因&#xff1a; vscode 版本是 1.86&#xff0c;服务器上的 glibc 和 libstdc 版本不满足 要求(2.28 和 3.4.25)。 解决&#xff1a; 1、下载 1.85.2&#xff0c;解压直接运行 Code.exe。 2、回退 Remote-ssh 到 0.107.1。 参考&#xff1a; vscode 1.86版本远程ssh不兼容旧…

开源图表库Echarts 简介与基本使用

ECharts 是一个使用 JavaScript 实现的开源可视化图表库&#xff0c;由百度团队开发。它提供了丰富的图表类型&#xff0c;如折线图、柱状图、饼图、地图、雷达图等&#xff0c;并且可以轻松地与其他前端框架和库集成。ECharts 的设计目的是为了满足复杂数据的可视化需求&#…

CleanMyMac X2024破解版Mac系统优化和清理软件

CleanMyMac X2024全面介绍作为一名软件分析师&#xff0c;我深入研究了CleanMyMac X这款Mac系统优化和清理软件。CleanMyMac X以其丰富的功能、独特的特点、显著的优势以及广泛的适用场景&#xff0c;赢得了市场和用户的青睐。 CleanMyMac X2024绿色永久全新版下载如下: https…

Vulnhub靶机:DC8

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;DC8&#xff08;10.0.2.61&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/dc-8,367/…

全球游戏市场回暖,Flat Ads推动海外获客增长

摘要:热门游戏品类分析,解读新兴市场与赛道 近日,中国音数协游戏工委发布了《2023年中国游戏出海研究报告》,据报告数据显示,2023年,全球游戏市场规模11773.79亿元,同比增长6.00%,呈现增长回暖趋势。 图源:伽马数据 1.SLG和RPG游戏热度居高不下,休闲游戏增长势头强劲 目前,S…

MacBook安装Ansible

MacBook安装Ansible Ansible介绍 ansible是新出现的自动化运维工具&#xff0c;基于Python开发&#xff0c;集合了众多运维工具&#xff08;puppet、chef、func、fabric&#xff09;的优点&#xff0c;实现了批量系统配置、批量程序部署、批量运行命令等功能。 ansible是基于…

《多线程并发控制:选择正确的锁策略》:互斥锁、自旋锁、读写锁、乐观锁、悲观锁

各类锁的概念回顾 互斥锁 互斥锁加锁失败后&#xff0c;线程会释放 CPU &#xff0c;给其他线程&#xff1b;自旋锁加锁失败后&#xff0c;线程会忙等待&#xff0c;直到它拿到锁&#xff1b; 互斥锁是一种「独占锁」&#xff0c;比如当线程 A 加锁成功后&#xff0c;此时互…

ubuntu22.04@laptop OpenCV Get Started: 015_deep_learning_with_opencv_dnn_module

ubuntu22.04laptop OpenCV Get Started: 015_deep_learning_with_opencv_dnn_module 1. 源由2. 应用Demo2.1 C应用Demo2.2 Python应用Demo 3. 使用 OpenCV DNN 模块进行图像分类3.1 导入模块并加载类名文本文件3.2 从磁盘加载预训练 DenseNet121 模型3.3 读取图像并准备为模型输…

第2.1章 StarRocks表设计——概述

注&#xff1a;本篇文章阐述的是StarRocks-3.2版本的表设计相关内容。 建表是使用StarRocks非常重要的一环&#xff0c;规范化的表设计在某些场景下能使查询性能有数倍的提升。StarRocks的表设计涉及到的知识点主要包括数据表类型、数据分布&#xff08;分区分桶及排序键&#…

【DDD】学习笔记-发布者—订阅者模式

在领域设计模型中引入了领域事件&#xff0c;并不意味着就采用了领域事件建模范式&#xff0c;此时的领域事件仅仅作为一种架构或设计模式而已&#xff0c;属于领域设计模型的设计要素。在领域设计建模阶段&#xff0c;如何选择和设计领域事件&#xff0c;存在不同的模式&#…

通信入门系列——锁相环、平方环、Costas环

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 本节目录 一、锁相环 1、压控振荡…

探索分布式强一致性奥秘:Paxos共识算法的精妙之旅

提到分布式算法&#xff0c;就不得不提 Paxos 算法&#xff0c;在过去几十年里&#xff0c;它基本上是分布式共识的代名词&#xff0c;因为当前一批常用的共识算法都是基于它改进的。比如&#xff0c;Fast Paxos 算法、Cheap Paxos、Raft 算法等。 由莱斯利兰伯特&#xff08;L…

AI Agent深入浅出——以ERNIE SDK和多工具智能编排为例

在过去一年里&#xff0c;通用大语言模型&#xff08;LLM&#xff09;的飞速发展引起了全球的关注。百度等科技巨头推出了各自的大模型&#xff0c;不断提高语言模型性能的上限。然而&#xff0c;业界对LLM所设定的目标不再局限于基本的问答功能&#xff0c;而是寻求利用大模型…

mysql入门到精通007-基础篇-事务

1、事务简介 事务是一组操作的集合&#xff0c;它是一个不可分割的事物单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 2、操作演示 开始张三和李四账户表中都是2000元&#xf…