如何使用 EdgeHTML 在 JavaScript 中创建自己的浏览器






4.63/5 (6投票s)
Microsoft Edge 团队的项目经理 Josh Rennert 展示了如何在 Windows 10 中使用 WebView 控件创建您自己的浏览器。
在过去的几个月里,我们对 Microsoft Edge 渲染引擎(Microsoft EdgeHTML)进行了大量的改进,重点在于与现代浏览器的互操作性以及对新标准和新兴标准的遵从。除了为 Microsoft Edge 提供支持外,EdgeHTML 还通过 WebView 控件,对所有 通用 Windows 平台 (UWP) 应用开放。在本教程中,我想演示如何使用 WebView 控件在 Windows 10 中创建您自己的浏览器。如果您使用的是 Mac,也可以尝试我们提供的虚拟机或双重引导安装 Insider 版本。
我们使用包括 JavaScript、HTML 和 CSS 在内的标准 Web 技术创建了一个示例 UWP 应用程序,该应用程序托管了 WebView 并提供了导航和收藏夹等基本功能。这些相同的技术可用于任何 UWP 应用程序,以无缝集成 Web 内容。
功能的关键在于强大的 WebView 控件。它提供了全面的 API 集,克服了 iframe 的许多限制,例如防止帧跳转的网站和文档加载事件。此外,x-ms-webview(这是在 HTML 中声明 WebView 的方式)提供了 iframe 无法实现的新功能,例如更好地访问本地内容以及截屏的能力。当您使用 WebView 控件时,您将获得支持 Microsoft Edge 的相同 Web 平台。
获取示例代码
您可以在 GitHub 上的存储库中查看完整的示例代码。您也可以通过从 Windows 应用商店安装该应用程序,或部署 Visual Studio 解决方案来实时演示该浏览器。
试用
借助 WebView 控件,我们仅用一个下午的时间就使用标准的 Web 技术创建了一个简单的 Web 浏览器。我们期待看到您使用 Windows 10 构建的精彩内容!
更多 Web 开发实践
本文是 Microsoft 技术传道者和工程师关于实用 JavaScript 学习、开源项目和互操作性最佳实践的网络开发系列文章的一部分,包括 Microsoft Edge 浏览器和新的 EdgeHTML 渲染引擎。
我们鼓励您使用 dev.modern.IE 上的免费工具,跨包括 Windows 10 默认浏览器 Microsoft Edge 在内的各种浏览器和设备进行测试。
- 扫描您的网站是否存在过时库、布局问题和可访问性问题
- 将虚拟机用于 Mac、Linux 和 Windows
- 在您自己的设备上远程测试 Microsoft Edge
- GitHub 上的编程实验室:跨浏览器测试和最佳实践
深入了解 Microsoft Edge 和 Web 平台的技术学习
- Microsoft Edge Web Summit 2015(关于新浏览器的预期、支持的新 Web 平台标准以及来自 JavaScript 社区的特邀演讲者)
- 哇,我可以在 Mac 和 Linux 上测试 Edge 和 IE!(来自 Rey Bango)
- 在不破坏 Web 的前提下推进 JavaScript(来自 Christian Heilmann)
- 让 Web 正常工作的 Edge 渲染引擎(来自 Jacob Rossi)
- 利用 WebGL 释放 3D 渲染能力(来自 David Catuhe,包括 vorlon.JS 和 babylonJS 项目)
- 托管 Web 应用和 Web 平台创新(来自 Kevin Hill 和 Kiril Seksenov,包括 manifold.JS 项目)
更多免费的跨平台工具和网络平台资源