0

I am loading custom html and javascript into an iframe on a website. Up to html, css and javascript everything works fine. However, loading a framework into the iframe does not work.

So I am wondering if there is a way to use frameworks inside an iframe with custom set html/javascript.

Here is a simplified version of the problem. Trying to use jquery after adding it to the head gives an error: 

// 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');
$head.append('<scr'+'ipt src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></scr'+'ipt>');

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

Here is a link to the jsfiddle: https://jsfiddle.net/henkdedikzak/x3qn4ybL/

julian
  • 13
  • 6
  • You can inject a jQuery reference in to a local iframe like this: https://stackoverflow.com/a/1140438/519413. You just need to change `document.getElementsByTagName('head')[0]` in the example to `testFrame` – Rory McCrossan Jan 17 '20 at 11:30
  • Thank you for your responce! I had not found that post. However, I do not seem to get this to work. When replacing document... with testFrame, I get the following error:(index):48 Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed. – julian Jan 17 '20 at 11:45
  • Also this does not work: testFrame.getElementsByTagName('head')[0].appendChild(script); However, it gives me the first error again, '$ is undefined'. – julian Jan 17 '20 at 11:46
  • Sorry, my bad. I meant just replace `document` with `testFrame`: https://jsfiddle.net/RoryMcCrossan/2d0k9yqm/ – Rory McCrossan Jan 17 '20 at 11:48
  • Yes, I tried that, but it gives me the first error again. The code does add the jquery script tag to the head of the iframe. However, it still gives the error '$ is undefined' when I try to execute the code from the second script.https://jsfiddle.net/henkdedikzak/x3qn4ybL/ – julian Jan 17 '20 at 11:50
  • Which browser are you using? It works fine here in Chrome: https://jsfiddle.net/RoryMcCrossan/4vyo5kx1/ – Rory McCrossan Jan 17 '20 at 11:51
  • Very interesting, your js fiddle is working on my browser, so I must be doing something wrong somewhere else. I am using google chrome. – julian Jan 17 '20 at 11:56
  • Note the timeout in my version; you need it to give the browser time to load jquery.js before executing your own script – Rory McCrossan Jan 17 '20 at 11:57
  • 1
    Yes! That was it! Thank you so much! – julian Jan 17 '20 at 12:00
  • Small comment: The initial implementation of the code also works with the timeout. However, I see that the other version is a lot cleaner. – julian Jan 17 '20 at 12:05

0 Answers0