What is Portal use and difference from Iframe

We’ve written a comprehensive guide to Google Portals – an ambitious new concept for mobile web design. A new page transition experience for Chrome, this seems to be Google’s attempt at rethinking navigation. The goal is to help developers create web experiences with links that feel as seamless and fluid as a native app. In the world of cross-domain experiences, this is exciting news!

What are Portals and how do they work?

In May 2019, Google announced a new upgrade to iFrame technology – Portals are a new web platform API that aim to provide a new way of loading and navigating through web pages. Similar to classic < iframe> tags, portals will work with a new HTML tag < portal >, allowing web developers to embed remote content in their pages.
“Portals are like iFrames that you can navigate to,” explained Barb Palsar, who leads Google’s global product partnerships. “When a user opens a Portal, the Portal becomes the top-level page. Portal enables fluid, composed journeys within a site or across multiple sites.”
Portals are only supported in the latest version of Chrome Canary for Android, Mac, Windows, Linux, and Chrome OS.

Benefits of Portals

• Seamless Transitions
• Faster Page Loading Time
• Increased Security and Privacy

Concerns Surrounding Portals:

• Data Usage
• Backward transition to the parent page

Why Did IFrames Need an Upgrade?

Issues that are commonly seen with IFrames include:

• Your site becomes vulnerable to malicious sites and cross-site attacks
• They can lead to phishing your user’s data
• They can be confusing and causes usability issues
• They are bad for SEO
• They are slow to load, resulting in terrible user experience
• Cookie support is limited

Why are portals better than using iframe or classic links?

• Portals allow users to navigate inside the content they are embedding – something that iframes do not allow for security reasons.
• Portals can also overwrite the main URL address bar, meaning they are useful as a navigation system, and more than embedding content – the most common way in which iframes are used today.
• Portals have the potential to provide protection against potential phishing attacks by changing the URL bar without forcing the user to break into an entirely new popup window or tab.
• The content inside portals can be pre-loaded while the user scrolls through a page, and be ready to expand into a new page without having the user wait for it to load.
• Portals support speedier and better transitions between web pages and could be used to improve web page navigation on mobile devices, where touch gestures make using portals a seamless experience.
• Portals allow a user to watch/listen to embedded content and then transition seamlessly to its origin page, where they could leave comments or open other media.
• If you have multiple websites that cross-reference one another, you can also use Portals to create seamless navigations between two different websites.

How to use Google Portals with Your Website or Blog?

Portals are slated to be the standard way in which websites transition between links. For e.g., when a user is navigating a news site and they reach the bottom of a story, related links for other stories are embedded as portals, which the user can click and seamlessly transition to a new page.
See Portals in Action:

Portals in HTML

If you’re not using it yet, start using Chrome Canary – an experimental version of the Chrome browser aimed at developers, experienced techies, and browser enthusiasts. Try out Portals in Chrome Canary by flipping an experimental flag: chrome://flags/#enable-portals. Once Portals are enabled, confirm in DevTools that you have the new shiny HTMLPortalElement.
A simple example is showcased on web.dev. If you want to quickly experience what Portals feel like, try using uskay-portals-demo.glitch.me.on Chrome Canary.
There are 3 features you must be familiar with:

• The <portal> element: The HTML element itself. The API is very simple. It consists of the src attribute, the activate function and an interface for messaging (postMessage). activate takes an optional argument to pass data to the upon activation.
• The portalHost interface: Adds a portalHost object to the window object. This lets you check if the page is embedded as a element. It also provides an interface for messaging (postMessage) back to the host.
• The PortalActivateEvent interface: An event that fires when the is activated. There is a neat function called adoptPredecessor which you can use to retrieve the previous page as a element. This allows you to create seamless navigations and composed experiences between two pages.

The demo below demonstrates how Portals can enable a seamless user experience between a website and third party embed content

How to embed Google Portals in WordPress

Since Google Portals are only available on Chrome Canary right now, we will talk through how to embed iFrame in WordPress. Embedding portals in WordPress is expected to be similar once the feature is rolled out in its entirety.
Embedding WordPress iFrame is easier than you imagine. The traditional way to do it is by using the HTML attributes <IFrame>.To do this, simply take the URL of the page you want to embed, and use it as the source for the Tag. Then, your code becomes:
<iframe src=”your_webpage_url” iframe>
You can add more parameters to your tag:

• Width/Height– For height and Width of the iFrame window, define values in Px
• Frameborder – For displaying or hiding the Frameborder, use values ‘0’ or ‘1.’
• Align – For defining the window’s page alignment, Use values “left” “right” “right” “top” “bottom.”
• Scrolling – For disabling or enabling Scrolling inside the Window. Use values “yes,” “no”

Then simply paste your code into the text editor of your post on WordPress, and that should display your post easily.
Following this process, you should be able to easily embed any page on your posts. Furthermore, content websites such as Youtube have an in-built embedding feature for you to share the content. Simply click on Share and Embed and copy the given URL.
You can also use plugins such as Advanced iFrame plugin by Michael Dempfle to embed cross-domain content.

How can you style Google Portals? How can you center Google Portals?

Once again, we’ll take the example of IFrames since Google Portals will tend to work similarly. When you embed an element in your HTML, you have two opportunities to add CSS styles to it:
You can style the IFRAME itself or you can style the page inside the IFRAME. Here are some CSS styles we should include on iframes:

• margin
• padding
• border
• Width
• height

For your styles, you can try adding scrolling borders, rotation, shadows, corners – just like any other web page.
To center align an ‘IFrame’ or any other HTML element you can use CSS ‘margin’ property. To achieve this you should have to define the width of the element. You can set ‘margin-left: auto;’ and ‘margin-right: auto;’ to center align our iframe block.

New HTML Attributes of IFrame

HTML5 brought three new elements to the IFrame element to address certain security and design issues.

• Sandbox Element: The “sandbox” attribute of the “IFrame” element is a very useful security feature of iframes. When you place it in an IFrame element, you are instructing the user agent to disallow features that might cause a security risk to the site and its users. You can also use it to re-enable some features.
• srcdoc Attribute: The “srcdoc” attribute is an attribute that gives the web designer more control over the iframes as well as more security. Instead of linking to a Web page at a different URL, the web designer places the HTML that is to display in an IFeame inside the “srcdoc” attribute.
• Seamless attribute: The “seamless” attribute is a boolean attribute that tells the browser to display the IFrameas though it were a part of the parent document. If you want your IFrame to display seamlessly, just include this attribute in the element.

Alternatives to IFrames

One of the important things to note here is that IFrames can hold back your SEO efforts. This is because anything within a <iframe> cannot be indexed and Google credits the page where the embed code was grabbed and not the page where it is embedded.
To improve your content optimisation, try the following alternatives to IFrames for common used cases:

• Instead of Google Maps embed, try Google Maps API that generates a JavaScript code.
• When it comes to Youtube videos, use the old embed code. You can also use a tool like Wistia.
• Make sure to add closed captions or subtitles on videos by using a .srt file
• Encourage reviews and ratings on site instead of embedding a widget from a third-party site
• Use AJAX to update a container on your web page.
• Use elements like <object> and <embed>
• Use tools like Zoid

Conclusion

While it is early days for Google Portals, it has potential. It could become the standard technology for embedding content, replacing IFrames. Portals allow a user to watch/listen to embedded content and then transition seamlessly to its origin page, where they could leave comments or open other media.
Google has announced that it has now launched the Portals API as an experimental feature behind a flag in Chrome Canary and is looking for developer community feedback.
Have you tried using them yet? Comment below and let us know your experience!