HTML 之内联框架

最新推荐文章于 2024-06-06 08:26:43 发布

小智RE0

最新推荐文章于 2024-06-06 08:26:43 发布

阅读量1.2k

点赞数 3

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/MrTumnus/article/details/114842636

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面。

<iframe  src=#<!--初始页面的URL--> 
name=#<!--框架名称-->        
width=#<!--宽度--> 
height=# <!--高度--> 
frameborder=# <!--框架的边框高度--> > 
</iframe>

例如：
新建一个初始页面文件"initial page.html"；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		initial page
		<iframe src="窗口1.html"name="my"  width="300" height="150" frameborder="1">
		</iframe>
	</body>
</html>

初始页面嵌入的是，新建的一个带有链接 a标签的"窗口1.html"文件；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		窗口1
		<a href="baidu.html">链接</a>
	</body>
</html>

窗口1文件运行结果：
在这里插入图片描述

其中，“窗口1"的链接文件"baidu.html”,是外部新建的文件；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		百度
	</body>
</html>

"baidu.html"文件运行：
在这里插入图片描述

然后运行文件"initial page.html"，如下图：
窗口1在初始页面中显示；
在这里插入图片描述
点击窗口1 中的链接；
在窗口1中直接运行了链接的"baidu.html"文件

在这里插入图片描述

target="_self" 在当前窗口打开新页面

在初始页面文件"initial page.html"内容区加入 target="_self"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		initial page
		<a href="baidu.html" target="_self">百度一下</a>
		<iframe src="窗口1.html"name="my"  width="300" height="150" frameborder="1">
		</iframe>
	</body>
</html>

结果，在当前页面打开新页面。
在这里插入图片描述

target="_blank" 在新窗口打开新页面

在初始页面文件"initial page.html"内容区加入
target="_blank
即

<a href="baidu.html" target="_blank">百度一下</a>

结果：
在这里插入图片描述
点击链接“百度一下”，显示在新窗口打开新页面。

target="my" 在指定名称的窗口打开新页面

在初始页面文件"initial page.html"的页面加入 target="my"；即

<a href="baidu.html" target="my">百度一下</a>

这里的"my",和内联 "窗口1.html"时使用的name值相同，则会在当前窗口1区域打开新的页面。
结果：在这里插入图片描述

target="_parent" 在父级窗口打开新页面 target="_top" 在顶级窗口打开新页面

先去新建一个文件"登录.html"
写入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		登录页面
	</body>
</html>

运行:
在这里插入图片描述

再新建一个文件"窗口2.html",其中加入target="_parent" 和 target="_top"；即

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		窗口2
		<a href="登录.html" target="_parent">退出</a>
		<a href="登录.html" target="_top">返回</a>
	</body>
</html>

运行：在这里插入图片描述

对文件"窗口1.html"嵌入"窗口2"，加入target="_parent" 和 target="_top"；即

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		窗口1
		<a href="登录.html" target="_parent">退出</a>
		<a href="登录.html" target="_top">返回</a>
		<iframe src="窗口2.html"  >窗口2</iframe>
	</body>
</html>

运行文件"窗口1.html":
在这里插入图片描述

做完这些后，运行文件"initial page.html",

在这里插入图片描述

点击窗口2 中的 "退出"链接，发现是在它的父级窗口（即窗口1）运行了文件"登录.html"；

在这里插入图片描述

点击窗口2 中的 "返回"链接，发现是在它的顶级窗口（即初始页面）运行了文件"登录.html"；

在这里插入图片描述

点击窗口1 中的 "退出"链接，发现是在它的父级窗口（即初始页面）运行了文件"登录.html"；

在这里插入图片描述

点击窗口1 中的 "返回"链接，发现是在它的顶级窗口（即初始页面）运行了文件"登录.html"；

在这里插入图片描述

小智RE0

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 之内联框架

内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面。<iframe src=# name=# width=# height=#  frameborder=#  > </iframe>例如：新建一个初始页面文件"initial page.html"；&lt
复制链接

扫一扫