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
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

iframe原本的用法在现在看来是不合时宜的,问题太多了,不一一列举,但是它的其他功能却是不错的黑魔法,这里列举一些,想到了再更新:
  1. 用来实现长连接,在websocket不可用的时候作为一种替代,最开始由google发明。Comet:基于 HTTP 长连接的“服务器推”技术
  2. 跨域通信。JavaScript跨域总结与解决办法 ,类似的还有浏览器多页面通信,比如音乐播放器,用户如果打开了多个tab页,应该只有一个在播放。
  3. 历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代。
  4. 纯前端的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部署到父页面的同源服务上,就能在父页面直接调用iframe中的encoding接口了。

  5. 评论里有提到,用iframe实现无刷新文件上传,在FormData不可用时作为替代方案
  6. 在移动端用于从网页调起客户端应用(此方法在iphone上并不安全,慎用!具体风险看这里 iOS URL Scheme 劫持 )。比如想在网页中调起支付宝,我们可以创建一个iframe,src为:
    alipayqr://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode={支付二维码扫描的url}

    浏览器接收到这个url请求发现未知协议,会交给系统处理,系统就能调起支付宝客户端了。我们还能趁机检查一下用户是否安装客户端:给iframe设置一个3-5秒的css3的transition过渡动画,然后监听动画完成事件,如果用户安装了客户端,那么系统会调起,并将浏览器转入后台运行,进入后台的浏览器一般不会再执行css动画,这样,我们就能通过判断css动画执行的时长是否超过预设来判断用户是否安装某个客户端了:

    /**
    * 调起客户端
    * @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);
    };
  7. 创建一个全新的独立的宿主环境。经

    大神提醒,iframe还可以用于创建新的宿主环境,用于隔离或者访问原始接口及对象,比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用,那我们就能通过创建一个iframe,然后从iframe中取回原始对象和方法来破解这种防范。类似的还有

    曾经提到的javascript裸对象创建中的一种方法:如何创建一个JavaScript裸对象 ,一般所见即所得编辑器也是由iframe创建的,

    的回答有提到

  8. IE6下用于遮罩select。经 @yaniv 提醒想起来的。曾经在ie6时代,想搞一个模态窗口,如果窗口叠加在select元素上面,是遮不住select的,为了解决这个问题,可以通过在模态窗口元素下面垫一个iframe来实现遮罩,好坑爹的ie6,还我青春韶华~~
  9. to be continued ...

参考:

Iframe 有什么好处,有什么坏处?国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么? - 知乎
https://www.zhihu.com/question/20653055

html5--1.16 内联框架的更多相关文章

  1. HTML5 内联框架iFrame

    由于现在frame和frameset很少使用,已经过时了,已经被div+CSS代替了,所以,这里只是举例说明一下,当下还在使用的内联框架iFrame 所谓的iFrame内联框架,我的理解就是在网页内部 ...

  2. __x__(14)0906第三天__<iframe> 内联框架 引入有一个外部html页面

    在现实开发中,不推荐使用内联框架,因为<iframe></iframe>中的内容不会被搜索引擎检索. 在特殊情况中,如内网项目,不用放在互联网上时,可以使用<iframe ...

  3. 计算机网络之iframe内联框架跨域

    iframe框架同源下的数据调用 iframe框架非同源下的数据传输 一.iframe框架同源下的数据调用 1.父窗口向子窗口获取数据 //html1父级窗口 <iframe src=" ...

  4. Iframe内联框架

    iframe:内联框架标签,用于在网页中任意的位置嵌入另一个网页 <iframe src="url地址"> </iframe> iframe标签的常用属性 ...

  5. 前端学习 -- 内联框架iframe

    内联框架iframe 可以向一个页面中引入其他的外部页面 内联框架中的内容不会被搜索引擎所检索,所以开发中尽量不要使用内联框架 <iframe></iframe> 属性: sr ...

  6. HTMLA内联框架

    <head> <meta charset="utf-8" /> <title>内联框架</title> </head> ...

  7. 重写iframe内联框架中的内容

    重写iframe内联框架中的内容,不使用src指向页面url,主动写入HTML代码: var ifr = document.getElementById("CMBC-certificatio ...

  8. HTML&CSS基础-内联框架

    HTML&CSS基础-内联框架 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,在同一个路径中有两个网页 <!DOCTYPE html> < ...

  9. [19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接

    一.实体(转义字符) 在HTML中,一些诸如<.> 就是普通的小于号和大于号不能直接使用,因为浏览可能会把它当成一个标签去解析,所以需要一些特殊字符去表示这些特殊字符, 这些字符我们称他们 ...

随机推荐

  1. JavaScript中推断一个对象是否为&quot;空对象”

    JavaScript中推断一个对象是否为"空对象" 这里指的"空对象"是类似于:{ } 和 new Object() 这种. 详细的代码实现和原理例如以下: / ...

  2. ORA-02050故障诊断一例

    http://czmmiao.iteye.com/blog/1474678昨天客户反映说在下午某时间段有几个事务失败了,让我查下当时数据库系统的负载是否正常,看了下CPU的历史负载,很正常,于是看了下 ...

  3. 本地aar文件引用

    有时须要使用第三方的aar库.或是project源码越来越大.项目内分工须要或出于模块化考虑.须要引用aar文件. arr就像C/C++中的静态库. 怎样建一个aar.网上的文章非常多,这里不再重述. ...

  4. DataTable去除空行

    protected void removeEmpty(DataTable dt) { List<DataRow> removelist = new List<DataRow>( ...

  5. python学习(八)阶段性总结

    这里学习了python的一点点基础然后来总结一下 python是一个强类型的语言 数字: 数字的类型大概有:整数.浮点数.复数.固定精度的十进制数.带分子和分母的有理数 数字与字符串之间不能直接相加, ...

  6. Unix下C语言开发工具

    在Unix下进行C语言开发有一套工具,主要有: 编译器:cc,gcc,clang SSH登录工具:putty,xshell就不说了,尼玛还有后门 make工具:跟Maven一样是项目构建工具,这个使用 ...

  7. 【转】Android中的Apk的加固(加壳)原理解析和实现

    一.前言 今天又到周末了,憋了好久又要出博客了,今天来介绍一下Android中的如何对Apk进行加固的原理.现阶段.我们知道Android中的反编译工作越来越让人操作熟练,我们辛苦的开发出一个apk, ...

  8. Yii的权限管理rbac

    1.首先我们要在配置文件的组件(component)里面配置一下 Rbac 在对应项目下的config/main.php或者config/main-local.php下添加 'authManager' ...

  9. Eclipse如何删除插件

    删除Eclipse安装的插件方法: help -> install new softWare -> what is already installed ->选中 要卸载的插件 -&g ...

  10. 九度OJ 1156:谁是你的潜在朋友 (并查集)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5802 解决:2593 题目描述: "臭味相投"--这是我们描述朋友时喜欢用的词汇.两个人是朋友通常意味着他们存在着许多 ...