JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<script src="http://nov-tjones7.corp.epnet.com/LibraryAware/Scripts/colorpicker/colorpicker.js"></script>
<link rel="stylesheet" href="http://nov-tjones7.corp.epnet.com/LibraryAware/Content/css/colorpicker/colorpicker.css">
<iframe id="my-frame" src="about:blank" style="width:300px; height:300px;">

JavaScript

var frame = $("#my-frame");
var frameBody = frame.contents().find('body');
var frameHead = frame.contents().find('head');
frameHead.append('<link rel="Stylesheet" type="text/css" href="http://nov-tjones7.corp.epnet.com/LibraryAware/Content/css/colorpicker/colorpicker.css"/>');
var myScriptTag = $('head').find('script[src^="https://ajax.googleapis.com"]');
var frameWindow = frame[0].contentWindow;
var frameDocument = frameWindow.document;
var frameScriptTag = frameDocument.createElement('script');
frameScriptTag.onload = function(){
    var frame$ = frameWindow.$;
    var colorPicker = frame$('<div id="my-colorpicker"></div>').appendTo(frameDocument.body);
    frame$.getScript('http://nov-tjones7.corp.epnet.com/LibraryAware/Scripts/colorpicker/colorpicker.js',
           function(){
               colorPicker.ColorPicker({flat:true});
           });
}

frameScriptTag.type = "text/javascript"
frameScriptTag.src = myScriptTag.attr('src');
frameDocument.head.insertBefore(frameScriptTag, frameDocument.head.firstChild);