深入探究iframe：网页嵌入的魔法盒子（上）

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 一、引言
    • iframe 的定义和作用
    • iframe 的应用场景
  • 二、iframe 的基本语法
    • iframe 的 HTML 标记
    • iframe 的属性设置
    • iframe 的 src 属性
    • iframe 的 width 和 height 属性
    • iframe 的 sandbox 属性
  • 三、iframe 的优缺点
    • iframe 的优点
    • iframe 的缺点

一、引言

iframe 的定义和作用

iframe是一种HTML标签，用于在网页中嵌入另一个网页。iframe允许您在当前页面中嵌入另一个完全独立的网页，这两个网页之间可以进行交互，但它们具有独立的域名和会话。

iframe的主要作用包括：

  1. 内容嵌入：iframe允许您将另一个网页嵌入到当前页面中，这可以用于在当前页面中显示广告、工具栏或其他内容。

  2. 跨域交互：iframe允许您在两个不同的域名之间进行交互，这可以用于实现跨域登录、跨域数据传输等功能。

  3. 页面缩放：iframe的contentWindow.resizeTo()方法可以用来调整嵌入的网页的大小。

  4. 历史记录：iframe的history对象可以用来操作嵌入网页的历史记录，这可以用于实现单页面应用的导航功能。

iframe的语法如下：

<iframe 
  src="url" 
  width="宽度" 
  height="高度" 
  frameborder="边框宽度" 
  scrolling="是否允许滚动" 
  marginwidth="外边距宽度" 
  marginheight="外边距高度">
</iframe>

其中，src属性用于指定嵌入的网页的URL，width和height属性用于指定iframe的宽度和高度，frameborder属性用于指定边框宽度，scrolling属性用于指定是否允许滚动，marginwidth和marginheight属性用于指定外边距宽度。

iframe 的应用场景

iframe 的主要应用场景包括：

  1. 内容嵌入：iframe 可以用于在网页中嵌入广告、工具栏或其他内容。这可以保持原始网页的完整性和独立性，同时方便地进行内容管理和更新。

  2. 跨域交互：iframe 可以在不同域名之间进行交互，这可以用于实现跨域登录、跨域数据传输等功能。

  3. 单页面应用：iframe 可以用于实现单页面应用的导航功能，通过操作 iframe 的 history 对象，可以实现页面之间的切换。

  4. 页面缩放：使用 iframe 的 contentWindow.resizeTo() 方法，可以调整嵌入网页的大小，以适应不同的屏幕尺寸。

  5. 历史记录：iframe 的 history 对象可以用来操作嵌入网页的历史记录，这可以用于实现浏览器的后退和前进功能。

  6. 登录验证：iframe 可以用于登录验证，将登录表单嵌入到 iframe 中，可以避免跨域请求的问题。

  7. 数据展示：iframe 可以用于展示数据，如报表、数据可视化等。

  8. 页面加载速度优化：使用 iframe 可以实现页面内容的异步加载，从而提高页面的加载速度。

  9. 页面布局：iframe 可以用于实现页面布局，通过调整 iframe 的大小和位置，可以实现灵活的页面布局。

总之，iframe 在网页开发中具有广泛的应用场景，可以方便地进行内容嵌入、跨域交互、单页面应用实现、页面缩放、历史记录操作等。

二、iframe 的基本语法

iframe 的 HTML 标记

iframe 是一种 HTML 标签，用于在网页中嵌入另一个网页。其基本语法如下：

<iframe src="url" width="宽度" height="高度" frameborder="边框宽度" scrolling="是否允许滚动" marginwidth="外边距宽度" marginheight="外边距高度"></iframe>

其中，各属性的含义如下：

  • src：用于指定嵌入的网页的 URL。
  • width 和 height：用于指定 iframe 的宽度和高度。
  • frameborder：用于指定边框宽度。
  • scrolling：用于指定是否允许滚动。取值为 “yes” 或 “no”。
  • marginwidth 和 marginheight：用于指定外边距宽度。

例如，以下代码将嵌入一个宽度为 300 像素，高度为 200 像素，边框宽度为 1 像素，允许滚动的网页：

<iframe src="https://www.example.com" width="300" height="200" frameborder="1" scrolling="yes" marginwidth="10" marginheight="10"></iframe>

iframe 的属性设置

iframe 标签的属性主要有以下几个：

  1. src：指定 iframe 内容来源，可以是本地的 HTML 文件，也可以是网络上的其他 HTML 文件。

  2. width 和 height：指定 iframe 的宽度和高度。

  3. frameborder：指定 iframe 边框宽度，取值为 0 或 1，0 表示去除边框，1 表示保留边框。

  4. scrolling：指定 iframe 是否允许滚动，取值为 yes 或 no。

  5. marginwidth 和 marginheight：指定 iframe 的外边距宽度。

例如，以下代码创建了一个宽度为 300 像素，高度为 200 像素，边框宽度为 1 像素，允许滚动的 iframe：

<iframe src="https://www.example.com" width="300" height="200" frameborder="1" scrolling="yes" marginwidth="10" marginheight="10"></iframe>

注意：iframe 标签在一些浏览器中可能不受支持，特别是移动设备上。在这种情况下，可以考虑使用其他方法，如使用 JavaScript 创建 iframe，或者使用 div 标签模拟 iframe 效果。

iframe 的 src 属性

iframe 的 src 属性用于指定嵌入的网页的 URL。通过设置 src 属性，可以加载并显示指定 URL 的网页内容。

例如，以下代码将加载并显示 URL 为 “https://www.example.com” 的网页内容：

<iframe src="https://www.example.com" width="300" height="200"></iframe>

需要注意的是，如果网页使用了 SSL 证书，那么 iframe 的 src 属性只能设置为 HTTPS 协议的 URL，否则 iframe 内容将无法加载。

另外，iframe 的 src 属性也可以设置为本地 HTML 文件的 URL，例如：

<iframe src="local.html" width="300" height="200"></iframe>

这种情况下，浏览器会加载并显示本地 HTML 文件的内容。

iframe 的 width 和 height 属性

iframe 的 width 和 height 属性用于指定 iframe 的宽度和高度。这两个属性可以用来控制 iframe 的大小，以适应不同的页面布局。

例如，以下代码将创建一个宽度为 300 像素，高度为 200 像素的 iframe：

<iframe src="https://www.example.com" width="300" height="200"></iframe>

如果需要动态调整 iframe 的大小，可以使用 JavaScript 代码来实现。例如，以下代码将增加 iframe 的高度：

document.getElementById("myIframe").style.height = "250px";

其中，“myIframe” 是 iframe 的 id 属性值。

iframe 的 sandbox 属性

iframe 的 sandbox 属性是一个实验性的属性，用于限制 iframe 内的脚本行为。这个属性可以防止 iframe 内的脚本访问或修改父文档的内容，从而提高安全性。

sandbox 属性可以取以下值：

  • “”: 允许 iframe 内的脚本访问和修改父文档的内容。
  • “allow-same-origin”: 允许 iframe 内的脚本访问同源的父文档内容。
  • “allow-forms”: 允许 iframe 内的脚本提交表单。
  • “allow-scripts”: 允许 iframe 内的脚本执行 JavaScript 代码。
  • “allow-top-navigation”: 允许 iframe 内的脚本在 top 窗口中进行导航。

多个值之间用空格分隔。

例如，以下代码将设置 iframe 的 sandbox 属性，限制其内的脚本行为：

<iframe src="https://www.example.com" width="300" height="200" sandbox="allow-same-origin allow-forms allow-scripts"></iframe>

需要注意的是，sandbox 属性仅适用于支持该属性的浏览器。在较旧的浏览器中，sandbox 属性可能不起作用。

三、iframe 的优缺点

iframe 的优点

iframe 是一种 HTML 标签，用于在网页中嵌入另一个网页。其优点如下：

  1. 内容分离：iframe 可以将不同的内容分离出来，独立进行加载，这样就可以避免整个页面重新加载，提高加载速度。

  2. 独立控制：iframe 内的内容可以独立控制，例如可以独立改变 iframe 内的 URL，浏览器的地址栏显示的将是 iframe 内的 URL，这在对 SEO 友好的方面上有很大的作用。

  3. 跨域：iframe 可以加载其他域名的内容，这在实现一些跨域操作时非常有用。

  4. 布局：iframe 可以用来实现一些特殊的布局，例如，实现一个固定位置的导航栏。

  5. 安全：使用 iframe 可以限制子页面的权限，防止子页面访问父页面的敏感信息。

在这里插入图片描述

例如：

<iframe src="https://www.example.com" width="300" height="200"></iframe>

上述代码会在网页中嵌入一个宽度为 300 像素，高度为 200 像素的 iframe，该 iframe 加载 https://www.example.com 的内容。

iframe 的缺点

iframe 是一种 HTML 标签，用于在网页中嵌入另一个网页。其缺点如下：

  1. 兼容性问题：iframe 在一些浏览器中可能不受支持，特别是移动设备上。

  2. SEO 优化：iframe 内的内容通常不容易被搜索引擎优化，因为搜索引擎可能无法正确地抓取和索引 iframe 内的内容。

  3. 通信问题：iframe 内的页面与父页面进行通信比较困难，需要通过 JavaScript 进行跨域操作，而跨域操作在某些浏览器中可能受到限制。

  4. 管理问题：iframe 内的页面可能独立于父页面进行加载和执行，这可能会导致一些管理上的问题，例如，iframe 内的页面加载了恶意代码，这可能会影响到父页面的安全。

  5. 性能问题：过多的使用 iframe 可能会导致性能问题，因为浏览器需要加载和显示多个独立的文档。

在这里插入图片描述

例如：

<iframe src="https://www.example.com" width="300" height="200"></iframe>

上述代码会在网页中嵌入一个宽度为 300 像素，高度为 200 像素的 iframe，该 iframe 加载 https://www.example.com 的内容。如果 iframe 内的内容加载速度过慢，可能会影响整个页面的性能。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

2024/2/1学习记录

2024/2/1学习记录

echarts 为柱条添加背景色&#xff1a; 若想设置折线图的点的样式&#xff0c;设置 series.itemStyle 指定填充颜色就好了&#xff0c;设置线的样式设置 lineStyle 就好了。 在折线图中倘若要设置空数据&#xff0c;用 - 表示即可&#xff0c;这对于其他系列的数据也是 适用的…
阅读更多...
Java知识点总结

Java知识点总结

数据类型强转&#xff1a;byte short int long float double &#xff1b; 数组定义 [ ]数组名 clone-复制数组equals-比较存储地址 toString sort-排序 length-长度 arraycopy([]a,s,[]b,ss,n)-数组复制 运算符及语句 instanceof双目运算符 –左对象右类 判断是否是该类创建…
阅读更多...
OpenCV学习记录——边缘检测

OpenCV学习记录——边缘检测

文章目录 前言一、边缘检测原理二、Canny边缘检测算法三、具体应用代码 前言 在做某些图像处理时&#xff0c;通常需要将识别到的物体边界提取出来&#xff0c;从而帮助我们实现目标检测&#xff0c;这就需要用到边缘检测&#xff0c;例如人脸识别和运动目标的检测都需要先进行…
阅读更多...
docker镜像命令

docker镜像命令

docker images 列表本机上的镜像 - REPOSITORY&#xff1a;表示镜像的仓库源 - TAG&#xff1a;镜像的标签 - IMAGE ID&#xff1a;镜像 - ID CREATED&#xff1a;镜像创建时间 - SIZE&#xff1a;镜像大小 同一仓库源可以有多个 TAG&#xff0c;代表这个仓库源的不同个版本&am…
阅读更多...
亚信安全助力宁夏首个人工智能数据中心建成 铺设绿色算力安全底座

亚信安全助力宁夏首个人工智能数据中心建成 铺设绿色算力安全底座

近日&#xff0c;由宁夏西云算力科技有限公司倾力打造&#xff0c;亚信安全科技股份有限公司&#xff08;股票代码&#xff1a;688225&#xff09;全力支撑&#xff0c;总投资达数十亿元人民币的宁夏智算中心项目&#xff0c;其一期工程——宁夏首个采用全自然风冷技术的30KW机…
阅读更多...
FairGuard游戏加固入选《CCSIP 2023中国网络安全行业全景册（第六版）》

FairGuard游戏加固入选《CCSIP 2023中国网络安全行业全景册（第六版）》

2024年1月24日&#xff0c; FreeBuf咨询正式发布《CCSIP 2023中国网络安全行业全景册(第六版)》。本次发布的全景图&#xff0c;共计展示20个一级分类、108个细分安全领域&#xff0c;旨在为广大企业提供网络安全产品选型参考&#xff0c;帮助企业了解中国网络安全技术与市场的…
阅读更多...
部署前后端分离项目详细教程

部署前后端分离项目详细教程

部署前后端分离项目详细教程 1、准备工作 首先你需要一台服务器&#xff0c;然后在服务器上安装好你所需要的环境&#xff0c;我这里用的宝塔界面来安装环境。 如果有人不知道怎么安装宝塔界面&#xff0c;可参考这篇文章&#xff0c;如果不知道怎么买服务器&#xff0c;可以参…
阅读更多...
硅谷仿制网易云小程序登录问题解决

硅谷仿制网易云小程序登录问题解决

引言&#xff1a; 尚硅谷视频中的登录拥挤问题&#xff0c;导致无法登录&#xff0c;所以&#xff0c;我去gitee上从新找了个别人搞好点网易云的api接口【也是比较出名的那个&#xff0c;不想用不行啊&#xff0c;我也试过很多方法都不行】 接口详解网址&#xff1a;网易云音乐…
阅读更多...
Linux离线安装Telnet

Linux离线安装Telnet

前言&#xff1a;由于服务器部署在内网环境&#xff0c;不能yum安装 1.先从网站下载好我们所需要到的三个rpm包http://www.rpmfind.net/linux/rpm2html/search.php?queryxinetd&submitSearch...&system&arch image.png 三个依赖包分别是&#xff1a; -rw-r--r-- 1…
阅读更多...
状态压缩 笔记

状态压缩 笔记

棋盘式的f[i][j]中表示状态的j可以是状态本身也可以是在合法状态state中的下标 用状态本身比较方便&#xff0c;用下标比较省空间 用下标的话可以开id[M]数组记录一下 蒙德里安的梦想 求把 NM的棋盘分割成若干个 12的长方形&#xff0c;有多少种方案。 例如当 N2&#xff0…
阅读更多...
el-table动态合并

el-table动态合并

废话就不多说了&#xff0c;直接上代码&#xff01;&#xff01;&#xff01; 合并行 // 方法一 <template><div class"container"><el-table :data"dataSource" :border"true":header-cell-style"{ font-weight: normal,…
阅读更多...
Kafka常见生产问题详解

Kafka常见生产问题详解

目录 生产环境常见问题分析 消息零丢失方案 1、生产者发消息到Broker不丢失 2、Broker端保存消息不丢失 3、消费者端防止异步处理丢失消息 消息积压如何处理 如何保证消息顺序 ​问题一、如何保证Producer发到Partition上的消息是有序的 问题二&#xff1a;Partition中…
阅读更多...
深入解剖指针篇（2）

深入解剖指针篇（2）

目录 指针的使用 strlen的模拟实现 传值调用和传址调用 数组名的理解 使用指针访问数组 一维数组传参的本质 冒泡排序 个人主页&#xff08;找往期文章&#xff09;&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 指针的使用 strlen的模拟实现 库函数strlen的功能是求字符串…
阅读更多...
面试经典 150 题 -- 矩阵 (总结)

面试经典 150 题 -- 矩阵 (总结)

总的链接 : 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台 36 . 有效的数独 模拟 : 用数组模拟哈希表来判断对应的行&#xff0c;列和当前元素所在的3*3方格中是否重复出现&#xff0c;是的话&#xff0c;直接return false…
阅读更多...
基于C/C++的MFC的IDC_MFCEDITBROWSE2控件不显示ico问题记录

基于C/C++的MFC的IDC_MFCEDITBROWSE2控件不显示ico问题记录

打开资源文件 *.rc文件 &#xff0c;在最上方添加 #if !defined(_AFXDLL) #include "afxribbon.rc" // MFC ribbon and control bar resources #endif 如下图所示&#xff1a;
阅读更多...
【IC设计】Windows下基于IDEA的Chisel环境安装教程（图文并茂）

【IC设计】Windows下基于IDEA的Chisel环境安装教程（图文并茂）

Chisel环境安装教程 第一步 安装jdk&#xff0c;配置环境变量第二步 安装sbt&#xff0c;不用配置环境变量第三步 安装idea社区版第四步 离线安装scala的idea插件第五步 配置sbt换源1.切换目录2.创建repositories文件3.配置sbtconfig.txt文件 第六步 使用chisel-tutorial工程运…
阅读更多...
亚信安慧的AntDB数据库：稳定可靠的保障

亚信安慧的AntDB数据库：稳定可靠的保障

亚信安慧AntDB数据库在运营商自主可控替换项目中的成功应用&#xff0c;具有极其重要的意义。该数据库的落地&#xff0c;不仅为这一项目注入了强大的支持力量&#xff0c;还在更大程度上提升了整体的运营效能。作为一种高效可靠的数据库解决方案&#xff0c;AntDB引入了先进的…
阅读更多...
如何通过CVE漏洞编码找到对应的CVE漏洞详情及源码修改地址

如何通过CVE漏洞编码找到对应的CVE漏洞详情及源码修改地址

背景&#xff1a; 最近正在使用docker进行一些cve漏洞的复现&#xff0c;有时候就要通过CVE的漏洞编码&#xff0c;找到对应的漏洞详情&#xff0c;以及漏洞的源码修改 以我上一篇文章的CVE-2020-17518编码为例 Apache Flink文件上Apache Flink文件上 方法&#xff1a; 通…
阅读更多...
Mobileye CES 2024 自动驾驶新技术新方向

Mobileye CES 2024 自动驾驶新技术新方向

Mobileye亮相2024年国际消费类电子产品展览会推出什么自动驾驶新技术? Mobileye再次亮相CES&#xff0c;展示了我们的最新技术&#xff0c;并推出了Mobileye DXP--我们全新的驾驶体验平台。 与往年一样&#xff0c;Mobileye是拉斯维加斯展会现场的一大亮点&#xff0c;让参观…
阅读更多...
bank conflict

bank conflict

前置知识&#xff1a; shared memory 被分成 32 个 bank一个 warp 32 个线程每个 bank 4 byte如果同一 warp 中不同线程访问同一 bank 的不同地址则发生 bank conflict 请注意需要是一个 warp 中的不同线程&#xff01;如果一个线程访问 shared memory 的两个元素&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023