【HTML入门】第十二课 - iframe框架

在早期没有出现Vue和React之前呢,做管理系统,iframe是非常普遍的技术。比如管理系统左侧有非常多的菜单,然后点击菜单后,右边就要展现不同的页面。

又或者呢,我们看一些网站,他们侧边展示着五彩绚烂的广告,那有可能就是嵌套在iframe里的第三方网页。

还有很多恶意搞破坏的,在自己网站,做一个iframe,里面嵌套上别人的网站,然后很多人误以为这是一个正常的网站,然后点击登录的时候,就很可能把自己的信息泄露了。

所以,iframe框架呢,主要功能就是可以嵌套一个其他的网页

目录

1 嵌套一个自己的网页

2 嵌套一个第三方网页

3 调整iframe的大小

4 切换 iframe 的链接


1 嵌套一个自己的网页

比如我们之前新建了一个 index1.html,你还记的那个网页里面有什么内容吧?我们现在嵌套一下这个网页:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><p>是可是 index.html 啊</p><iframe src="./index1.html" ></iframe></body>
</html>

看,这样使用iframe嵌套一下,里面就出现了 index1.html 的内容。那么如果你点击一下这个 iframe 中的链接,你觉得会发生什么样的效果呢?

2 嵌套一个第三方网页

比如说,我们把csdn的网页嵌套进来试试呢。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><p>是可是 index.html 啊</p><iframe src="https://www.csdn.net" ></iframe></body>
</html>

虽然嵌套进来了,但是内容很小,对吧。

3 调整iframe的大小

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><p>是可是 index.html 啊</p><iframe src="https://www.csdn.net" width="500" height="400" frameborder="0" ></iframe></body>
</html>

我们添加了 width 和 height 的属性设置,很明显,嵌套的网页变大了。但仍然有滚动条,这是因为我们嵌套的这个网页呢,内容就是比我们设置的这个宽度和高度大,从而产生了滚动条。

当设置到足够大,或者我们给 iframe 去掉滚动条的时候,就会显得,像是我们也做了一个一模一样的网站一样了。

4 切换 iframe 的链接

 后边我们学习了JS的知识,就可以获取这个 iframe 标签元素,然后再修改它的 src 属性,就可以达到切换显示的效果了。

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

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

相关文章

Linux C++ 051-设计模式之中介者模式

Linux C 051-设计模式之中介者模式 本节关键字&#xff1a;Linux、C、设计模式、中介者模式 相关库函数&#xff1a; 概念 中介者模式&#xff08;Mediator&#xff09;&#xff0c;又叫调停者模式&#xff0c; 用一个中介对象来封装一系列的对象交互。中介者 使各对象不需要…

2024年上半年信息系统项目管理师——综合知识真题题目及答案(第1批次)(1)

2024年上半年信息系统项目管理师 ——综合知识真题题目及答案&#xff08;第1批次&#xff09;&#xff08;1&#xff09; 第1题&#xff1a;&#xff08;&#xff09;通过财务、客户、内部运营、学习与成长4个角度&#xff0c;将组织战略目标逐层分解转化为细化指标&#xff…

k8s集群新增节点

目前集群状态 如K8S 集群搭建中规划的集群一样 Masternode01node02IP192.168.100.100192.168.100.101192.168.100.102OSCent OS 7.9Cent OS 7.9Cent OS 7.9 目前打算新增节点node03 Masternode01node02node03IP192.168.100.100192.168.100.101192.168.100.102192.168.100.1…

力扣经典题目之->删除有序数组中的重复项讲解 的讲解与实现

一&#xff1a;题目 二&#xff1a;思路讲解 第一步&#xff1a;创建两个下标&#xff0c;一个是第一个元素的&#xff08;start0&#xff09;&#xff0c;一个是第二个元素的&#xff08;end1&#xff09; 第二步&#xff1a; a&#xff1a;end移动&#xff0c;直到遇到不等…

Arduino PID整定

Arduino PID整定 Tuning an Arduino PID Introduction to Tuning an Arduino PID 例如&#xff0c;我们可能想把一箱水加热到华氏 100 度。 我们需要能够在不同的条件下实现这一目标&#xff0c;例如房间的环境&#xff08;周围&#xff09;温度。 此外&#xff0c;我们可能会…

新一代大语言模型 GPT-5 对工作与生活的影响及应对策略

文章目录 &#x1f4d2;一、引言 &#x1f4d2;二、GPT-5 的发展背景 &#x1f680;&#xff08;一&#xff09;GPT-4 的表现与特点 &#x1f680;&#xff08;二&#xff09;GPT-5 的预期进步 &#x1f4d2;三、GPT-5 对工作的影响 &#x1f680;&#xff08;一&#xf…

LangChain —— 多模态大模型的 prompt template

文章目录 一、如何直接将多模态数据传输给模型二、如何使用 mutimodal prompts 一、如何直接将多模态数据传输给模型 在这里&#xff0c;我们演示了如何将多模式输入直接传递给模型。对于其他的支持多模态输入的模型提供者&#xff0c;langchain 在类中提供了内在逻辑来转化为期…

08-8.2.1 插入排序

&#x1f44b; Hi, I’m Beast Cheng &#x1f440; I’m interested in photography, hiking, landscape… &#x1f331; I’m currently learning python, javascript, kotlin… &#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…

Docker:容器内服务访问宿主机中的MySql服务

在平时我们部署项目的时候&#xff0c;如果需要再docker中互相访问可以参考Docker&#xff1a;WARNING: Published ports are discarded when using host network mode 解决方法-CSDN博客 如果部署服务在宿主机&#xff0c;然后需要再docker访问其服务&#xff0c;那我们如何处…

Android 儿童绘本/汉语拼音实现

有这样一个项目&#xff0c;开发一个电子绘本&#xff0c;需要在绘本上显示&#xff0c;汉语拼音。 界面布局 <androidx.core.widget.NestedScrollViewandroid:layout_width"match_parent"android:layout_height"match_parent"android:fillViewport&quo…

STM32CubeMX 下载及安装教程

目录 1. 什么是 STM32CubeMX? 2. 主要功能 2.1 图形化界面 2.2 中间件支持 2.3 代码生成与集成 3.Java 官网下载并安装 4 CubeMX 下载并安装 4.1 官网下载 ​4.2 安装 1. 什么是 STM32CubeMX? STM32CubeMX 是一款图形化的配置工具&#xff0c;用于配置 STM32 系列微…

一阶低通滤波(IIR)

1.Y(n)a⋅X(n)(1−a)⋅Y(n−1) Y表示输出 X表示输入 a表示滤波系数 为什么该函数可以进行低通滤波。 这个公式中的 a 是一个介于 0 和 1 之间的系数&#xff0c;它决定了滤波器的截止频率和滤波效果。 平滑作用&#xff1a;公式中的 (1−a)⋅Y(n−1) 部分表示上一次输出对当前…

springcolud学习01

创建项目 修改pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.o…

【STM32项目】基于嵌入式智能网控微嵌式远距操控平台(完整工程资料源码)

基于嵌入式智能网控微嵌式远距操控平台 目录&#xff1a; 前言: 一、项目前景调研 1.1 研究背景及意义 1.2 国内外发展现状及趋势 1.2.1 国内现状 1.2.2 国外发展现状 1.2.3 发展趋势 二、什么是嵌入式&#xff1f; 2.1 嵌入式系统概述 2.2 嵌入式系统的组成 2.3 嵌入式操作系统…

《SpringBoot 整合 Prometheus 采集自定义指标》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; 近期刚转战 CSDN&#xff0c;会严格把控文章质量&#xff0c;绝不滥竽充数&#xff0c;如需交流&#xff…

并发漏洞介绍

文章目录 漏洞介绍漏洞场景举例核心思路总结一下 漏洞介绍 并发漏洞&#xff0c;又称条件竞争漏洞&#xff0c;是指在多线程或多进程环境中&#xff0c;由于对共享资源的访问没有正确的同步控制&#xff0c;导致程序行为异常或安全问题的漏洞。这种漏洞常见于各种软件系统中&a…

基于与STM32的加湿器之旋转编码器驱动

1.简介 旋转编码器&#xff0c;也被称为轴编码器或脉冲编码器&#xff08;SPC&#xff09;&#xff0c;是一种将旋转的机械位移量转换为电气信号的传感器&#xff0c;其信号可用于检测位置、速度等。 2.工作原理 旋转编码器的工作原理主要基于光电转换或磁电转换。以光电式旋转…

uniapp 小程序注册全局弹窗组件(无需引入,无需写标签)

由于uniapp没有开放根节点&#xff0c;所以一般情况下通过app.components注册&#xff0c;在需要的页面直接写组件标签&#xff0c;但是如果每个页面都需要的话&#xff0c;再每个都加的话会非常的麻烦 网上的思路都不咋地&#xff1a; 1.通过写一个透明弹窗页面来实现&#…

在 Objective-C 中,如何有效地处理内存管理以避免内存泄漏?

在 Objective-C 中&#xff0c;可以通过以下几个方法来有效地处理内存管理以避免内存泄漏&#xff1a; 使用自动引用计数&#xff08;ARC&#xff09;&#xff1a;ARC 是一种自动内存管理机制&#xff0c;它可以自动地插入 retain、release 和 autorelease 方法来管理对象的内存…

Proteus元器件库与仪器仪表

常用元件与仪表简介 分立元件 1. 电阻Resistor 电阻 RES 排阻 RESPACK-8 2. 电容 Capacitor 瓷片电容 CAP 电解电容 CAP-ELEC 3. 电感 Inductor 4. 电位器 Potentiometer 5. 二极管 Diode 发光二极管 LED 6. 晶体管 Transistor 7. 场效应管 FET 8. 三极管 T…