iframe的使用详解

       

目录

一、基本概念和语法

二、优点

1.内容整合与复用：

2.独立的浏览环境：

3.跨域数据展示：

三、缺点

1.可访问性问题：

2.性能问题：

3.安全风险：

四、替代方案

1.使用JavaScript框架进行组件化开发：

2.使用服务器端渲染（SSR）：

3.使用Web Components:

五、使用示例

目前流行的三大框架已经不太用到iframe（内联框架）这个HTML元素，但是还有些历史比较悠久的老项目还在使用JQuery或者原生js，这个时候就可能需要用到iframe了，如果你对这个不太了解的话，不妨通过以下介绍及案例学习下。

一、基本概念和语法

        iframe是 HTML 中的一个元素，用于在一个网页中嵌入另一个网页。其基本语法如下:

<iframe src="嵌入的网页地址" width="宽度值" height="高度值" frameborder="边框属性值（0 表示无边框）"></iframe>

        例如：

<!DOCTYPE html>
<html><body><h2>使用 iframe 嵌入网页</h2><iframe src="https://www.example.com" width="500" height="300" frameborder="0"></iframe></body></html>

        在这个例子中，一个宽度为 500 像素、高度为 300 像素且无边框的iframe被嵌入到当前网页中，显示了https://www.example.com的内容。

二、优点

1.内容整合与复用：

        可以轻松地将来自不同源的内容整合到一个页面中。比如，你可以在企业内部管理系统的页面中嵌入外部的地图服务、视频平台或其他第三方应用，为用户提供更丰富的功能和信息，而无需在自己的系统中重新开发这些功能。

        对于一些常用的功能模块，如用户登录框、广告展示等，可以在一个独立的页面中开发，然后通过iframe在多个不同的页面中复用，提高开发效率和代码的可维护性。

2.独立的浏览环境：

        iframe中的内容在一定程度上与主页面相互独立。这意味着嵌入的网页可以有自己的样式、脚本和交互逻辑，不会与主页面的代码产生直接冲突。例如，嵌入的网页可以使用不同的 JavaScript 框架或库，而不会影响主页面的正常运行。

        对于一些需要在特定环境中运行的内容，如旧版的网页应用或使用特定技术栈开发的页面，iframe可以提供一个相对隔离的环境，确保其能够正常显示和运行。

3.跨域数据展示：

        在某些情况下，iframe可以用于展示来自不同域的内容，而无需进行复杂的跨域请求处理。例如，一些数据分析平台可以通过iframe将生成的报表嵌入到客户的企业管理系统中，实现数据的可视化展示。

        虽然跨域的iframe之间存在一些安全限制，但可以通过一些技术手段，如使用postMessage方法进行跨域通信，实现数据的传递和交互。

三、缺点

1.可访问性问题：

        iframe可能会给有特殊需求的用户带来访问障碍。例如，屏幕阅读器等辅助技术可能难以正确处理iframe中的内容，导致视障用户无法获取完整的信息。这是因为iframe中的内容对于辅助技术来说可能是一个相对独立的区域，需要额外的处理才能被识别和访问。

        对于一些依赖键盘导航的用户，iframe也可能会造成困扰。例如，当用户在主页面中使用键盘导航时，可能无法直接进入iframe中的内容，需要额外的操作才能切换到iframe的焦点。

2.性能问题：

        加载多个iframe可能会导致页面加载速度变慢。这是因为每个iframe都相当于一个独立的网页，需要单独加载其资源，包括 HTML、CSS、JavaScript 和图片等。如果嵌入的网页较大或加载时间较长，会显著影响整个页面的加载性能。

        此外，iframe的存在可能会增加浏览器的内存占用，尤其是当多个iframe同时存在时，可能会导致浏览器性能下降，甚至出现卡顿或崩溃的情况。

3.安全风险：

        iframe可能会引入安全风险，因为嵌入的页面可能来自不可信的源。如果嵌入的网页被恶意攻击者篡改，可能会在主页面中执行恶意脚本，窃取用户的敏感信息或进行其他恶意操作。

        跨域的iframe之间也存在一些安全限制，以防止恶意网站通过iframe进行跨站脚本攻击（XSS）或其他安全攻击。但这些限制也可能会影响合法的跨域交互需求，需要开发人员进行额外的安全处理和测试。

四、替代方案

随着前端技术的发展，有一些替代iframe的方法：

1.使用JavaScript框架进行组件化开发：

        现代 JavaScript 框架如 React、Vue.js 和 Angular 等提供了强大的组件化开发模式。通过这些框架，开发人员可以创建可复用的组件，这些组件可以在一个页面中动态加载和渲染，而无需使用iframe。

        例如，在 React 中，可以使用React Router实现页面的路由管理，通过动态加载不同的组件来模拟iframe的功能。这样可以提高页面的性能和可维护性，同时避免了iframe带来的一些安全和可访问性问题。

2.使用服务器端渲染（SSR）：

        服务器端渲染是一种将网页在服务器端生成 HTML 后再发送到客户端的技术。通过服务器端渲染，可以将不同的页面片段合并成一个完整的页面，减少对iframe的依赖。

        例如，在 Node.js 环境中，可以使用服务器端渲染框架如 Next.js 或 Nuxt.js，将多个页面的内容在服务器端进行组合和渲染，然后发送到客户端。这样可以提高页面的加载速度和 SEO 优化效果，同时也可以更好地控制页面的内容和布局。

3.使用Web Components:

        Web Components 是一种新的 Web 标准，它允许开发人员创建自定义的 HTML 元素，可以在不使用iframe的情况下实现模块化的开发。

        Web Components 由三个主要技术组成：自定义元素（Custom Elements）、Shadow DOM 和 HTML Templates。通过这些技术，开发人员可以创建可复用的、封装良好的组件，这些组件可以在不同的网页中使用，并且具有良好的可维护性和可扩展性。

        例如，可以使用 Web Components 创建一个自定义的视频播放器组件，然后在多个网页中使用这个组件，而无需使用iframe来嵌入外部的视频播放器。

五、使用示例

以下是一个使用iframe的示例，包括对iframe的一些控制和获取变量的方法：

<!DOCTYPE html>
<html><body><h2>使用 iframe 嵌入网页并进行控制和变量获取</h2><iframe id="myIframe" src="https://www.example.com" width="500" height="300" frameborder="0"></iframe><button onclick="changeIframeSrc()">更改 iframe 源</button><button onclick="getIframeContent()">获取 iframe 内容</button><script>// 更改 iframe 的源function changeIframeSrc() {var iframe = document.getElementById('myIframe');iframe.src = 'https://www.another-example.com';}// 获取 iframe 中的内容function getIframeContent() {var iframe = document.getElementById('myIframe');var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;var iframeContent = iframeDocument.body.innerHTML;console.log(iframeContent);}</script></body></html>

        在这个示例中，有一个iframe元素和两个按钮。第一个按钮用于更改iframe的源，点击按钮时，调用changeIframeSrc函数，通过获取iframe元素并修改其src属性来实现。第二个按钮用于获取iframe中的内容，点击按钮时，调用getIframeContent函数，首先获取iframe元素，然后通过contentDocument或contentWindow.document获取iframe的文档对象，最后获取iframe文档的body元素的innerHTML属性，即iframe中的内容，并将其输出到控制台。

       此外，还可以使用postMessage方法在不同域的iframe之间进行通信。例如：

<!DOCTYPE html>
<html><body><h2>使用 iframe 进行跨域通信</h2><iframe id="myIframe" src="https://another-domain.com" width="500" height="300" frameborder="0"></iframe><button onclick="sendMessageToIframe()">向 iframe 发送消息</button><script>// 向 iframe 发送消息function sendMessageToIframe() {var iframe = document.getElementById('myIframe');iframe.contentWindow.postMessage('Hello from parent page!', 'https://another-domain.com');}// 监听来自 iframe 的消息window.addEventListener('message', function(event) {if (event.origin === 'https://another-domain.com') {console.log('Received message from iframe: ' + event.data);}});</script></body></html>

         在这个示例中，有一个iframe元素和一个按钮。点击按钮时，调用sendMessageToIframe函数，通过postMessage方法向iframe发送消息，指定消息内容和目标域。同时，使用window.addEventListener监听message事件，当接收到来自特定域的消息时，将消息内容输出到控制台。

        

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

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

相关文章

Unity开发Hololens项目

Unity开发Hololens项目

Unity打包Hololens设备 目录Visual Studio2019 / Visual Studio2022 远端部署设置Visual Studio2019 / Visual Studio2022 USB部署设置Hololens设备如何查找自身IPHololens设备门户Unity工程内的打包设置 目录 记录下自己做MR相关&#xff1a;Unity和HoloLens设备的历程。 Vi…
阅读更多...
大规模多传感器滑坡检测数据集，利用landsat，哨兵2，planet，无人机图像等多种传感器采集数据共2w余副图像，mask准确标注滑坡位置

大规模多传感器滑坡检测数据集，利用landsat，哨兵2，planet，无人机图像等多种传感器采集数据共2w余副图像，mask准确标注滑坡位置

大规模多传感器滑坡检测数据集&#xff0c;利用landsat&#xff0c;哨兵2&#xff0c;planet&#xff0c;无人机图像等多种传感器采集数据共2w余副图像&#xff0c;mask准确标注滑坡位置 大规模多传感器滑坡检测数据集介绍 数据集概述 名称&#xff1a;大规模多传感器滑坡检测…
阅读更多...
Python | Leetcode Python题解之第491题非递减子序列

Python | Leetcode Python题解之第491题非递减子序列

题目&#xff1a; 题解&#xff1a; class Solution:def findSubsequences(self, nums: List[int]) -> List[List[int]]:def dfs(i, tmp):if i len(nums):if len(tmp) > 2:res.append(tmp[:]) # 拷贝&#xff0c;tmp[:]而非tmpreturn# 选 nums[i]if not tmp or nu…
阅读更多...
2d 数字人实时语音聊天对话使用案例；支持asr、llm、tts实时语音交互

2d 数字人实时语音聊天对话使用案例；支持asr、llm、tts实时语音交互

参考： https://github.com/lyz1810/live2dSpeek 下载live2dSpeek项目 ## 下载live2dSpeek git clone https://github.com/lyz1810/live2dSpeek cd live2dSpeek-main ## 运行live2dSpeek npm install -g http-server http-server .更改新的index.html页面 index.html
阅读更多...
【SQL Server】数据库在新建查询后闪退——解决方案：以管理员的身份运行

【SQL Server】数据库在新建查询后闪退——解决方案：以管理员的身份运行

我的SQLServer2022之前都是可以用的&#xff0c;隔了好久没有使用&#xff0c;今天要用到去写一些SQL 语句 结果在点击新建查询后闪退了&#xff0c; 经过查询后&#xff0c;解决方案&#xff1a; 以管理员的身份运行后点击新建查询&#xff0c;发现正常了 总结&#xff1a;以…
阅读更多...
记一次库版本升级引起程序自动停止

记一次库版本升级引起程序自动停止

记一次库版本升级引起程序自动停止 最近我们的应用升级了jedis 版本,版本从 2.10.2 升级 到3.8.0。发现我们的任务应用启动后立马自动关闭了。 这就奇怪了&#xff0c;为什么升级个版本&#xff0c;会导致程序启动后自动关闭呢。带着这个疑问我们看下代码。 表现如下&#x…
阅读更多...
C语言_指针_进阶

C语言_指针_进阶

引言&#xff1a;在前面的c语言_指针初阶上&#xff0c;我们了解了简单的指针类型以及使用&#xff0c;下面我们将进入更深层次的指针学习&#xff0c;对指针的理解会有一个极大的提升。从此以后&#xff0c;指针将不再是难点&#xff0c;而是学习底层语言的一把利器。 本章重点…
阅读更多...
vr体验馆计时收银软件试用版下载 佳易王VR游戏厅计时计费管理系统使用操作教程

vr体验馆计时收银软件试用版下载 佳易王VR游戏厅计时计费管理系统使用操作教程

一、前言 【软件试用版资源文件下载可以点击文章最后卡片了解】 vr体验馆计时收银软件试用版下载 佳易王VR游戏厅计时计费管理系统使用操作教程 VR体验馆计时计费软件是专门为VR体验馆设计的管理工具&#xff0c;旨在提高服务效率和客户的满意度。软件能够记录客户使用设备的…
阅读更多...
vue组件调用生命周期

vue组件调用生命周期

《vue基础学习-组件》提到组件传递数据方式&#xff1a; 1. props/$emit 父传子&#xff1a;子组件通过 props 显式声明 自定义 属性&#xff0c;接收父组件的传值。子传父&#xff1a;子组件通过 $emit() 显式声明 自定义 事件&#xff0c;父组件调用自定义事件接收子组件返…
阅读更多...
Docker-compose提示specified IP address..configured subnets问题以及Docker容器相关操作记录保存

Docker-compose提示specified IP address..configured subnets问题以及Docker容器相关操作记录保存

一、Docker-compose提示user specified IP address is supported only when connecting to networks with user configured subnets 在网上下载的一些docker-compose.yml在执行的时碰到过多次如下报错&#xff1a; ERROR: for 5307e2acb....user specified IP address is supp…
阅读更多...
2024.10.17 软考学习笔记

2024.10.17 软考学习笔记

刷题网站&#xff1a; 软考中级软件设计师在线试题、软考解析及答案-51CTO题库-软考在线做题备考工具
阅读更多...
vue2项目 实现上边两个下拉框,下边一个输入框 输入框内显示的值为[“第一个下拉框选中值“ -- “第二个下拉框选中的值“]

vue2项目 实现上边两个下拉框,下边一个输入框 输入框内显示的值为[“第一个下拉框选中值“ -- “第二个下拉框选中的值“]

效果: 思路: 采用vue中 [computed:] 派生属性的方式实现联动效果,上边两个切换时,下边的跟随变动 demo代码: <template><div><!-- 第一个下拉框 --><select v-model"firstValue"><option v-for"option in options" :key&q…
阅读更多...
Github优质项目推荐 - 第六期

Github优质项目推荐 - 第六期

文章目录 Github优质项目推荐 - 第六期一、【WiFiAnalyzer】&#xff0c;3.4k stars - WiFi 网络分析工具二、【penpot】&#xff0c;33k stars - UI 设计与原型制作平台三、【Inpaint-Anything】&#xff0c;6.4k stars - 修复图像、视频和3D 场景中的任何内容四、【Malware-P…
阅读更多...
适用于 Windows 的 4 个最佳免费数据恢复软件

适用于 Windows 的 4 个最佳免费数据恢复软件

计算机最重要的是用户数据。除了您的数据之外&#xff0c;关于计算机的其他一切都是可替换的。这三个是数据丢失的最常见原因&#xff1a; 文件/文件夹删除 丢失分区 损坏的分区 文件/文件夹删除是最常见的数据丢失类型。大多数时候&#xff0c;由于不小心删除文件/文件夹而…
阅读更多...
限流是什么？如何限流？怎么限流？

限流是什么？如何限流？怎么限流？

概述 什么是限流 对某一时间窗口内的请求数进行限制，保持系统的可用性和稳定性，防止因流量暴增而导致的系统运行缓慢或宕机 为什么要限流 因为互联网系统通常都要面对大并发大流量的请求，在突发情况下（最常见的场景就是秒杀、抢购），瞬时大流量会直接将系统打垮，无法…
阅读更多...
html和css实现页面

html和css实现页面

任务4 html文件 任务5 htm文件 css文件 任务6 html文件 css文件 任务7 html文件 css文件
阅读更多...
Java【多线程】synchronized关键字

Java【多线程】synchronized关键字

目录 synchronized的特性 1.互斥 2.可重入 如何自己实现一个可重入锁&#xff1f; 关于死锁 死锁的第三种情况 N个线程M把锁 构成死锁的四个必要条件 java标准库中的线程安全类 线程不安全 线程安全 synchronized关键字-监视器锁monitor locker synchronized的特性 …
阅读更多...
Tailscale自建中转服务器derper搭建笔记（基于docker）

Tailscale自建中转服务器derper搭建笔记（基于docker）

自己搭建derper服务器&#xff0c;让Tailscale中转更流畅。 Tailscale是很好的远程组网工具&#xff0c;在两台机器P2P打洞成功的情况下可以实现网络直连&#xff0c;但如果打洞失败就会进行数据中转&#xff0c;我们的数据要跑到国外再跑回来&#xff0c;这样速度就很慢了。 …
阅读更多...
STGCN解读（论文+代码）

STGCN解读（论文+代码）

一、引言 引言部分不是论文的重点&#xff0c;主要讲述了交通预测的重要性以及一些传统方法的不足之处。进而推出了自己的模型——STGCN。 二、交通预测与图卷积 第二部分讲述了交通预测中路图和图卷积的概念。 首先理解道路图&#xff0c;交通预测被定义为典型的时间序列预测…
阅读更多...
Axure重要元件一——动态面板

Axure重要元件一——动态面板

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 本节课&#xff1a;动态面板 课程内容&#xff1a;认识动态面板、动态面板基本操作 应用场景&#xff1a;特定窗口、重要交互、长页面、容器等 一、认识动态面板 动态…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023