在自定义 Web App 和嵌入式 MATLAB Web App 之间交换数据

<iframe id="mainFrame" name="mainFrame" class="mainContainer"
        src="https://<hostname>:<port>/webapps/home/session.html?app={webAppName}"
        style="height:600px;width:600px" title="webpage"></iframe>

// In this example, we are assuming that data is being sent on clicking a button.
// And data that is returned from a MATLAB app is displayed as a text element.

// Define a function to send data to the iframe
var buttonOne = document.getElementById("buttonOne");
function dataExchangeWithIframe(event) {
    // Access the iframe using its ID
    const frame = document.getElementById('mainFrame');
    
    // Define the data you want to send
    const data = [10];
    
    // Define the origin of the target iframe where the message will be posted (MATLAB Web App Server URL)
    const targetOrigin = "https://<hostname>:<port>";
    
    // Use postMessage method to send the data to the target iframe
    frame.contentWindow.postMessage(data, targetOrigin);
}
buttonOne.addEventListener('click', dataExchangeWithIframe, false);

// Add an event listener to listen for the event from the MATLAB web app
window.addEventListener("message", function (event) {                       
   // CRITICAL: Check origin to verify you are receiving data from a trusted origin. 
   // Validate that the event came from your MATLAB Web App Server and ignore any other requests.
   if (event.origin.startsWith('https://<hostname>:<port>')) {            
        var receivedData = event.data;
        console.log("Data Received from MATLAB app: ", receivedData);
        document.getElementById('dataFromMatlab').textContent = "Data from MATLAB: " + receivedData;
   }
});

console.log("Receive script loaded.");
// Define a setup function that takes an HTML component as an argument
function setup(htmlComponent) {
    // Add an event listener to the window object for "message" events
    window.addEventListener("message", function (event) {
        // CRITICAL: Check origin to verify you are receiving data from a trusted origin. 
        if (event.origin.startsWith('https://<hostname>:<port>')) {
            // Log the event origin to the console
            console.log("Event origin: ", event.origin);
            // Extract the data from the event
            var datatomatlab = event.data;
            
            // Send the received data to the MATLAB app through the "dataToMatlab" event
            htmlComponent.sendEventToMATLAB("dataToMatlab", datatomatlab);
            console.log("Send received data to MATLAB: ", datatomatlab);
        } else {
            // If the origin of the event is not the expected origin, log "Wrong origin." to the console
            console.error("Wrong origin.");
        }
    });
}