Bootstrap iframe

by sperske

HTML

<h1>
Outside of Safe Space
</h1>

CSS

h1 {
  color: red;
}
iframe {
  border: 1px dotted grey;;
  width: 100%;
}

JavaScript

var iframe = document.createElement('iframe');
iframe.src = 'https://sndtst.com/static/bootstrap.html';
var actionButton = {action: 'say', value: 'From inside the house'};

var messageBody = '<div id="Message">'+
									'<h1>Inside of Safe Space<\/h1>'+
								  '<button id="Button">Talk Outside<\/button>'+
                  ' <a href="https://google.com">Link Outside<\/a>'+
                  '<\/div>';

messageBody += '<style>';
messageBody += 'body { margin: 0; }';
messageBody += '<\/style>';

messageBody += '<script>';
messageBody += 'var actionResize = {action: "resize", value: document.getElementById("Message").offsetHeight};';
messageBody += 'window.parent.postMessage(JSON.stringify(actionResize), \'*\');';
messageBody += 'document.getElementById("Button").onclick = function() {';
messageBody +=   'window.parent.postMessage(\''+JSON.stringify(actionButton)+'\', \'*\');';
messageBody += '};';
messageBody += 'function handleLinkClick() {';
messageBody +=   'window.parent.postMessage(JSON.stringify({action: "link", value: this.href}), \'*\');';
messageBody +=   'return false;';
messageBody += '}';
messageBody += 'var links = document.getElementsByTagName("A");';
messageBody += 'for (var i = 0; i < links.length; i++) {';
messageBody +=   'links[i].onclick = handleLinkClick;';
messageBody += '}';
messageBody += '<\/script>';

iframe.onload = function() {
	iframe.contentWindow.postMessage(messageBody, 'https://sndtst.com');
  iframe.onload = null;
}

window.addEventListener("message", function (event) {
  let message = JSON.parse(event.data);
  console.log(message);
  if (message.action == 'say') {
  	alert(message.value);
  } else if (message.action == 'resize') {
  	iframe.height = message.value;
  } else if (message.action == 'link') {
  	let newWin = window.open("");
    newWin.location = message.value;
  }
}, false);

document.body.appendChild(iframe);