How to add multiple embedded tours on a single web page
Metareal Stage allows you to create embed codes for your published tours.
Those embed codes can be added to a single web page (e.g. a gallery) so that the tour player will play in an iframe within the page (without opening a new one).
However, there is a caveat.
WebGL only supports a limited number of contexts. What this means is that you cannot have more than a certain number of simultaneous 3D views in a single page, and that number is hardware specific.
In order to prevent loss of display, we recommend that you only have one iframe active at the same time. In order to do so, you can add some code in your web page to detect that the current iframe has changed and reset the old iframe to the splash screen. This will ensure that you never run out of WebGL contexts.
Here is an example (using JQuery), that illustrates how to do this:
Those embed codes can be added to a single web page (e.g. a gallery) so that the tour player will play in an iframe within the page (without opening a new one).
However, there is a caveat.
WebGL only supports a limited number of contexts. What this means is that you cannot have more than a certain number of simultaneous 3D views in a single page, and that number is hardware specific.
In order to prevent loss of display, we recommend that you only have one iframe active at the same time. In order to do so, you can add some code in your web page to detect that the current iframe has changed and reset the old iframe to the splash screen. This will ensure that you never run out of WebGL contexts.
Here is an example (using JQuery), that illustrates how to do this:
<!DOCTYPE html>
<html>
<body>
<script src="/apps/player/node_modules/jquery/dist/jquery.min.js"></script>
<iframe id="f1" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>
<iframe id="f2" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>
<iframe id="f3" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>
<iframe id="f4" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>
<iframe id="f5" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>
<iframe id="f6" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>
<iframe id="f7" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>
<script>
let currentIFrame;
function checkFocus() {
let iFrames = [
"#f1", "#f2", "#f3", "#f4", "#f5", "#f6", "#f7"
];
for ( let iFrame of iFrames ) {
if ( document.activeElement == $( iFrame ).get( 0 ) ) {
if ( currentIFrame && currentIFrame != iFrame && iFrames.includes( currentIFrame ) ) {
$( currentIFrame ).get( 0 ).contentDocument.location.reload( true );
}
// unload previous iFrame
currentIFrame = iFrame;
}
}
}
window.setInterval(checkFocus, 1000);
</script>
</body>
</html>Updated on: 23/09/2024
Thank you!