html5--1.16 内联框架
html5--1.16 内联框架
学习要点:
1.iframe内联框架
2.综合实例1
1.iframe内联框架
1.iframe元素用来在文档中添加一个内联框架。
2.iframe为body元素的子元素,必须放置在boay中使用
3.主要属性:src;name/id;width;height
4.对HTML5中已经删除的属性不再进行讲解
<a href="https://www.taobao.com" target="myiframe">淘宝网</a>
<iframe src="https://www.baidu.com" frameborder="1" width="100%" height="500px" name="myiframe"></iframe>
2.综合实例1
运用以前学过的内容制作一个小案例;说明:案例仅是为了复习和巩固已经学过的内容,故并非最佳达到该效果的最佳方案
3.Iframe 有什么好处,有什么坏处?
国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么?
作者:张云龙
链接:https://www.zhihu.com/question/20653055/answer/35387821
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
链接:https://www.zhihu.com/question/20653055/answer/35387821
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
iframe原本的用法在现在看来是不合时宜的,问题太多了,不一一列举,但是它的其他功能却是不错的黑魔法,这里列举一些,想到了再更新:
- 用来实现长连接,在websocket不可用的时候作为一种替代,最开始由google发明。Comet:基于 HTTP 长连接的“服务器推”技术
- 跨域通信。JavaScript跨域总结与解决办法 ,类似的还有浏览器多页面通信,比如音乐播放器,用户如果打开了多个tab页,应该只有一个在播放。
- 历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代。
- 纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串,可以通过页面加载一个gbk的iframe,然后主页面与子页面通信的方式实现转换,这样就不用在页面上插入一个非常巨大的编码映射表文件了,其中子页面内容:
<!doctype html> <html> <head> <meta charset="gbk"> <script> window.encoding = function(str){ //利用a元素的href属性来encode var a = document.createElement("a"); a.href = "/?q=" + str; var url = a.href; //这里读取的时候会自动编码 a.href = "/?q="; return url.replace(a.href, ""); }; </script> </head> </html>
- 评论里有提到,用iframe实现无刷新文件上传,在FormData不可用时作为替代方案
- 在移动端用于从网页调起客户端应用(此方法在iphone上并不安全,慎用!具体风险看这里 iOS URL Scheme 劫持 )。比如想在网页中调起支付宝,我们可以创建一个iframe,src为:
alipayqr://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode={支付二维码扫描的url}
/** * 调起客户端 * @param url {String} * @param onSuccess {Function} * @param onFail {Function} */ module.exports = function(url, onSuccess, onFail){ // 记录起始时间 var last = Date.now(); // 创建一个iframe var ifr = document.createElement('IFRAME'); ifr.src = url; // 飘出屏幕外 ifr.style.position = 'absolute'; ifr.style.left = '-1000px'; ifr.style.top = '-1000px'; ifr.style.width = '1px'; ifr.style.height = '1px'; // 设置一个4秒的动画用于检查客户端是否被调起 ifr.style.webkitTransition = 'all 4s'; document.body.appendChild(ifr); setTimeout(function(){ // 监听动画完成时间 ifr.addEventListener('webkitTransitionEnd', function(){ document.body.removeChild(ifr); if(Date.now() - last < 6000){ // 如果动画执行时间在预设范围内,就认为没有调起客户端 if(typeof onFail === 'function'){ onFail(); } } else if(typeof onSuccess === 'function') { // 动画执行超过预设范围,认为调起成功 onSuccess(); } }, false); // 启动动画 ifr.style.left = '-10px'; }, 0); };
- 创建一个全新的独立的宿主环境。经 大神提醒,iframe还可以用于创建新的宿主环境,用于隔离或者访问原始接口及对象,比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用,那我们就能通过创建一个iframe,然后从iframe中取回原始对象和方法来破解这种防范。类似的还有 曾经提到的javascript裸对象创建中的一种方法:如何创建一个JavaScript裸对象 ,一般所见即所得编辑器也是由iframe创建的, 的回答有提到
- IE6下用于遮罩select。经 @yaniv 提醒想起来的。曾经在ie6时代,想搞一个模态窗口,如果窗口叠加在select元素上面,是遮不住select的,为了解决这个问题,可以通过在模态窗口元素下面垫一个iframe来实现遮罩,好坑爹的ie6,还我青春韶华~~
- to be continued ...
参考:
Iframe 有什么好处,有什么坏处?国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么? - 知乎
https://www.zhihu.com/question/20653055
版权申明:欢迎转载,但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。
在校每年国奖、专业第一,加拿大留学,先后工作于华东师范大学和香港教育大学。
2024-09-05:27岁,宅加太忙,特此在网上找女朋友,vx:fan404006308
AI交流资料群:753014672