Using WebXR in HTML IFrames by Ada Rose Cannon

Using WebXR in HTML IFrames

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

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/](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/](https://ada.is/DSC-WOW-Demo/)">Cactus Demo</a></li>
    <li><a target="iframe" href="[https://ada.is/basketball-demo/](https://ada.is/basketball-demo/)">Basketball Demo</a></li>
    <li><a target="iframe" href="[https://ada.is/xrgarden/](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: WebXR IFrame Demo! fold-me.glitch.me

This is really useful for having a web page with a lot of demos on it. Using links with target="iframe" to switch between them. pic.twitter.com/35pEqzP2Ko
— Ada Rose Cannon (@AdaRoseCannon) January 7, 2021

Try it today in the Samsung Internet Beta on Android!

Hope this helps!

By Ada Rose Cannon on January 7, 2021.

Canonical link