All geek questions in one place

How to insert a dynamic JavaScript tag in an iframe

FINAL UPDATE: The second block of code works - I just skipped the url.

I am trying to place a dynamically created script in an iframe. I can access the iframe header, but it does not seem to accept the append request. A console log call returns a title tag, and adding text to the body works fine. I also tried adding a script tag to the body. (note: the script tag is not in the same domain, so I avoided using getScript or ajax).

$(document).ready(function() { $('<iframe></iframe>', { name:"contentFrame" ,id:"contentFrame" }).css("height", 300).css("width", 500).load(function() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "//cross-domain.com/script.js"; console.log($(this).contents().find("head")); // outputs: [<head></head>] $(this).contents().find("head").append(script); // doesn't work $(this).contents().find("body").append(script); // doesn't work $(this).contents().find("body").append("Test"); // works }).appendTo("#content"); });

Here is a new version that successfully adds a script based on the sentence below, but the script does not evaluate (as verified by a simple warning). In addition, another oddity: the "working" icon is displayed for about 15 seconds, and the status (in chrome) says "receiving ..." In the end, he stops, but nothing happens.

  $(document).ready(function() { $('<iframe></iframe>', { name:"contentFrame" ,id:"contentFrame" }).css("height", 300).css("width", 500).load(function() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "//cross-domain.com/script.js"; console.log($(this).contents().find("head")); $(this).contents().find("head")[0].appendChild(script); $(this).contents().find("body").append("Test"); }).appendTo("#content"); });

Update: when the cursor icon finally finishes working (about 10 seconds, which is odd because it is a local server with one line of code), I get this message in the Chrome console (it is red with a red circle) X "next to it) :

 GET http://cross-domain.com/script.js (anonymous function)temp.html:16 jQuery.event.dispatchjquery-1.7.1.js:3261 jQuery.event.add.elemData.handle.eventHandlejquery-1.7.1.js:2880 jQuery.fn.extend.appendjquery-1.7.1.js:5771 jQuery.fn.extend.domManipjquery-1.7.1.js:5973 jQuery.fn.extend.appendjquery-1.7.1.js:5769 jQuery.each.jQuery.fn.(anonymous function)jquery-1.7.1.js:6162 (anonymous function)temp.html:18 jQuery.Callbacks.firejquery-1.7.1.js:1049 jQuery.Callbacks.self.fireWithjquery-1.7.1.js:1167 jQuery.extend.readyjquery-1.7.1.js:435 DOMContentLoaded
+4
source share
2 answers

See this answer fooobar.com/questions/26123 / ...

In fact, it may work, but the script tag simply does not appear.

+2
source

Try it.

 $(document).ready(function() { $('<iframe></iframe>', { name:"contentFrame" ,id:"contentFrame" }).css("height", 300).css("width", 500).load(function() { $(this).contents().find("head").append('<scr' + 'ipt type="text/javascript" src="//cross-domain.com/script.js"></scr' + 'ipt>'); }).appendTo("#content"); });
0
source

Source: https://habr.com/ru/post/1394646/

More articles:


All Articles