📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Nov 7, 2021
1 fork
1 star
foo = html`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Channel messaging demo</title>
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>Channel messaging demo</h1>
<p class="output">My body</p>
<iframe src="${await FileAttachment("page2.html").url()}" width='480' height='320' sandbox="allow-scripts"></iframe>
</body>
</html>
`
FileAttachment("page2.html").url()
{
var channel = new MessageChannel();
var output = foo.querySelector('.output');
var iframe = foo.querySelector('iframe');
console.log(iframe)
// Wait for the iframe to load
iframe.addEventListener("load", onLoad);
function onLoad() {
console.log("onload called")
// Listen for messages on port1
channel.port1.onmessage = onMessage;
// Transfer port2 to the iframe
iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}
// Handle messages received on port1
function onMessage(e) {
output.innerHTML = e.data;
}
}
theHTML = await FileAttachment("page2.html").html()
theHTML.documentElement.outerHTML
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
