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

tech2023-05-28  62

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

Over the past several months, we have made numerous improvements to the Microsoft Edge rendering engine (Microsoft EdgeHTML), focusing on interoperability with modern browsers and compliance with new and emerging standards. In addition to powering Microsoft Edge, EdgeHTML is also available for all Universal Windows Platform (UWP) apps via the WebView control. In this tutorial, I’d like to demonstrate how the WebView control can be used to create your own browser in Windows 10. If you’re on Mac, you can always try one of our virtual machines or duel-boot install an Insider build too.

在过去的几个月中,我们对Microsoft Edge呈现引擎 (Microsoft EdgeHTML)进行了许多改进 ,重点是与现代浏览器的互操作性以及对新标准和新标准的遵从性。 除了支持Microsoft Edge,EdgeHTML还可以通过WebView控件用于所有通用Windows平台 (UWP)应用程序。 在本教程中,我想演示如何使用WebView控件在Windows 10中创建自己的浏览器。如果您使用的是Mac,则可以随时尝试使用我们的虚拟机之一或通过对决启动安装Insider构建太。

Using standard web technology including JavaScript, HTML, and CSS we created a sample UWP application which hosts the WebView and provides basic functionality such as navigation and favorites. These same techniques can be used in any UWP application to seamlessly integrate web content.

使用包括JavaScript,HTML和CSS在内的标准网络技术,我们创建了一个示例UWP应用程序,该应用程序承载WebView并提供基本功能,例如导航和收藏夹。 这些相同的技术可以在任何UWP应用程序中使用,以无缝集成Web内容。

The crux of the functionality stems around the powerful WebView control. Offering a comprehensive set of APIs, it overcomes several of the limitations which encumber iframes, such as framebusting sites and document loading events. Additionally, the x-ms-webview, how one declares a WebView in HTML, provides new functionality that is not possible with an iframe, such as better access to local content and the ability to take screenshots. When you use the WebView control, you get the same web platform that powers Microsoft Edge.

功能的症结在于强大的WebView控件。 它提供了一套全面的API,它克服了妨碍iframe的一些局限性 ,例如framebusting网站和文档加载事件。 此外, x-ms-webview (如何用HTML声明WebView)提供了iframe无法实现的新功能,例如更好地访问本地内容和拍摄屏幕截图的功能。 使用WebView控件时,您将获得与Microsoft Edge相同的Web平台。

获取示例代码 (Get the Sample Code)

You can view the full set of sample code in our repo on GitHub. You can also demo the browser live by installing the app from the Windows Store, or by deploying the Visual Studio solution.

您可以在我们的GitHub回购中查看完整的示例代码集 。 您还可以通过从Windows应用商店安装应用程序或部署Visual Studio解决方案来实时演示浏览器。

试试看 (Try it out)

With the WebView control, we were able to create a simple web browser using standard web technology in just an afternoon. We look forward to seeing what you build with Windows 10!

使用WebView控件,我们可以在一个下午内使用标准Web技术创建一个简单的Web浏览器。 我们期待看到您使用Windows 10构建的东西!

Web开发更多动手 (More hands-on with Web Development)

This article is part of the web development series from Microsoft tech evangelists on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.

本文是Microsoft技术传播者开发的Web开发系列文章的一部分,内容涉及实用JavaScript学习,开源项目以及互操作性最佳实践,包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎 。

We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.modern.IE:

我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试,包括Microsoft Edge(Windows 10的默认浏览器):

Scan your site for out-of-date libraries, layout issues, and accessibility

扫描您的站点以查找过期的库,布局问题和可访问性

Use virtual machines for Mac, Linux, and Windows

在Mac,Linux和Windows上使用虚拟机

Remotely test for Microsoft Edge on your own device

在您自己的设备上远程测试Microsoft Edge

Coding Lab on GitHub: Cross-browser testing and best practices

GitHub上的编码实验室:跨浏览器测试和最佳实践

In-depth tech learning on Microsoft Edge and the Web Platform from our engineers and evangelists:

我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习:

Microsoft Edge Web Summit 2015 (what to expect with the new browser, new supported web platform standards, and guest speakers from the JavaScript community)

Microsoft Edge Web Summit 2015 (新浏览器,新支持的网络平台标准以及来自JavaScript社区的嘉宾演讲者会期待什么)

Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)

哇,我可以在Mac和Linux上测试Edge和IE! (来自Rey Bango)

Advancing JavaScript without Breaking the Web (from Christian Heilmann)

在不中断网络的情况下推进JavaScript (来自Christian Heilmann)

The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)

使Web正常工作的Edge渲染引擎 (来自Jacob Rossi)

Unleash 3D rendering with WebGL (from David Catuhe including the vorlon.JS and babylonJS projects)

使用WebGL释放3D渲染 (来自David Catuhe,包括vorlon.JS和babylonJS项目)

Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov including the manifold.JS project)

托管的Web应用程序和Web平台创新 (来自Kevin Hill和Kiril Seksenov,包括歧管 .JS项目)

More free cross-platform tools & resources for the Web Platform:

Web平台的更多免费跨平台工具和资源:

Visual Studio Code for Linux, MacOS, and Windows

适用于Linux,MacOS和Windows的Visual Studio代码

Code with node.JS and free trial on Azure

使用node.JS进行代码和Azure上的免费试用

翻译自: https://www.sitepoint.com/create-browser-javascript-using-edgehtml/

相关资源:25个经典网站源代码
最新回复(0)