版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/qq_42968609/article/details/85166945
<iframe>标签规定一个内联框架（即行内框架)。被用来在当前 HTML 文档中嵌入另一个文档。所有的主流浏览器都支持<iframe>标签。
1、常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| name | frame_name | 规定 iframe 的名称 |
| src | URL | 规定在 iframe 中显示的文档的 URL。 |
| width | pixels% | 规定 iframe 的宽度。 |
| height | pixels% | 规定 iframe 的高度。 |
| marginwidth | pixels | 规定 iframe 的左侧和右侧的边距。 |
| marginheight | pixels | 规定 iframe 的顶部和底部的边距。 |
| frameborder | 0/1 | 规定是否显示框架周围的边框。 |
| scrolling | yes/no/auto | 规定是否在 iframe 中显示滚动条。 |
2、iframe的使用
通常使用iframe直接在页面嵌套iframe标签指定的src就可以了。
示例如下：
<iframe id="myFrame" scrolling="no" frameborder="0" src=" " style="width:100%;height:100%"></iframe>
iframe的
src属性指定本地的一个页面,交互部分写到这个页面中，iframe会自动传到引入的页面。
3、获取iframe中的内容
var iframe = document.getElementById("myFrame"); //获取iframe标签
var iwindow = iframe.contentWindow; //获取iframe的window对象
var idoc = iwindow.document; //获取iframe的document对象
console.log(idoc.documentElement); //获取iframe的html
console.log("body",idoc.body);
4、iframe 子页面调用父页面的方法
子页面使用
parent.method()调用父页面方法，示例如下：
父页面代码：
<body>
<div id="default">div内容</div>
<iframe src="child.html"></iframe>
</body>
<script>
function test() {
alert('Hello World!');
}
</script>
子页面代码：
<body>
<div>iframe子页面内容</div>
</body>
<script>
$(function() {
//在iframe子页面中查找父页面元素
alert($('#default', window.parent.document).html());
//在iframe中调用父页面中定义的变量
alert(parent.value);
//在iframe中调用父页面中定义的方法
parent.test();
});
</script>
5、iframe嵌套音乐播放器
使用<iframe> 标签可以在网页中嵌入网易云音乐播放器。 代码如下：
<iframe frameborder="no" border="0"
marginwidth="0" marginheight="0"
width=350 height=90
src="https://music.163.com/outchain/player?type=2&id=2081092&auto=0&height=66">
</iframe>
参数解释：
id：歌曲id
auto：0/1
0表示打开网页的时候不自动播放；
1表示打开网页的时候自动播放。
效果如下：
6、iframe 的优缺点
-
优点：
- 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少数据的传输，减少网页的加载时间）；
- 技术简单，使用方便，主要应用于不需要搜索引擎来搜索的页面；
- 方便开发，减少代码的重复率（比如页面的header，footer）；
-
缺点：
- 会产生很多的页面，不易于管理；
- 不易打印；
- 多框架的页面会增加服务气得http请求；
- 浏览器的后退按钮无效等；