JSFiddle - React, Tailwind, and code Playground

by s_light

HTML

<!DOCTYPE html>
<html>
<head>
   <meta name="description" content="test postMessage iframe interactions with greasmonkey">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>main - iframe greasmonkey tests</title>
</head>
<body>
    <h2>main - iframe greasmonkey tests</h2>
    <button onclick="ping();">
        send ping to iframe
    </button>

    <div class="placeholder">
        .
    </div>
    <div>
        <h2>
            Log entries:
        </h2>
        <ul id="log">
        </ul>
    </div>
</body>
</html>

CSS

body {
    background-color:black;
    color:orange;
}

.placeholder {
    height: 30vh;
    width: 100%;
    border: solid 1px lime;
}


#request_frame {
	width: 99%;
	min-height: 97%;
}

JavaScript

function ping() {
    window.top.postMessage('PING');
    add_log('send ping to top level window...');
}


window.addEventListener ("message", (event) => {
    console.log('main', event);
});
















function add_log(message) {
	const log = document.querySelector('#log');
    const el = document.createElement('li');
    const now = new Date();
    el.innerText = `${now.toISOString()} - ${message}`;
    log.append(el);
    console.log(message);
}