Skip to content

Script Examples

Transmit data from Webpage to UI Builder WebPage Component

Download ZIP File

In this example, we can transmit data from the UI Builder WebPage component to the Web Page iframe element as well as transmit data from the Web Page iframe element to the UI Builder WebPage component.

UI Builder Script(WebPage.ezui) 

1
2
3
4
5
6
7
webPageComponent.onMessage = e => {
  receive.value = e.data;
}

sendBtn.onClick = () => {
  webPageComponent.postMessage(message.value);
}

iframe.html 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>

<head>
</head>

<body>
  <p>
    Send to UIBuilder:<br />
    <textarea id="message" rows="5" cols="50">Hello from iframe!</textarea>
    <br />
    <button type="button" onclick="send()">Send</button>
  </p>

  <br />

  <p>
    Received from UIBuilder:<br />
    <textarea id="receive" rows="5" cols="50" readonly>
  </textarea>
  </p>


  <script>
    function send() {
      const message = document.getElementById('message').value;
      window.parent.postMessage(message, '*');
    }

    window.onmessage = function(e) {
      const receive = document.getElementById('receive');
      receive.value = e.data;
    }
  </script>
</body>

</html>