JSFiddle - React, Tailwind, and code Playground

by henkdedikzak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<iframe id="testFrame"></iframe>

JavaScript

// First: Set HTML of an iframe
examplePage = '<!DOCTYPE html><html><head></head><body><h1 id="test-id">test content</h1></body></html>'

let testFrame = $('#testFrame').get(0).contentDocument;
testFrame.body.innerHTML = examplePage;

// Trying to add Jquery
$head = $(testFrame).find('head');

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
testFrame.getElementsByTagName('head')[0].appendChild(script);

// Trying to use jquery in iframe
customScript = '<scr'+'ipt>$("#test-id").click(function(){console.log("Is this working?!")});</scr'+'ipt>';
$head.append(customScript);