<!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="">
</head>
<body>
<h1>Channel messaging API demo</h1>
<h3>RJM Programming - July, 2022</h3>
<h4>Thanks to <a target=_blank title='https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic' href='//github.com/mdn/dom-examples/tree/master/channel-messaging-basic'>https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic</a></h4>
<input id=myblurb style='width:80%;' type=text placeholder='Hello from the main page!' value='' onblur="if (this.value != '') { location.href=document.URL.split('#')[0].split('?')[0] + '?blurb=' + encodeURIComponent(this.value); }"></input>
<button id=mynot onclick=ifsrcit();>Notify</button>
<p class="output">My body</p>
<iframe src="page2.html" width='480' height='320' id=ifpm contenteditable=true></iframe>
</body>
<script>
// Thanks to https://mdn.github.io/dom-examples/channel-messaging-basic/
document.getElementById('myblurb').value=location.search.split('blurb=')[1] ? decodeURIComponent(location.search.split('blurb=')[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : "";
var channel = new MessageChannel();
var output = document.querySelector('.output');
var iframe = document.querySelector('iframe');
var wourl='./notifications_ideas.html?hi=A+notification&repeats=1&subject=&body=HEY%21+Your+task+Notification+API+Usage+-+RJM+Programming+-+July%2C+2022+...+thanks+to+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FNotifications_API%2FUsing_the_Notifications_API+is+now+overdue.&songtext=&rerun=Rerun';
var origurl=wourl;

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function precheckit() {
checkit(document.getElementById('ifpm'));
}

function checkit(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
//alert(11);
if (aconto != null) {
//alert(111);
if (aconto.document) { aconto = aconto.document; }
//alert(1111);
if (aconto.body != null) {
//alert(2);
if (aconto.body.innerHTML.indexOf('>') != -1) {
changewo(aconto.body.innerHTML.split('>')[1].split('<')[0]);
}
}
}
}
}

function ifsrcit() {
window.open(wourl, '_blank','top=250,left=500,width=500,height=200');
}

function changewo(towhat) {
wourl=origurl.replace('hi=A+notification&', '&hi=' + encodeURIComponent(towhat) + '&');
}

function onLoad() {
// Listen for messages on port1
//alert(1);
channel.port1.onmessage = onMessage;
// Transfer port2 to the iframe
//alert(11);
//changewo('Hello from the main page!'); //wourl=origurl.replace('hi=A+notification&', '&hi=' + encodeURIComponent('Hello from the main page!') + '&');
if (document.getElementById('myblurb').value != '') {
iframe.contentWindow.postMessage(document.getElementById('myblurb').value, '*', [channel.port2]);
} else if (document.getElementById('myblurb').placeholder != '') {
iframe.contentWindow.postMessage(document.getElementById('myblurb').placeholder, '*', [channel.port2]);
} else {
iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
//alert(111);
}

if (1 == 1) { setTimeout(precheckit, 2000); } else { checkit(this); }

}

// Handle messages received on port1
function onMessage(e) {
//alert('' + e.data);
output.innerHTML = e.data;
//alert(2222);
}

if (document.addEventListener){
document.getElementById('ifpm').contentWindow.document.addEventListener('keyup', function(event){ console.log(56); }, false);
// window.frames[0].document.addEventListener('keyup', yourFunction, false);
} else {
//for IE8
document.getElementById('ifpm').contentWindow.document.attachEvent('onkeyup', function(event){ console.log(256); });
}

</script>
</html>