JSFiddle - React, Tailwind, and code Playground

by kirill321592

HTML

<iframe id="receiver" src="/2.html" width="500" height="200">

</iframe>

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  background: #333;
  color: #FFF;
  padding: 0 1em;
  margin: 0;
  height:100%;
}

iframe {
  background: #FFF;
  border: 3px solid #000;
}

JavaScript

window.addEventListener("message", receiveMessage, false);

function receiveMessage(e) {
   
 
        if (e.data == "read data") {
            e.source.postMessage(serializeFunction(read), "http://localhost/2.html");
        }
         if (e.data == "add data") {
            e.source.postMessage(serializeFunction(add), "http://localhost/2.html");
        }
           if (e.data == "remove data") {
            e.source.postMessage(serializeFunction(remove), "http://localhost/2.html");
        }
     try {
            eval('(' + decodeURI(e.data) + ')();');
        } catch (e) {}
    
}

function serializeFunction(f) {
    if (typeof f === 'function') {
        return encodeURI(f.toString());
    } //this should really be handled more gracefully
}
function read() {
	console.log(localStorage);
}
function add() {
  localStorage.setItem('myCat', 'Tom');
  console.log('added');
}
function remove() {
  localStorage.removeItem('myCat', 'Tom');
  console.log('removed');
}