【HTML入门】第十二课

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

在早期没有出现Vue和React之前呢，做管理系统，iframe是非常普遍的技术。比如管理系统左侧有非常多的菜单，然后点击菜单后，右边就要展现不同的页面。

又或者呢，我们看一些网站，他们侧边展示着五彩绚烂的广告，那有可能就是嵌套在iframe里的第三方网页。

还有很多恶意搞破坏的，在自己网站，做一个iframe，里面嵌套上别人的网站，然后很多人误以为这是一个正常的网站，然后点击登录的时候，就很可能把自己的信息泄露了。

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

1 嵌套一个自己的网页

2 嵌套一个第三方网页

3 调整iframe的大小

4 切换 iframe 的链接

1 嵌套一个自己的网页

比如我们之前新建了一个 index1.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的网页嵌套进来试试呢。

<!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的大小

<!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>