iframe
通俗的说:是一个类似于网页上小广告的那个弹窗。也就是可以实现在本页面上显示其他页面内容的功能。
<iframe src="https://www.baidu.com" height="400" width="700" name="demo" frameborder="0" scrolling="auto" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts" ></iframe>
划重点:
1.sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"
这个参数是必须要加的,否则出来的界面是空白一片。
2.如果想要无边框的,清新自然的感觉,那么加上frameborder="0"
1.sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"
这个参数是必须要加的,否则出来的界面是空白一片。
2.如果想要无边框的,清新自然的感觉,那么加上frameborder="0"
![](https://img2020.cnblogs.com/blog/1822067/202006/1822067-20200605204259041-746589936.png)
iframe的缺点:
1、代码复杂,无法被一些搜索引擎索引到(有些搜索引擎对框架结构的页面不能正确处理,会影响到搜索结果的排列名次)搜索引擎的检索程序无法解读这种页面,不利于SEO
2、多框架的页面会增加服务器的http请求,影响页面的并行加载。
(并行加载:同一时间针对同一域名下的请求。一般情况,iframe和所在页面在同一个域下面,而浏览器的并加载的数量是有限制的。)
iframe
之前需要考虑这两个缺点。如果需要使用iframe
,最好是通过javascript
动态给iframe
添加src
属性值,这样可以绕开以上两个问题4、会产生很多页面,不容易管理
5、不容易打印(目前只能实现分框架页面的打印,不能实现对frameset的打印)
6、浏览器的后退按钮无效(只能针对实现当前光标所在页面的前进与后退,无法实现frameset整个页面的前进与后退)
8、iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
优点:
1、重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,加快了网页下载速度)
2、技术易于掌握,使用方便,使用者众多,可主要应用于不需搜索引擎来搜索的页面
3、方便制作导航栏