Control XR content with API
Control XR content from parent page JavaScript
window.postMessage()
You can freely call the Cases that has been set in the Script Board.
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 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>