iframe框架及优缺点

概述iframe框架及优缺点 HTML5不再支持使用frame，关于frame与iframe的区别，可以参阅 iframe与frame的区别。 基本使用 src：规定在iframe中显示的文档的URL。 iframe框架及优缺点

HTML5不再支持使用frame，关于frame与iframe的区别，可以参阅 iframe与frame的区别。

基本使用src：规定在iframe中显示的文档的URL。frameborder：规定是否显示框架周围的边框。scrolling：规定是否在iframe中显示滚动条。wIDth：规定iframe的宽度，建议使用CSS替代。height：规定iframe的高度，建议使用CSS替代。sandBox：启用一系列对iframe中内容的额外限制。marginwIDth：定义iframe的左侧和右侧的边距。marginheight：定义iframe的顶部和底部的边距。srcdoc：规定在iframe中显示的页面的HTML内容。align：规定如何根据周围的元素来对齐此框架，建议使用样式替代。使用场景加载其他域的网页

<iframe>是允许跨域请求资源的，但是不能够修改，由此可以在网页中嵌套其他网页，如需要跨域通信的话，需要考虑document.domain、window.name、window.postMessage。

典型系统结构

典型的系统结构，左侧是功能树，上部为个人信息，右侧就是实际功能，使用iframe将功能单独分离出来，当然也可以使用vue和react进行实现。

实现AJAX

可以使用iframe进行实现异步请求发送，来模拟AJAX的请求 *** 作，AJAX的异步请求完成 *** 作为XHR.readyState === 4执行callback，iframe使用iframe.onload执行callback，还可以实现一个轮询长连接。

加载广告

广告是与原文无关的，假如硬编码进去，会造成网页布局的紊乱,而且这样势必需要引入额外的CSS和Js文件，极大的降低了网页的安全性，使用iframe便可以解决这些问题。

提交表单

可以使用iframe提交表单来避免整个页面的刷新，还可以实现无刷新文件上传的 *** 作。

优缺点优点可以跨域请求其他网站，并将网站完整展示出来。典型系统结构可以提高代码的复用性。创建一个全新的独立的宿主环境，可以隔离或者访问原生接口及对象。模块分离，若多个页面引用同一个iframe，则便于修改 *** 作。实现广告展示的一个解决方案。若需要刷新iframe则只需要刷新框架内，不需要刷新整个页面。缺点iframes阻塞页面加载，影响网页加载速度，iframe加载完毕后才会触发window.onload事件，动态设置src可解决这个问题。加载了新页面，增加了CSS与Js文件的请求，即额外增加了http请求，增加了服务器负担。有时iframe由于页面挤占空间的原因出现滚动条，造成布局混乱。不利于SEO，搜索引擎的爬虫无法解读iframe的页面。有些小型的移动设备如手机等无法完全显示框架，兼容性较差。iframe与主页面是共享链接池的，若iframe加载时用光了链接池，则会造成主页面加载阻塞。参考

https://www.zhihu.com/question/20653055https://www.cnblogs.com/hq233/p/9849939.HTMLhttps://blog.csdn.net/baxiadsy_csdn/article/details/86245809

总结

以上是内存溢出为你收集整理的iframe框架及优缺点全部内容，希望文章能够帮你解决iframe框架及优缺点所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。