Chrome 54 终结 YouTube 的 Flash 内嵌技术

简介:

谷歌已经启动了Chrome 54项目。最新发布的版本进一步地边缘化Flash,转而使用HTML5在浏览器里内嵌YouTube视频,同时包含了大量问题修复和功能改进。

谷歌移除Flash的工作已经进行了一段时间,发布的多个更新强化了用户和开发者对HTML5的使用体验。

YouTube从2015年1月份开始使用HTML5作为默认的视频内嵌技术,谷歌在去年改变了Chromium处理网站Flash的方式。

从Chrome 45开始,浏览器在运行最重要的内容并暂停其它Flash内容之前会先检测网页中是否包含了Flash内容。

Chrome 54稳定版重写了YouTube内嵌Flash的方式,当检测到有内嵌的Flash YouTube视频,浏览器会自动使用HTML5替代它。谷歌表示这个变化是“为了减少Flash在Chrome中的使用”。

Chrome 54还带来了Custom Elements规范的v1版本。

在Custom Elements v1:可重用Web组件这篇博文里,谷歌工程师Eric Bidelman说,通过使用自定义元素,“Web开发者可以创建新的HTML标签,弥补已有标签的不足,也可以对其他开发者开发的组件进行扩展”。另外,跟v0版本不一样的是,v1版本的API在设计上有很大不同。

关于如何遵循v1规范为一个元素定义JavaScript API,Bidelman说:

自定义元素的功能是通过ES2015类来定义的,ES2015扩展了HTMLElement。扩展HTMLElement可以保证自定义元素会继承整个DOM API,也就是说,为这个类添加的任何一个属性/方法都会成为自定义元素DOM接口的一部分。本质上,就是使用这个类为你的标签创建JavaScript API。

Bidelman举了AppDrawer这个例子来说明如何定义DOM接口,其中类的属性被映射成HTML属性:

class AppDrawer extends HTMLElement {

  // A getter/setter for an open property.
  get open() {
    return this.hasAttribute('open');
  }

  set open(val) {
    // Reflect the value of the open property as an HTML attribute.
    if (val) {
      this.setAttribute('open', '');
    } else {
      this.removeAttribute('open');
    }
    this.toggleDrawer();
  }

  // A getter/setter for a disabled property.
  get disabled() {
    return this.hasAttribute('disabled');
  }

  set disabled(val) {
    // Reflect the value of the disabled property as an HTML attribute.
    if (val) {
      this.setAttribute('disabled', '');
    } else {
      this.removeAttribute('disabled');
    }
  }

  // Can define constructor arguments if you wish.
  constructor() {
    // If you define a ctor, always call super() first!
    // This is specific to CE and required by the spec.
    super();

    // Setup a click listener on  itself.
    this.addEventListener('click', e => {
      // Don't toggle the drawer if it's disabled.
      if (this.disabled) {
        return;
      }
      this.toggleDrawer();
    });
  }

  toggleDrawer() {
    ...
  }
}

customElements.define('app-drawer', AppDrawer);
关于更多自定义元素的信息,包括自定义元素的扩展和重构,请参看这里。

Chrome 54还包括了大量安全方面的问题修复。尽管谷歌没有透露太多关于这些问题的细节,Richard Bustamante在稳定通道更新里还是列出了总共21个安全问题修复,包括6个“高”安全级别问题。其中一个是URL欺骗漏洞相关问题,有一个是全局XSS问题(CVE-2016-5181),还有一个Blink引擎的堆溢出问题(CVE-2016-5182)。谷歌的PDF软件包PDFium有三个高级别的问题修复。

从谷歌公布的Chrome 54已移除和不再推荐使用的API列表来看,最新版本的Chrome不允许跨域访问window.onunload事件处理器,为的是让Chrome和HTML规范保持一致。HTTP/0.9不再被推荐使用(开发者应该转向HTTP/2),initTouchEvent被移除。

Chrome 55计划在今年11月发布。

目录
相关文章
|
Web App开发
Mac 技术篇-触控板双指前进后退手势设置方法,mac关闭chrome浏览器双指返回手势实例演示
Mac 技术篇-触控板双指前进后退手势设置方法,mac关闭chrome浏览器双指返回手势实例演示
2186 0
Mac 技术篇-触控板双指前进后退手势设置方法,mac关闭chrome浏览器双指返回手势实例演示
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
46 1
|
Web App开发 JavaScript 前端开发
JavaScript 技术篇-navigator.permissions读取chrome剪切板权限获取不生效原因:只有在https协议下使用有效。手动设置chrome页面剪切板读取权限方法
JavaScript 技术篇-navigator.permissions读取chrome剪切板权限获取不生效原因:只有在https协议下使用有效。手动设置chrome页面剪切板读取权限方法
1532 0
JavaScript 技术篇-navigator.permissions读取chrome剪切板权限获取不生效原因:只有在https协议下使用有效。手动设置chrome页面剪切板读取权限方法
|
Web App开发 开发者
Chrome 技术篇-将程序打包为crx文件,chrome插件的打包方法。
Chrome 技术篇-将程序打包为crx文件,chrome插件的打包方法。
707 0
Chrome 技术篇-将程序打包为crx文件,chrome插件的打包方法。
|
Web App开发 前端开发 开发者
《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.1 注册 Chrome Web Store 开发者
《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.1 注册 Chrome Web Store 开发者
142 0
|
Web App开发 内存技术
怎么在chrome里打开flash的设置
怎么在chrome里打开flash的设置
206 0
怎么在chrome里打开flash的设置
|
Web App开发 内存技术
允许chrome浏览器运行flash
允许chrome浏览器运行flash
155 0
允许chrome浏览器运行flash
|
Web App开发 存储
Chrome 技术篇-一台电脑设置多个独立chrome方法实例演示,chrome独立多开技术,chrome多开并加载原chrome的数据方法
Chrome 技术篇-一台电脑设置多个独立chrome方法实例演示,chrome独立多开技术,chrome多开并加载原chrome的数据方法
857 0
Chrome 技术篇-一台电脑设置多个独立chrome方法实例演示,chrome独立多开技术,chrome多开并加载原chrome的数据方法
|
Web App开发 JavaScript 开发者
Python+selenium 自动化-chrome页面静止、冻结技术,获取web动态页面的Xpath方法,查看浏览器动态dom节点
Python+selenium 自动化-chrome页面静止、冻结技术,获取web动态页面的Xpath方法,查看浏览器动态dom节点
534 0
Python+selenium 自动化-chrome页面静止、冻结技术,获取web动态页面的Xpath方法,查看浏览器动态dom节点
|
Web App开发 JavaScript 前端开发
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
1297 0
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件