/
embedded.html
27 lines (24 loc) · 1.24 KB
/
embedded.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
<html>
<body>
<a href="https://www.treedoc.org?embeddedId=tdv_2" target="_blank">Open in a new windows</a> |
<a href="https://www.treedoc.org?dataUrl=https://raw.githubusercontent.com/eBay/jsonex/master/pom.xml" target="_blank">Open in a new windows with dataUrl</a> |
<a href="https://www.treedoc.org?data={number:1, string:str}" target="_blank">Open in a new windows with Data on URL (avoid pass confidential data)</a>
<iframe id='tdvFrame' src="https://www.treedoc.org?embeddedId=tdv_1&title=Treedoc Embedded" width="100%" height="100%"></iframe>
</body>
<script>
const frame = document.getElementById('tdvFrame').contentWindow;
function setJttData(target, data) {
target.postMessage({type:'tdv-setData', data}, '*');
}
// Set data after a delay
setTimeout(() => setJttData(frame, {message:"after timeout"}), 3000);
// Or set data after get ready signal
window.addEventListener('message', (evt) => {
if (evt.data.type !== 'tdv-ready')
return;
console.log(evt);
// setJttData(frame, {message:"after ready"}); // Both ways work
setJttData(evt.source, {message:`after ready by source: embeddedId: ${evt.data.id}`}); // Both ways work
})
</script>
</html>