HTML内联框架iframe

95 阅读 0 评论 63 点赞

我是靠谱客的博主悦耳早晨，这篇文章主要介绍HTML内联框架iframe，现在分享给大家，希望可以做个参考。

由于现在frame和frameset很少使用，已经过时了，已经被div+CSS代替了，所以，这里只是举例说明一下，当下还在使用的内联框架iframe。所谓的iFrame内联框架，简单理解就是在网页内部嵌套一个网页，并且可以一级一级地嵌套下去。

测试代码:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联框架测试</title>
</head>
<body>
<div style="margin-left:20%;">
<!--内联框架可以嵌套-->
<iframe src="framec.html" frameborder="0" width="60%" height="50%"/>
</div>
<!--防止被内嵌js代码-->
<script type="text/javascript">
if (window!=top) // 判断当前的window对象是否是top对象
top.location.href =window.location.href; // 如果不是，将top对象的网址自动导向被嵌入网页的网址
</script>
</body>
</html>
<!--framec.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>framec</title>
</head>
<body>
<div style="background-color: green; width:500px;height:300px;">
<a href="http://www.baidu.com">在当前iframe打开网页</a><br>
<a href="http://www.baidu.com" target="_parent">在父级frame中打开新网页</a><br>
<a href="http://www.baidu.com" target="_top">在顶级frame中打开新网页</a>
</div>
</body>
</html>