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

在早期没有出现Vue和React之前呢,做管理系统,iframe是非常普遍的技术。比如管理系统左侧有非常多的菜单,然后点击菜单后,右边就要展现不同的页面。
又或者呢,我们看一些网站,他们侧边展示着五彩绚烂的广告,那有可能就是嵌套在iframe里的第三方网页。
还有很多恶意搞破坏的,在自己网站,做一个iframe,里面嵌套上别人的网站,然后很多人误以为这是一个正常的网站,然后点击登录的时候,就很可能把自己的信息泄露了。

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

目录

[1 嵌套一个自己的网页](#1 嵌套一个自己的网页)

[2 嵌套一个第三方网页](#2 嵌套一个第三方网页)

[3 调整iframe的大小](#3 调整iframe的大小)

[4 切换 iframe 的链接](#4 切换 iframe 的链接)


1 嵌套一个自己的网页

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

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的网页嵌套进来试试呢。

html 复制代码
<!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的大小

html 复制代码
<!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 属性,就可以达到切换显示的效果了。

相关推荐
烛阴10 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言15 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴25 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow2 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript