当前位置：首页 > news >正文

css iframe标签使用

news 来源：原创 2025/7/31 4:55:29

<iframe> 标签用于在网页中嵌入另一个 HTML 页面。它非常灵活，可用于嵌入内容，比如其他网站、视频、地图等。以下是有关 <iframe> 的详细介绍及使用方法：

基本语法

<iframe src="URL" width="宽度" height="高度"></iframe>

常见属性

src：
- 指定嵌入的页面 URL。
- 示例：src="https://example.com"
width 和 height：
- 设置 iframe 的宽度和高度（可以是像素值或百分比）。
- 示例：width="600" height="400"
frameborder（已废弃，建议用 CSS）：
- 定义是否显示边框（0 表示无边框，1 表示有边框）。
allowfullscreen：
- 允许全屏显示（多用于视频）。
- 示例：allowfullscreen="true"
name：
- 设置 iframe 的名字，用于目标链接的跳转。
sandbox：
- 提供安全性选项，可以限制嵌入内容的功能。
- 示例：sandbox="allow-scripts allow-same-origin"
loading：
- 延迟加载 iframe 内容，提升性能。
- 值：lazy（延迟加载），eager（默认加载）。

简单例子

1. 嵌入一个网页

<iframe src="https://www.example.com" width="800" height="600"></iframe>

2. 嵌入无边框的内容

<iframe src="https://www.example.com" width="800" height="600" frameborder="0"></iframe>

3. 使用 `sandbox` 属性增强安全性

<iframe src="https://www.example.com" width="800" height="600" sandbox="allow-scripts"></iframe>

4. 嵌入 YouTube 视频

<iframe width="560" height="315" src="https://www.youtube.com/embed/视频ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

注意事项

跨域限制：
- 某些网站（如 Google）对 iframe 有防嵌套策略（X-Frame-Options），会阻止嵌入。
- 如果无法加载，通常是目标网站限制了跨域访问。
样式优化：
- 使用 CSS 可以更好地控制 iframe 的外观。
```
iframe {border: none;display: block;margin: 0 auto;
}
```
安全性：
- 小心嵌入的内容可能包含恶意代码。
- 建议使用 sandbox 和限制性权限。

高级功能

动态设置 iframe 的内容

可以通过 JavaScript 修改 iframe 的 src 或直接写入内容：

<iframe id="myIframe" width="800" height="600"></iframe><script>// 动态设置 iframe 的 URLdocument.getElementById("myIframe").src = "https://www.example.com";// 动态写入内容const iframe = document.getElementById("myIframe");iframe.contentDocument.write("<h1>Hello, World!</h1>");
</script>

<iframe> 是一个强大的工具，但由于其潜在的安全隐患和跨域问题，需要谨慎使用。

css iframe标签使用

编程日记 2025/7/31 4:55:29

NVR管理平台EasyNVR多品牌NVR管理工具的流媒体视频融合与汇聚管理方案

随着信息技术的飞速发展，视频监控已经成为现代社会安全管理和业务运营不可或缺的一部分。无论是智慧城市、智能交通、还是大型企业、校园安防，视频监控系统的应用都日益广泛。NVR管理平台EasyNVR，作为功能强大的流媒体服务器软件，…...

编程日记 2025/7/31 1:55:57

GISBox VS QGIS：你更倾向于易用性还是追求开源及高度定制化

在地理信息系统（GIS）领域，随着技术的进步和应用场景的多样化，越来越多的GIS软件出现在市场上，为用户提供多样化的选择。对于企业和个人开发者来说，选择最适合自己的GIS软件至关重要。本文将从多个角度对比G…...

编程日记 2025/7/31 0:52:17

OpenCV与AI深度学习｜16个含源码和数据集的计算机视觉实战项目(建议收藏！)

本文来源公众号“OpenCV与AI深度学习”，仅用于学术分享，侵权删，干货满满。原文链接：分享｜16个含源码和数据集的计算机视觉实战项目本文将分享16个含源码和数据集的计算机视觉实战项目。具体包括： 1. 人…...

编程日记 2025/7/29 20:18:46

联通光猫（烽火通信设备）改桥接教程

一、获得超级密码 1.打开telnet连接权限 http://192.168.1.1/telnet?enable1&key9070D3BECD70（MAC地址）2.连接光猫获取密码 telnet 192.168.1.1 用户名：admin 密码：Fh9070D3BECD70连接成功后 load_cli factory show admin_…...

编程日记 2025/7/30 23:40:08

需求：开发模式下打印语句生效，生产模式下打印语句失效使用Webpack内置的DefinePlugin插件 const webpack require(webpack) module.exports { plugins: [ new webpack.DefinePlugin({ process.env.NODE_ENV:JSON.stringify(process.env.NODE_ENV) }…...

编程日记 2025/7/27 1:33:45

Azure Kubernetes Service (AKS)资源优化策略

针对Azure Kubernetes Service (AKS)的资源优化策略，可以从多个维度进行考虑和实施，以提升集群的性能、效率和资源利用率。以下是一些关键的优化策略： 一、 Pod资源请求和限制设置Pod请求和限制：在YAML清单中为所有Pod设置CPU和…...

编程日记 2025/7/30 12:02:16

根据返回字段名进行查询数据的方法

在Java后端开发中，根据前端返回的字段名动态查询数据库是一种常见的需求。这种需求通常通过使用反射和动态SQL来实现。下面是一个完整的代码示例，它展示了如何根据前端返回的字段名动态查询数据库中的数据。一、根据前端返回的字段名动态查询数据库中的…...

编程日记 2025/7/30 23:32:43

使用ENSP实现静态路由

一、双路由器静态路由 1.项目拓扑 2.项目实现 (1)路由器AR1配置进入系统试图 sys将路由器命名为R1 sysname R1进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为1.1.1.1/24 ip address 1.1.1.1 24进入g0/0/1接口 int g0/0/1将g0/0/1接口IP地址配置为192.168.1.1/24 ip ad…...

编程日记 2025/7/30 22:05:55

SpringBoot3+Vue3开发图书馆管理系统

1 项目介绍图书馆管理系统，管理图书、用户、借书、还书、实时监测归还是否逾期，逾期未归还会生成违规记录。违规状态不可借阅图书。需缴纳罚金，消除违规记录。可动态设置图书最多累计借阅数量上限和最长借阅天数上限，当用户满足…...

编程日记 2025/7/31 2:19:05

常见的 git 提交备注类型

在 Git 提交中，常见的提交备注（commit message）遵循一定的约定，这有助于代码管理、版本控制以及团队协作。fix 和 feat 是常见的提交类型，下面是这两个的含义，以及其他常见的提交类型。常见的 Git 提交备…...

编程日记 2025/7/30 22:25:54

Redis 的代理类注入失败，连不上 redis

在测试 redis 是否成功连接时，发现 bean 没有被创建成功，导致报错根据报错提示，需要我们添加依赖： <dependency><groupId>org.apache.commons</groupId><artifactId>commons-pool2</artifactId>&l…...

编程日记 2025/7/30 21:56:19

Hook 技术：修改 Android 系统属性，提升应用调试和定制化能力

Hook 技术：修改 Android 系统属性，提升应用调试和定制化能力我知道很多小伙伴，尤其是玩 Android 的开发者，都会有这种需求： 想修改设备的系统属性，比如设备型号、API 版本、屏幕分辨率或密度&#x…...

编程日记 2025/7/30 17:38:30

Excel如何把两列数据合并成一列，4种方法

Excel如何把两列数据合并成一列，4种方法参考链接：https://baijiahao.baidu.com/s?id=1786337572531105925&wfr=spider&for=pc 在Excel中，有时候需要把两列或者多列数据合并到一列中，下面介绍4种常见方法，并且提示一些使用注意事项，总有一种方法符合你的要求：…...

编程日记 2025/7/30 21:47:39

英文版本-带EXCEL函数的数据分析

一、问题： 二、表格内容三、分析结果四、具体的操作步骤： 销售工作表公式设计与数据验证类别（Category）列公式： 在Category列（假设为D列），根据ProductCode在Catalogue工作表中查找…...

编程日记 2025/7/30 20:56:21

LangChain入门

LangChain入门 ｜ 豆包MarsCode AI 刷题本篇文章为《LangChain 实战课》前三节课的总结性文章，主要内容包含内容梳理与总结，学习记录，以及一些思考。 01开篇词｜带你亲证AI应用开发的“奇点”时刻内容这篇文章介绍…...

编程日记 2025/7/24 23:45:24

STM32-- 串口介绍

rs485、rs232、rs422 rs485使用： max3485：3.3v左右驱动 max485：5v左右驱动，不过有时候3.3v驱动也可以使用，具体有什么问题或者通过电路规避问题还没有了解过。 rs485和rs422有相同的地方，485满足422的规…...

编程日记 2025/7/30 19:54:58

【Python TensorFlow】进阶指南（续篇三）

在前几篇文章中，我们探讨了TensorFlow的高级功能，包括模型优化、分布式训练、模型解释等多个方面。本文将进一步深入探讨一些更具体和实用的主题，如模型持续优化的具体方法、异步训练的实际应用、在线学习的实现细节、模型服务化的最佳实践、…...

编程日记 2025/7/30 19:27:52

仓颉——申请内测、环境搭建、编译测试

2024年6月21日，华为仓颉正式公开发布。不少同学看过仓颉白皮书后，都在找SDK从哪下载，HelloWorld怎么跑。仓颉公众号也及时发布了内测的方式，我也亲自走了一遍整个流程， 一，申请内测关注“仓颉编程语言…...

编程日记 2025/7/30 19:41:14

C语言教程指针笔记整理（二）

https://www.bilibili.com/video/BV1cx4y1d7Ut?spm_id_from333.788.videopod.episodes&vd_sourcee8984989cddeb3ef7b7e9fd89098dbe8&p107 本篇为贺宏宏老师C语言教程指针部分笔记整理 //8-19 一维数组和二维数组 // int arr[4] [][][][] //含义： //1.arr…...

编程日记 2025/7/30 20:16:44

3.无重复字符的最长子串 python

无重复字符的最长子串题目描述示例 1:示例 2:示例 3:提示：题目链接解题思路Python 实现详细解释题目描述给定一个字符串 s ，请你找出其中不含有重复字符的最长子串的长度。示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子…...

编程日记 2025/7/30 22:16:53

NIST 发布后量子密码学转型战略草案

美国国家标准与技术研究所 (NIST) 发布了其初步战略草案，即内部报告 (IR) 8547，标题为“向后量子密码标准过渡”。该草案概述了 NIST 从当前易受量子计算攻击的加密算法迁移到抗量子替代算法的战略。该草案于 2024 年 11 月 12 日发布，开放…...

编程日记 2025/7/30 20:22:01

高危，Laravel参数注入漏洞安全风险通告

今日，亚信安全CERT监控到安全社区研究人员发布安全通告，披露了Laravel 参数注入漏洞(CVE-2024-52301)。在受影响的版本中，Application.php 文件的 detectEnvironment 函数直接使用了 $_SERVER[argv]，但没有检查运行环境是否为 CLI…...

编程日记 2025/7/30 20:21:03

【漏洞复现】|智互联SRM智联云采系统quickReceiptDetail SQL注入漏洞

漏洞描述智互联(深圳)科技有限公司SRM智联云采系统针对企业供应链管理难题，及智能化转型升级需求，智联云采依托人工智能、物联网、大数据、云等技术，通过软硬件系统化方案，帮助企业实现供应商关系管理和采购线上化、移动化、智能…...

编程日记 2025/7/27 17:26:00

【Visual Studio系列教程】如何在 VS 上编程？

上一篇博客中，我们介绍了《什么是 Visual Studio？》。本文，我们来看第2篇《如何在 VS 上编程？》。阅读本文大约10 分钟。我们会向文件中添加代码，了解 Visual Studio 编写、导航和了解代码的简便方法。本文假定&…...

编程日记 2025/7/30 20:15:01

Pytest-Bdd-Playwright 系列教程（12）：步骤参数 parsers参数解析

Pytest-Bdd-Playwright 系列教程（12）：步骤参数 & parsers参数解析前言一、什么是步骤参数？二、pytest-bdd 的步骤参数用法2.1 简单字符串解析2.2 自定义正则表达式解析2.3 参数类型转换三、案例：基于 pytest-bdd…...

编程日记 2025/7/30 14:09:47

java 增强型for循环详解

Java 增强型 for 循环（Enhanced for Loop）详解增强型 for 循环（也称为 “for-each” 循环）是 Java 从 JDK 5 开始引入的一种便捷循环语法，旨在简化对数组或集合类的迭代操作。 1. 基本语法语法格式 for (类型变量…...

编程日记 2025/7/30 14:12:02

RUST学习教程-安装教程

文章目录参考文档安装教程更新卸载参考文档 https://course.rs/first-try/installation.html 安装教程 Linux或者mac安装教程 curl --proto https --tlsv1.2 https://sh.rustup.rs -sSf | sh安装完成，当出现command not found的时候，需要source一下…...

编程日记 2025/7/30 22:41:30

第十六届蓝桥杯模拟赛（第一期）-c++/c

c/c蓝桥杯模拟赛题解，非常详细质因数 1、填空题【问题描述】如果一个数 p 是个质数，同时又是整数 a 的约数，则 p 称为 a 的一个质因数。请问 2024 有多少个质因数。【答案提交】这是一道结果填空的题，你只需要算出结果后提…...

编程日记 2025/7/30 12:01:20

使用uniapp编写APP的文件上传

使用uniapp插件文件选择、文件上传组件（图片，视频，文件等） - DCloud 插件市场实用效果： 缺陷是只能一个一个单独上传...

编程日记 2025/7/30 22:21:41

Go语言从入门到精通

go相关命令 //对go源码进行编译，生成.exe文件 go build go文件名//直接运行go源码（生成.exe文件执行后，又删除.exe文件） go run go文件名go中的package和import /*package：用来声明这个文件是属于哪个包的*/ package…...

编程日记 2025/7/28 21:53:09

捉虫记录02-Nacos访问失败

目录一、问题二、排查三、解决方案一、问题在访问nacos的时候出现以下问题： 二、排查先用docker logs nacos来查找报错信息 docker logs nacos 看问题报错就是数据源问题，nacos没能连接上mysql 三、解决方案第一步 docker restart mysql …...

编程日记 2025/7/30 14:28:37

安宝特方案 | AR助力紧急救援，科技守卫生命每一刻！

在生死时速的紧急救援战场上，每一秒都至关重要！随着科技的发展，增强现实（AR）技术正在逐步渗透到医疗健康领域，改变着传统的医疗服务模式。安宝特AR远程协助解决方案，凭借其先进的技术支持和创新…...

编程日记 2025/7/27 0:44:38

超详细：Redis分布式锁

如何基于 Redis 实现一个最简易的分布式锁？ 不论是本地锁还是分布式锁，核心都在于“互斥”。在 Redis 中， SETNX 命令是可以帮助我们实现互斥。SETNX 即 SET if Not eXists (对应 Java 中的 setIfAbsent 方法)，如果 key 不存在…...

编程日记 2025/7/29 21:09:02

@Autowired 和 @Resource思考（注入redisTemplate时发现一些奇怪的现象）

1. 前置知识 Configuration public class RedisConfig {Beanpublic RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {RedisTemplate<String, Object> template new RedisTemplate<>();template.setConnectionFactory(facto…...

编程日记 2025/7/27 22:33:26

MTK主板定制_联发科主板_MTK8766/MTK8768/MTK8788安卓主板方案

主流市场上的MTK主板通常采用联发科的多种芯片平台，如MT8766、MT6765、MT6762、MT8768和MT8788等。这些芯片基于64位Cortex-A73/A53架构，提供四核或八核配置，主频可达2.1GHz，赋予设备卓越的计算与处理能力。芯片采用12纳米制程工艺…...

编程日记 2025/7/30 22:02:59

k8s篇之控制器类型以及各自的适用场景

1. k8s中控制器介绍在 Kubernetes 中，控制器（Controller）是集群中用于管理资源的关键组件。它们的核心作用是确保集群中的资源状态符合用户的期望，并在需要时自动进行调整。 Kubernetes 提供了多种不同类型的控制器，每种控制器都有其独特的功能和应用场景。 2. 常见的…...

编程日记 2025/7/30 13:10:42

VideoCrafter模型部署教程

一、介绍 VideoCrafter是一个功能强大的AI视频编辑和生成工具，它结合了深度学习和机器学习技术，为用户提供了便捷的视频制作和编辑体验。系统：Ubuntu22.04系统，显卡：4090，显存：24G 二、基础…...

编程日记 2025/7/30 15:49:03

mysql 与 mybatis 错误记录

DATE_FORMAT(FROM_UNIXTIME(start_time / 1000)只能传秒级时间戳，毫秒级时间戳group后不能select; tinyint(1)会被mybatis自动翻译为Boolean值，可以使用resultMap重新映射一下来解决，select使用了别名，在resultMap中映射column也必…...

编程日记 2025/7/30 14:19:50

本地git多用户ssh配置

仅作备份，不做解释 1. ~/.ssh/config Host jeadyx.gitee.com HostName gitee.com PreferredAuthentications publickey IdentityFile ~/.ssh/id_rsa_jeadyxHost jeady5.gitee.com HostName gitee.com PreferredAuthentications publickey IdentityFile ~/.ssh/id_…...

编程日记 2025/7/30 17:49:23

macbook外接2k/1080p显示器调试经验

准备工具电脑满足电脑和显示器要求的hdmi线或者转接头或者扩展坞 betterdisplay软件 Dell P2419H的最佳显示信息如下飞利浦 245Es 2K的最佳显示比例如下首选1152...

编程日记 2025/7/30 7:38:52

如何删除Kafka中的数据以及删除topic

如何删除Kafka数据已经以及删除topic呢？ 1、删除数据先启动Kafka实例 docker exec -it kafka-0 /bin/bash #进去容器 rm -rf /bitnami/kafka/data/* #删除数据 exit #退出如果删除失败，可能是数据不存在于/bitnami/kafka/data，使用 cd /o…...

编程日记 2025/7/30 7:27:10

wordpress二开-WordPress新增页面模板-说说微语

微语说说相当于一个简单的记事本，使用还是比较方便的。这个版本的说说微语CSS样式不兼容，可能有些主题无法适配，但是后台添加内容，前端显示的逻辑已经实现。可以当作Word press二开中自定义页面模板学习~ 一、后台添加说说微语模…...

编程日记 2025/7/29 17:21:50

Java学习笔记--数组常见算法：数组翻转，冒泡排序，二分查找

目录一，数组翻转二，冒泡排序三，二分查找（一尺之锤，日取其半，万世不竭） 一，数组翻转 1.概述:数组对称索引位置上的元素互换，最大值数组序号是数组长度减一创建跳板…...

编程日记 2025/7/31 1:25:15

使用 OpenAI 进行数据探索性分析（EDA）

探索性数据分析（Exploratory Data Analysis, 简称 EDA）是数据分析中不可或缺的环节，帮助分析师快速了解数据的分布、特征和潜在模式。传统的 EDA 通常需要手动编写代码或使用工具完成。现在，通过 OpenAI 的 GPT-4 模型&#xff0c…...

编程日记 2025/7/29 18:53:25

Jdk1.8新特性

新增的类以及常用的方法在Java的java.util.concurrent包中，除了之前提到的并发工具类外，还有一些新增的类以及它们常用的方法。以下是一些例子： 新增的类 ‌CompletableFuture‌： CompletableFuture是Java 8中引入的一个类&a…...

编程日记 2025/7/27 23:07:18

丹摩征文活动 | AI创新之路，DAMODEL助你一臂之力GPU

目录前言—— DAMODEL（丹摩智算） 算力服务直观的感受算力提供商的强大平台功能介绍镜像选择云磁盘创建总结前言—— 只需轻点鼠标,开发者便可拥有属于自己的AI计算王国 - 从丰富的GPU实例选择,到高性能的云磁盘,再到预配置的深度学习…...

编程日记 2025/7/26 13:29:46

mock.js：定义、应用场景、安装、配置、使用

前言：什么是mock.js？ 作为一个前端程序员，没有mockjs你不感觉很被动吗？你不感觉你的命脉被后端那个男人掌握了吗？所以，我命由我不由天！学学mock.js吧！ mock.js 是一个用于生成随机…...

编程日记 2025/7/23 18:51:01

优化 MFC CGridCtrl 的表格布局与功能

在使用 MFC 的 CGridCtrl 控件创建表格时，遇到的一个典型问题是，当表格滚动条出现时，最后一列会显示空白。这篇博客将记录解决这一问题的详细过程，同时总结了 CGridCtrl 初始化及优化的关键步骤，帮助开发者快速搭建一个…...

编程日记 2025/7/25 20:22:49

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色，类似材质丢失

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色，类似材质丢失 Addressable Play Mode Script加载模式选择 Use Existiing Build 1.Unity 切换到 PC 平台，执行 Addressable Build 运行，加载 bundle 内的预制体显示正常 2.Unit…...

编程日记 2025/7/16 19:06:56