前端iframe标签的妙用

最新推荐文章于 2023-04-17 14:49:31 发布

hello big_bear

最新推荐文章于 2023-04-17 14:49:31 发布

阅读量660

点赞数

分类专栏： html基础文章标签：前端 javascript css

本文链接：https://blog.csdn.net/big_beer/article/details/121017503

版权

html基础专栏收录该内容

15 篇文章 3 订阅

订阅专栏

iframe基本使用：

iframe主要是在游览器的页面中划分出一部分地方用来放其他页面。

打个比方如果想在自己做的页面里面嵌入淘宝的首页，那就把src设置为淘宝的链接。记得要设置一下class样式，不然默认高度为0就不会显示出来了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是一个iframe</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.iframe{
			width: calc(100% - 4px);
			height: calc(100vh - 8px);
		}
	</style>
	<body>
		<iframe id='iframe' class="iframe" src="https://www.taobao.com/" />
	</body>
</html>

另外我们可以利用iframe配合实现多个网页的自动刷新。
例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多个页面自动刷新</title>
	</head>
	<body>
	</body>
</html>
<html>
<head>
	<meta http-equiv="refresh" content="61"><!-- 实现游览器自动刷新，61秒一次 -->
</head>
<frameset>
<iframe src="https://www.taobao.com/" style="width: 100%;height: 300px;"></iframe>
<iframe src="https://www.taobao.com/" style="width: 100%;height: 300px;"></iframe>
<iframe src="https://www.taobao.com/" style="width: 100%;height: 300px;"></iframe>
<iframe src="https://www.taobao.com/" style="width: 100%;height: 300px;"></iframe>
<iframe src="https://www.taobao.com/" style="width: 100%;height: 300px;"></iframe>
<iframe src="https://www.taobao.com/" style="width: 100%;height: 300px;"></iframe>
</frameset>
</html>

这样自动刷新可以挂着自己csdn里的文章，给自己文章刷访问量，只要一运行就挂着就好了。虽然慢但是很好用绝对安全。

hello big_bear

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端iframe标签的妙用

iframe基本使用：iframe主要是在游览器的页面中划分出一部分地方用来放其他页面。打个比方如果想在自己做的页面里面嵌入淘宝的首页，那就把src设置为淘宝的链接。记得要设置一下class样式，不然默认高度为0就不会显示出来了。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>这是一个iframe</title> </head> &l
复制链接

扫一扫