Photo by pine watt on Unsplash

Using WebXR in HTML IFrames

It’s really useful but there are a few pitfalls to avoid.

Ada Rose Cannon
2 min readJan 7, 2021

--

IFrames are really useful for WebXR. Often WebXR web pages are large with a lot of code and many 3D frameworks default to taking up all the available space on the page. IFrames solve these issues by letting you put all the XR code into another webpage, which can even be on a different domain, they also let you choose exactly how much space they take up on the page and can be used with Flexbox and CSS Grid.

There are some very important things to be aware of before you can get it working though:

  • iFrame source needs to use secure context (https://)
  • The parent page also needs to use secure context
  • The iframe needs to have allow=”xr-spatial-tracking” as a property

Example code:

<iframe src="https://ada.is/DSC-WOW-Demo/" name="iframe" frameborder="0" allow="xr-spatial-tracking" allowfullscreen=""></iframe><ul>
<li><a target="iframe" href="https://ada.is/DSC-WOW-Demo/">Cactus Demo</a></li>
<li><a target="iframe" href="https://ada.is/basketball-demo/">Basketball Demo</a></li>
<li><a target="iframe" href="https://ada.is/xrgarden/">Fish Demo</a></li>
</ul>

This simple demo has an iFrame with 3 links which change the URL of the iFrame. Each link works with WebXR provided the page is hosted on https:

Try it today in the Samsung Internet Beta on Android!

Hope this helps!

--

--

Samsung Internet Developers
Samsung Internet Developers

Published in Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://hub.samsunginter.net/about-blog

Ada Rose Cannon
Ada Rose Cannon

Written by Ada Rose Cannon

Co-chair of the W3C Immersive Web Working Group, Developer Advocate for Samsung.

No responses yet