iframe是啥?
概念:
iframe 是 HTML 的一个标签,用于在网页中嵌入另一个 HTML 文档。通俗来讲就是你自己的html页面里面可以随便拿一块空间嵌套别的网页。你们看到这个页面两侧的广告(google广告)。下面是我自己在自己页面嵌套的youtube视频~
代码:
效果
iframe 的属性:
- src: 指定要嵌入的外部文档的 URL。
- width 和 height: 设置 iframe 的宽度和高度。
- frameborder: 指定是否显示 iframe 的边框(取值为 "0" 或 "1")。
- sandbox: 提供了一组额外的安全属性来限制 iframe 中内容的行为。可以组合使用多个值,如
allow-scripts
、allow-same-origin
、allow-forms
等。 - name: 为 iframe 指定一个名称,以便可以通过目标属性或脚本进行引用。
- allow: 定义特定的功能权限,如
allowfullscreen
允许全屏显示。
iframe 的常见用法:
1.嵌入外部页面
<iframe src="https://www.baidu.com" width="800" height="600"></iframe>
2.嵌入YouTube视频
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
3.嵌入谷歌地图
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509323!2d144.96305781531677!3d-37.816279179751704!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577b0f0b1e9d0c2!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1587937071678!5m2!1sen!2sau" width="600" height="450" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
安全性
使用"sandbox"可以增强iframe安全性,就是js沙盒
<iframe src="https://www.example.com" sandbox="allow-scripts allow-same-origin"></iframe>
allow-scripts
允许执行脚本,allow-same-origin
允许与主页面共享相同的源。根据需要,可以添加或删除这些限制。
哈哈哈,如果你们网页想用的别的网站的东西啥的,可以试试iframe标签哦!!!
标签:嵌入,网页,iframe,标签,用法,allow,页面 From: https://blog.csdn.net/weixin_42884605/article/details/140178273