Control XR content with API

Control XR content from parent page JavaScript

window.postMessage()

You can freely call the Cases[w] that has been set in the Script Board[w].
Just use window.postMessage() in the parent page's JavaScript and send the Case ID to your XR content.

Call a Case

xrsApi[0].postMessage({act: 'case', id: [Any Case ID]}, '*');
// act: 'case' etc. are fixed. Replace only the [arbitrary case ID] part.
// xrsApi[0] <- It means the first XR content.
// When multiple XR contents are placed, the second is [1] and the third is [2].

Below is a code example.
The Example Code just calls Case[w] when the button is pressed, but normally it will be called at any time and with any action. You can express freely according to the JavaScript of the parent page.
A variety of expressions are created by calling Case. See the API Examples .

Example Code

<!DOCTYPE html>
<html>
     <head>
         <title>Example API</title>
         <script src="https://web-xr.studio/jp/api"></script>
     </head>
     <body>
         <div style="width: 300px; height: 300px">
             <div class="xrstudio" data-id="Your xrID"></div>
         </div>
         <button id="button">Button</button>
         <script type="text/javascript">
             window.onload = function() {
                 var button = document.getElementById('button');

                 button.addEventListener('click', () => {
                     // This line give to activate the case at any timing.
                     xrsApi[0].postMessage({act: 'case', id: 1}, '*');
                 });
             };
         </script>
     </body>
</html>