HTML内联框架

前言:

我们有时候打开网页时会有广告窗的出现,而这些窗口并不是来自于本站的,而是来自于外部网页,只是被引用到了自己网页中而已。这一种技术可以通过内联来实现。

标签介绍:

HTML 内联框架元素 (<iframe>) 表示嵌套的。它能够将另一个 HTML 页面嵌入到当前页面中,并且它自带了一些有用的特性,如调整大小、滚动等。

使用介绍:

基本操作框架:

<iframe src="路径"></iframe>

例子(以CSDN为例):
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://www.csdn.net/"></iframe>
</body>
</html>

效果如下:

部分属性(展示部分):

1)src

~用于指定此处的URL地址(路径)

例子:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://www.csdn.net/"></iframe>
</body>
</html>


2) width和height

~指定框架的长宽

例子:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://www.bilibili.com/" width="200" height="1000"></iframe>
</body>
</html>

3)name

~指定iframe的名称

例子:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe name="B站" src="https://www.bilibili.com/" width="222" height="333"></iframe>
</body>
</html>

4)allowfullscreen

~是否允许全屏播放

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe allowfullscreen="yes" src="https://www.bilibili.com/" width="555" height="555"></iframe>
</body>
    
</html>

5)allowtransparency

~允许内嵌框架指定透明度。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe allowtrans="yes" src="https://www.bilibili.com/" width="555" height="555"></iframe>
</body>
    
</html>

6) scrolling

~是否显示滚动条,

~决定是否显示滚动条,可以使用"auto"自动决定是否显示滚动条,或者设为"yes"和"no"指定是否一直显示或隐藏滚动条

例子:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe scrolling = "no" src="https://www.bilibili.com/" width="222" height="333"></iframe>
</body>
</html>


7) frameborder

~是否显示边框

~可以使用值"0"、"1"和"no"、"yes"来指定是否显示边框

例子:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe frameborder="yes" src="https://www.bilibili.com/" width="222" height="333"></iframe>
</body>
</html>

【由于变化不是很明显,就不展示参考图了】
8) id 为框架的唯一标识

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe id="B站" src="https://www.bilibili.com/" width="555" height="555"></iframe>
</body>
    
</html>
相关推荐
少年纪几秒前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin2 分钟前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍5 分钟前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月5 分钟前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高0076 分钟前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom7 分钟前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
Alan521599 分钟前
Java 后端实现基于 JWT 的用户认证和权限校验(含代码讲解)
前端·后端
RoyLin19 分钟前
TypeScript设计模式:策略模式
前端·后端·typescript
brzhang29 分钟前
为什么说低代码谎言的破灭,是AI原生开发的起点?
前端·后端·架构
小桥风满袖1 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript