Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use Portals on Chrome Canary

What is Portals?

It's like an iframe, but can be navigated into.

Explainer: https://github.com/WICG/portals/blob/master/explainer.md Editor's spec draft is here: https://wicg.github.io/portals/

How to use Portals

As of today (Mar 24, 2019) you'll need to use Chrome Canary with --enable-features=Portals command line flags.

It can'be created as an embedded HTML element like iframe (e.g. by <portals> or portal = document.createElement(“portal”);), and a user can then be navigated into it (e.g. the element expands to the top frame) when its activate method is called.

Super simple example:

// Create a portal with the wikipedia page, and embed it
// (like an iframe). You can also use <portal> tag instead.
portal = document.createElement('portal');
portal.src = 'https://en.wikipedia.org/wiki/World_Wide_Web';
portal.style = '...';
document.body.appendChild(portal);


// When the user touch the preview (embedded portal):
// do fancy animation, e.g. expand ...
// and finish by doing the actual transition
portal.activate();

For a more elaborated example with an animation, please see Yusuke's blog (Japanese, but scrolling down will let you get an example with an animation showing how it works): https://blog.uskay.io/article/002-hands-on-portals https://blog.uskay.io/img/article/002-004.gif

The same code can be tested here (open it with Chrome Canary with --enable-features=Portals): https://uskay-portals-demo.glitch.me/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.