网络修养-内联框架iframe巧妙跨域

DayDay_Lee

于 2019-10-29 21:13:07 发布

阅读量305

点赞数

分类专栏：前端开发网络修养-笔记前端Html学习笔记文章标签： iframe 跨域

本文链接：https://blog.csdn.net/qq_43127921/article/details/102808525

版权

本文详细探讨了iframe的常用属性和功能，包括在网页中嵌入其他页面、导航栏切换、在线编辑器和广告植入等。同时，分析了iframe的优缺点，如页面加载阻塞问题和如何通过JavaScript动态设置SRC避免这种情况。文章还深入讨论了iframe的跨域通信，包括document.domain、postMessage、window.name以及window.location.hash等方法，并提供了具体的实现示例和注意事项。

摘要由CSDN通过智能技术生成

iframe

常用属性


1.frameborder:是否显示边框，1(yes),0(no)

2.height:框架作为一个普通元素的高度，建议在使用css设置。

3.width:框架作为一个普通元素的宽度，建议使用css设置。

4.name:框架的名称，window.frames[name]时专用的属性。

5.scrolling:框架的是否滚动。yes,no,auto。

6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持

常用功能

可以一个网页里嵌入另一个网页

导航栏tab切换页（古老的做法）、在线编辑器、广告植入

历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案

跨域通信等

iframe利弊

iframes 阻塞页面加载

触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢

window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况

<