|
9 | 9 | body { |
10 | 10 | background: #ccc; |
11 | 11 | } |
| 12 | + |
| 13 | + #interactive-embed { |
| 14 | + position: relative; |
| 15 | + } |
| 16 | + |
| 17 | + button#update-interactive-embed { |
| 18 | + position: absolute; |
| 19 | + top: 25px; |
| 20 | + right: 25px; |
| 21 | + } |
12 | 22 | </style> |
13 | 23 | <body> |
14 | 24 | <!-- |
15 | | - This is a test file to test the embed mode, |
16 | | - to try this run `npm run start`, and after that run |
17 | | - `npm run start:embed` in a second terminal |
| 25 | +This is a test file to test the embed mode, |
| 26 | +to try this run `npm run start`, and after that run |
| 27 | +`npm run start:embed` in a second terminal |
18 | 28 |
|
19 | | - --> |
| 29 | +--> |
20 | 30 |
|
21 | 31 | <div |
22 | 32 | data-testing-playground |
|
55 | 65 | </script> |
56 | 66 | </template> |
57 | 67 |
|
58 | | - <template data-testing-playground data-class="messaging-iframe"></template> |
59 | | - <script type="text/javascript"> |
60 | | - function updatePlayground() { |
61 | | - const iframe = document.querySelector('.messaging-iframe'); |
62 | | - iframe.contentWindow.postMessage( |
63 | | - { type: 'UPDATE_DATA', markup: 'new markup', query: 'new query' }, |
64 | | - 'http://localhost:1234', |
65 | | - ); |
66 | | - } |
| 68 | + <div id="interactive-embed"> |
| 69 | + <template data-testing-playground data-class="messaging-iframe"></template> |
| 70 | + <button id="update-interactive-embed">update-content</button> |
67 | 71 |
|
68 | | - window.addEventListener('message', ({ data }) => { |
69 | | - if (data.source === 'embedded-testing-playground' && data.type === 'READY') { |
70 | | - updatePlayground(); |
| 72 | + <script type="text/javascript"> |
| 73 | + function updatePlayground() { |
| 74 | + const iframe = document.querySelector('.messaging-iframe'); |
| 75 | + iframe.contentWindow.postMessage( |
| 76 | + { type: 'UPDATE_DATA', markup: `<div>${Date.now()}</div>`, query: `// ${Date.now()}` }, |
| 77 | + 'http://localhost:1234', |
| 78 | + ); |
71 | 79 | } |
72 | | - }); |
73 | | - </script> |
74 | 80 |
|
| 81 | + document.getElementById('update-interactive-embed').addEventListener('click', updatePlayground); |
| 82 | + |
| 83 | + window.addEventListener('message', ({ data }) => { |
| 84 | + if (data.source === 'embedded-testing-playground' && data.type === 'READY') { |
| 85 | + updatePlayground(); |
| 86 | + } |
| 87 | + }); |
| 88 | + </script> |
| 89 | + </div> |
75 | 90 | <script async src="embed.js"></script> |
76 | 91 | </body> |
77 | 92 | </html> |
0 commit comments