JSFiddle - React, Tailwind, and code Playground

by joshuatz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
  <div class="card-panel hoverable">
    <div class="row">
      <div class="col s12 cardTitle">I'm In an Iframe!</div>
    </div>
    <!-- Details -->
    <div class="details">
      <div class="row">
        <div class="col s5 key">window.location.href</div>
        <div class="col s7 val">{{href}}</div>
      </div>
      <div class="row">
        <div class="col s5 key">dummy.js found?</div>
        <div class="col s7 val">{{dummyJsFound}}</div>
      </div>
      <div class="row">
        <div class="col s5 key">embed.js found?</div>
        <div class="col s7 val">{{embedJsFound}}</div>
      </div>
      <div class="row">
        <div class="col s5 key">typeof(EmbedCreatorManager)</div>
        <div class="col s7 val">{{EmbedCreatorManager}}</div>
      </div>
    </div>
  </div>
</div>

CSS

header {
  display: none !important;
}
.cardTitle {
  text-align: center;
  font-size: 2rem;
}
.container > .card-panel {
  margin-top: 20px;
}

JavaScript

var detailsMap = {
  "href" : window.location.href,
  "EmbedCreatorManager" : typeof(EmbedCreatorManager),
  "embedJsFound" : document.querySelectorAll("script[src*='embed.js']").length > 0 ? "true" : "false",
  "dummyJsFound" : document.querySelectorAll("script[src*='dummy.js']").length > 0 ? "true" : "false"
}
function detailsReplacer(){
	var valDivs = document.querySelectorAll(".details .row .val");
  for (var key in detailsMap){
  	var macro = "{{" + key + "}}";
    console.log(macro);
    console.log(valDivs);
    for (var x=0; x<valDivs.length; x++){
    	if (valDivs[x].innerText === macro){
      	valDivs[x].innerText = detailsMap[key];
      }
    }
  }
  if (document.location.host!=="fiddle.jshell.net"){
  	document.querySelector(".cardTitle").innerText = "I'm NOT In an Iframe!";
  }
}
window.setTimeout(function(){
	detailsReplacer();
},100);