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.
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.
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!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. 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:- Scan your site for out-of-date libraries, layout issues, and accessibility
- Use virtual machines for Mac, Linux, and Windows
- Remotely test for Microsoft Edge on your own device
- Coding Lab on GitHub: Cross-browser testing and best practices
- Microsoft Edge Web Summit 2015 (what to expect with the new browser, new supported web platform standards, and guest speakers from the JavaScript community)
- Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
- Advancing JavaScript without Breaking the Web (from Christian Heilmann)
- The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
- Unleash 3D rendering with WebGL (from David Catuhe including the vorlon.JS and babylonJS projects)
- Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov including the manifold.JS project)
Frequently Asked Questions about Creating a Browser with JavaScript Using EdgeHTML
What is EdgeHTML and why is it important in creating a browser with JavaScript?
EdgeHTML is a proprietary web browser engine developed by Microsoft for the Edge web browser. It’s a fork of Microsoft’s Trident engine. The importance of EdgeHTML in creating a browser with JavaScript lies in its modern standards support, improved performance, and enhanced security. It allows developers to create more efficient, faster, and safer web applications and browsers.
How does EdgeHTML differ from other browser engines?
Unlike other browser engines, EdgeHTML is designed to be a lightweight engine that provides a faster browsing experience. It also has a unique capability to render websites in both modern and legacy modes, ensuring compatibility with older websites while still supporting the latest web standards.
Can I create a browser with JavaScript using other engines apart from EdgeHTML?
Yes, you can. JavaScript is a versatile language that can be used with various browser engines like Blink (used in Chrome and Opera), Gecko (used in Firefox), and WebKit (used in Safari). However, the process and code may vary depending on the engine you choose.
What are the prerequisites for creating a browser with JavaScript using EdgeHTML?
To create a browser with JavaScript using EdgeHTML, you need to have a basic understanding of HTML, CSS, and JavaScript. You also need to have the Microsoft Edge browser installed on your system as it contains the EdgeHTML engine.
How can I handle user input in my custom browser?
Handling user input in your custom browser involves creating event listeners for various user actions like clicking buttons, entering text, etc. You can use JavaScript to create these event listeners and define what action should be taken when these events occur.
How can I add features like back, forward, and refresh to my custom browser?
You can add these features to your custom browser by using the history and location objects in JavaScript. The history object allows you to manipulate the browser session history, enabling you to implement the back and forward features. The location object allows you to reload the current document, enabling you to implement the refresh feature.
Can I customize the look and feel of my custom browser?
Yes, you can customize the look and feel of your custom browser using CSS. You can style the browser window, buttons, address bar, and other elements to match your preferences.
How can I debug my custom browser?
You can debug your custom browser using the developer tools provided by the Edge browser. These tools allow you to inspect elements, view console logs, debug JavaScript, and more.
Can I use third-party libraries or frameworks when creating my custom browser?
Yes, you can use third-party libraries or frameworks when creating your custom browser. However, you need to ensure that they are compatible with the EdgeHTML engine.
Is it possible to create a cross-platform browser with JavaScript and EdgeHTML?
While JavaScript is a cross-platform language, EdgeHTML is a Windows-specific engine. Therefore, a browser created with JavaScript and EdgeHTML will only work on Windows. If you want to create a cross-platform browser, you need to use a cross-platform engine like Blink or WebKit.
Josh RennertJosh Rennert is a Program Manager on the Microsoft Edge team.
