Public
Edited
Jun 11, 2023
1 star
Also listed in…
Godot
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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>
<h3>Channel messaging demo Observable <-> Godot in Iframe</h3>
<p> Message back from Godot: <span class="output"> wait for godot to finish loading...</span></p>
<button id="postIt"> Click to post message </button>
<br/>
<iframe src="https://triptych.neocities.org/godot_iframe_test001/index.html" width='${width}' height='520' sandbox="allow-scripts allow-modals allow-popups"></iframe>
</body>

</html>

`
Insert cell
{
foo.querySelector("#postIt").addEventListener("click", (e)=>{
console.log("clicked post message")
onLoad(e)
})
}
Insert cell
function onMessage(e) {
var output = foo.querySelector('.output');
output.innerHTML = e.data;
}
Insert cell
channel = new MessageChannel();
Insert cell
function onLoad() {
var iframe = foo.querySelector('iframe');
console.log(iframe)
console.log("onload called")
// Listen for messages on port1
channel.port1.onmessage = onMessage;
// Transfer port2 to the iframe
iframe.contentWindow.postMessage("Hello from Observable!", '*', [channel.port2]);
}
Insert cell
Insert cell
embed(embedcode)
Insert cell
embedcode=`<script src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2Ftriptych%2FGodotTestingJavaScriptObject%2Fblob%2FRelease_0.01%2FNode2D.gd&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>`
Insert cell
Insert cell
import { embed } from "@jerryjappinen/embed"

Insert cell

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.
Learn more