5.iframe

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.mzph.cn/news/697401.shtml

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

相关文章

ssm+springmvc基于springboot的宠物领养系统的设计与实现_j5fk4

宠物领养系统主要是为了提高管理员的工作效率&#xff0c;满足管理员对更方便、更快、更好地存储所有信息和数据检索功能的要求。通过对多个类似网站的合理分析&#xff0c;确定了宠物领养系统的各个模块。考虑到用户的可操作性&#xff0c;经过深入调查研究&#xff0c;遵循系…

力扣算法Algorithm竞赛模板库(codeforces-go):含了算法竞赛中常用的数据结构和算法实现,助力开发者更高效地解决问题

1.算法Algorithm竞赛模板库&#xff08;codeforces-go&#xff09; 算法竞赛模板库&#xff0c;为算法竞赛爱好者提供了一系列精心设计的算法模板。这个库包含了算法竞赛中常用的数据结构和算法实现&#xff0c;助力开发者更高效地解决问题 一个算法模板应当涵盖以下几点&…

Android 圆环带刻度条进度动画效果实现

效果图 需求是根据传感器做一个重力球效果&#xff0c;先实现了动画后续加上跟传感器联动. 又是摆烂的一天&#xff0c; 尚能呼吸&#xff0c;未来可期啊 View源码 package com.android.circlescalebar.view;import android.content.Context; import android.content.res.Typ…

【治愈系】心灵鸡汤美文:温暖你的每一寸心田

1.人生就像一杯茶&#xff0c;不会苦一辈子&#xff0c;但总会苦一阵子。只有经历过苦涩&#xff0c;才能品味到甜美的滋味。 2.每一次失败都是一次宝贵的经验&#xff0c;它教会我们如何更好地面对困难和挑战。不要害怕失败&#xff0c;因为失败是成功的前奏。 3.人生最重要的…

【Vue】本地使用 axios 调用第三方接口并处理跨域

前端处理跨域 一. 开发准备 开发工具&#xff1a;VScode框架&#xff1a;Vue2项目结构&#xff1a;vue脚手架生成的标准项目&#xff08;以下仅显示主要部分&#xff09; 本地已搭建好的端口&#xff1a;8080要请求的第三方接口&#xff1a;http://1.11.1.111:端口号/xxx-api…

【Git工具实战】实用真实 Git 开发工作流程

前言 最近工作中发现&#xff0c;很多开发人员连最基本的Git怎么使用都不知道&#xff0c;比如什么时候切分支&#xff0c;什么时候合并代码&#xff0c;代码遇到冲突怎么办&#xff0c;经常出现掉代码&#xff0c;代码合并后丢失的情况。以下为个人总结的常规Git开发工作流程…

思腾合力携京东打造服务器采购解决方案,助企业高校提升算力

随着云计算、大数据、人工智能的快速发展&#xff0c;服务器需求不断扩大&#xff0c;市场规模持续保持增长。IDC数据显示&#xff0c;预计2023年我国服务器市场规模将增至308亿美元。基于对服务器市场的趋势洞察&#xff0c;思腾合力携手京东品牌持续深化合作&#xff0c;在保…

深入浅出JVM(六)之前端编译过程与语法糖原理

本篇文章将围绕Java中的编译器&#xff0c;深入浅出的解析前端编译的流程、泛型、条件编译、增强for循环、可变长参数、lambda表达式等语法糖原理 编译器与执行引擎 编译器 Java中的编译器不止一种&#xff0c;Java编译器可以分为&#xff1a;前端编译器、即时编译器和提前编…

(提供数据集下载)基于大语言模型LangChain与ChatGLM3-6B本地知识库调优:数据集优化、参数调整、Prompt提示词优化实战

文章目录 &#xff08;提供数据集下载&#xff09;基于大语言模型LangChain与ChatGLM3-6B本地知识库调优&#xff1a;数据集优化、参数调整、提示词Prompt优化本地知识库目标操作步骤问答测试的预设问题原始数据情况数据集优化&#xff1a;预处理&#xff0c;先后准备了三份数据…

C++:STL简介

1. 什么是STL STL(standard template libaray- 标准模板库 ) &#xff1a; 是 C 标准库的重要组成部分 &#xff0c;不仅是一个可复用的组件库&#xff0c;而且 是一个包罗数据结构与算法的软件框架 。 2. STL的版本 3. STL的六大组件 4.STL的缺陷 1. STL库的更新太慢了。这…

用于将Grafana默认数据库sqlite3迁移到MySQL数据库

以下是一个方案&#xff0c;用于将Grafana数据迁移到MySQL数据库。 背景: grafana 默认采用的是sqlite3&#xff0c;当我们要以集群形式部署的时使用mysql较为方便&#xff0c;试了很多sqlite转mysql的方法要么收费,最后放弃。选择自己动手风衣足食。 目标: 迁移sqlite3切换…

day16_ListSet课后练习题 - 参考答案

文章目录 day16_课后练习题第1题第2题第3题第4题第5题第6题第7题第8题 day16_课后练习题 第1题 案例&#xff1a; ​ 1、用一个String[]数组存点数 ​ 2、用一个String[]数组存花色 ​ 3、用一个String[]数组存大王、小王 ​ 4、用上面的数组&#xff0c;生成一副扑克牌 …

C++ 文件操作-文本文件-读取和打开文件方法详解

读文件步骤 #include <iostream> using namespace std; #include <fstream> #include <string> //文本文件 读文件void test(){// 1 包含头文件// 2 创建流对象ifstream ifs;// 3 打开文件 并且判断是否打开成功ifs.open("table.txt",ios::in); //…

VS 2015 发布 WebService

本文介绍了使用VS2015发布WebService的步骤 右键项目点击发布 选择文件系统和目标位置 配置选择Debug-Any CPU&#xff08;选其他也可以&#xff09; 4. 点击发布&#xff0c;在对应文件夹中可以看到发布出来的内容。 记录遇到的问题&#xff0c; 发布前要选择删除所有现有文…

使用MongoDB数据库和Mongoose库在Node.js中进行数据存储

在Node.js中使用MongoDB数据库和Mongoose库进行数据存储是前端开发中常用的技术之一。MongoDB是一种非关系型数据库&#xff0c;具有高性能、易扩展等优点&#xff1b;而Mongoose是在Node.js中对MongoDB进行操作的框架&#xff0c;简化了数据库操作&#xff0c;并提供了丰富的功…

Js的 Promise的 then catch 笔记240222

Js的 Promise的 then catch 笔记240222 基本用法 new Promise(f>{setTimeout(ev>{f("一秒后输出控制台");},1000); }).then(f的参数>{console.log(f的参数); }); // 控制台输出: 一秒后输出控制台上面代码中, f 的标准名叫做 resolve , 所以应该写成 new …

知识图谱数据处理流程是什么

在当今信息时代&#xff0c;数据已经成为企业决策和业务发展的重要驱动力。然而&#xff0c;随着数据量的不断增加&#xff0c;传统的数据处理方法已经难以满足需求。知识图谱作为一种新兴的技术&#xff0c;正逐渐成为处理大规模数据的关键工具。本文将深入探讨知识图谱的数据…

写代码中的一些“小技巧”

目录 前言 1.不注重代码格式 1.1 空格 1.2 换行 2.随意的命名 2.1 有意义的参数名 2.2 见名知意 2.3 参数名风格一致 3.出现大量重复代码 4.从不写注释 5.方法过长 6.参数过多 7.代码层级太深 8.判断条件太多 9.硬编码 10.事务过大 11.在循环中远程调用 11.1 …

CSS 面试题汇总

CSS 面试题汇总 1. 介绍下 BFC 及其应 参考答案&#xff1a; 参考答案&#xff1a; 所谓 BFC&#xff0c;指的是一个独立的布局环境&#xff0c;BFC 内部的元素布局与外部互不影响。 触发 BFC 的方式有很多&#xff0c;常见的有&#xff1a; 设置浮动overflow 设置为 auto、scr…

【力扣hot100】刷题笔记Day10

前言 一鼓作气把链表给刷完&#xff01;&#xff01;中等题困难题冲冲冲啊啊啊&#xff01; 25. K 个一组翻转链表 - 力扣&#xff08;LeetCode&#xff09; 模拟 class Solution:def reverseKGroup(self, head: Optional[ListNode], k: int) -> Optional[ListNode]:# 翻转…