Portals in Chrome — Going on a “Test Drive”

Weiyuan
The Startup
Published in
4 min readJan 24, 2020

--

Spaaaaaaaaace portals — Original Image: pixbay, author: DarkWorkX

Portals in Chrome — what is it, one interesting usage, and further potential?

Once in a while, I would be introduced to some experimental technology, and if intrigued, I would dive into the topic. Today, I would like to share about one such experimental technology on Chrome, that is Portals 👊

What are Portals?

A portal element allows for a portal browsing context to be embedded in an HTML document.

source

Portals are represented as the <portal> HTML element. Similar to the <iframe> element, you can add the src property, and if pointed to a valid URL, you should be able to embed the contents of that URL’s webpage on the current webpage.

However, that’s where the similarity between <portal> and <iframe> ends. When using <iframe>, the context of the embedded content is isolated as a separate frame from the top frame. For example, if an<iframe> element is used as a preview, in order to navigate to the iframe’s source, one such way is to set window.top.location.href (barring any sandbox restrictions in HTML5) from within the iframe.

However, if the <iframe> element has already loaded the intended content, the navigation is essentially the same as redirection, which directs the browser to make the same request…

--

--

The Startup
The Startup

Published in The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +772K followers.

Weiyuan
Weiyuan

Written by Weiyuan

Senior Engineering Manager, Ascenda Loyalty | Former Engineering Manager, Grab | Former Director of Engineering, ZilLearn | bit.ly/weiyuan