forked from ramsaptami/embeddedApp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (95 loc) · 2.4 KB
/
index.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<html>
<body>
string <button onclick="sendMessage('string data type')">string</button>
<br> numeric <button onclick="sendMessage1(1234567890)">numeric</button>
<br> boolean <button onclick="sendComplexMessage(3)">boolean</button>
<br> array <button onclick="sendComplexMessage(1)">array</button>
<br> object <button onclick="sendComplexMessage(2)">object</button>
<br> nestedArray <button onclick="sendComplexMessage(4)">nestedArray</button>
<iframe id="frameEle" src="https://ee-2453.dp.appsmith.com/app/untitled-application-1/page1-6524ef665d4e293e5ccab1ef" style="height:500px;width:1000px;"></iframe>
<script>
const frameEle = document.getElementById("frameEle");
function sendMessage(string) {
console.log("sending a string from Appsmith on an iFrame")
frameEle.contentWindow.postMessage(string, '*');
}
function sendMessage1(numeric) {
console.log("sending a number from Appsmith on an iFrame")
frameEle.contentWindow.postMessage(numeric, '*');
}
function sendComplexMessage(type) {
let data = "data";
switch (type) {
case 1:
data =
{
"label": "Blue",
"value": "BLUE"
},
{
"label": "Green",
"value": "GREEN"
},
{
"label": "Red",
"value": "RED"
}
;
break;
case 2:
data = {
employeeName: "John Doe",
employeeId: 27,
salary: {
'2018-19': "400000INR",
'2019-20': "500000INR",
'2020-21': "650000INR"
},
address: {
locality: {
address1: "1600 pebble road",
address2: "Nearby XYZ Bank",
},
city: "Mumbai",
state: "Maharashtra",
country: "India"
}
};
break;
case 3:
data = false;
break;
case 4:
data = {
"label": "Blue",
"value": "BLUE",
"children": [
{
"label": "Dark Blue",
"value": "DARK BLUE"
},
{
"label": "Light Blue",
"value": "LIGHT BLUE"
}
]
},
{
"label": "Green",
"value": "GREEN"
},
{
"label": "Red",
"value": "RED"
};
break;
}
sendMessage(data);
}
window.addEventListener('message', function (e) {
// Get the sent data
console.log("sending from switch statement", e);
});
</script>
</<body>
</html>