Portals in Chrome — Going on a “Test Drive”
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…