How to add JavaScript code into existing iFrame using jQuery?

Question

I want to add a JavaScript snippet into an existing iFrame in the page using jQuery. I have the following code...

Code:

content = "<script>" + js_code + "</script>";

$('#iframe_id').contents().find('body').append(content);

But somehow this is not working. I checked some of the existing/related answers, and it seems jQuery does not quite recognize the script tags as...script tags. The iFrame is in the same domain/same port/same host, so there is no issue about cross-site scripting etc. How can I fix this?

Yes...the content iFrame belongs to me, basically the same domain — Gandalf
– Gandalf, Commented Aug 22, 2013 at 0:01
@Gandalf Is the snippet embedded within markup (<script>...</script>) or in an separate .js file? — Jonathan Lonowski
– Jonathan Lonowski, Commented Aug 22, 2013 at 0:36
interesting.. what about to try this: frames[0].window.$ = frames[0].window.jQuery = window.$; — Ivan Chernykh
– Ivan Chernykh, Commented Sep 1, 2013 at 4:18

Hugolpz · Accepted Answer · 2020-08-10 12:04:16Z

31

The problem is that the HTML parser gets confused if your script contains the closing script tag in it (</script>) and it closes the script tag prematurely.

The solution is to escape the / in "<\/script>". This works because strings in JavaScript, (and some other languages), any invalid escape sequences are just ignored, so "\l" is treated as "l", and "\/" is treated as "/". The HTML parser, however, doesn't use a backslash to escape them so it doesn't get confused (credits to https://stackoverflow.com/users/405681/keaukraine).

var scriptTag = "<script>alert(1)<\/script>";
$("#iframe").contents().find("body").append(scriptTag);

Original solution

Break up that closing tag so you don't mess up the HTML parser. The other solutions on this page work because they never have the string </script> in their code (jsfiddle):

var scriptTag = "<script>alert(1)<";
scriptTag +=  "/script>";
console.log(scriptTag);
$("#iframe").contents().find("body").append(scriptTag);

Or (jsfiddle):

var scriptTag = "<script>alert(1)<"+"/script>";
$("#iframe").contents().find("body").append(scriptTag);

edited Aug 10, 2020 at 12:04

Hugolpz

18.4k29 gold badges106 silver badges193 bronze badges

answered Aug 22, 2013 at 0:33

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

keaukraine Over a year ago

Just escape slash: var scriptTag = "<script>alert(1)<\/script>"; - jsfiddle.net/tLHn5

Ruan Mendes Over a year ago

@keaukraine That's an awesome technique, never seen it before since there's no need to escape forward slashes. I'm wondering if that behavior is specified though.

Edward Over a year ago

escaping the slash worked perfectly. I put my script tags straight into the src with no issues

Dan B · Accepted Answer · 2014-05-14 20:54:11Z

8

function putScriptInIframes(script, scriptId) {

   var $iframes = $('iframe');
   $iframes.each(function () {
        var thisDoc = this.contentWindow.document;
        if ( ! thisDoc.getElementById(scriptID)) {
            var scriptObj = thisDoc.createElement("script");
            scriptObj.type = "text/javascript";
            scriptObj.id = scriptId;
            scriptObj.innerHTML = script;
            thisDoc.body.appendChild(scriptObj);
        }
    });
}

This was the simplest way I could make it work.

answered May 14, 2014 at 20:54

Dan B

811 silver badge1 bronze badge

Comments

Neil S · Accepted Answer · 2013-08-22 00:17:32Z

5

var script = "alert('hello world');";
$('#iframe').contents().find('body').append($('<script>').html(script))

works in Fiddle

answered Aug 22, 2013 at 0:17

Neil S

2,30421 silver badges28 bronze badges

9 Comments

Ruan Mendes Over a year ago

Care to explain what the difference is? I see it works, but don't understand why

Neil S Over a year ago

I believe the difference is the same as the difference between the text() method and the html() method in jQuery. if you are appending a string, it might not be evaluated as html

Neil S Over a year ago

then it must have to do with the script tags specifically.

Jonathan Lonowski Over a year ago

@JuanMendes It's not entirely clear why the original didn't work, but guessing the snippet is in a <script> element, where mentioning </script> would close the element rather than keep as a String value. This avoids mentioning it.

Ruan Mendes Over a year ago

@JonathanLonowski That's correct, I added an answer explaining it as you typed this comment.

|

Werner · Accepted Answer · 2013-08-22 00:44:54Z

4

You need to escape the /script. It apears.

Do like google analitcs for instance

 $("#iframe").contents().find("body").append(decodeURI("**%3Cscript%3E** alert(2)  **%3C/script%3E**"));

replace the script and /script with this escaped ones

Hope it helps.

edited Aug 22, 2013 at 0:44

Werner

2,5551 gold badge27 silver badges39 bronze badges

answered Aug 22, 2013 at 0:23

Bruno Braga

1201 silver badge8 bronze badges

3 Comments

Ruan Mendes Over a year ago

This works, but it still doesn't make sense in my mind, please add an explanation

Bruno Braga Over a year ago

well.. i suppose that jQuery is doing some kind of validation with scripts.

Ruan Mendes Over a year ago

It's not jquery, I found the problem, posting an answer

ced-b · Accepted Answer · 2013-09-01 14:09:14Z

2

As the iframe runs as it's own window, you will have to also inject the import of the jquery.js file.

<script type="text/javascript" src="/jquery/jquery-ui-1.9.1.custom.js"></script>

EDIT: So I played with this a bit more and here is what I came up with.

HTML

<iframe id="frame"></iframe>

JS

$("#frame").attr(
   "src", "data:text/html;charset=utf-8," + 
   "<html>" + 
   "<style>.red {color: red}</style>" + 
   "<div class=\"test\">Test</test>" + 
   "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"><" + "/script>" +    
   "<script>$(function(){ $(\".test\").addClass(\"red\")});<" + "/script>" +         
   "</html>"
);

This works, see here http://jsfiddle.net/WsCxj/.

So there are several points:

I am passing the entire content as one string. You have to prepend data:text/html;charset=utf-8, and then you can set your string as src of the iframe.
I am adding the jquery.js file with an absolute path - This seems to be important, presumably because the frame has no path by itself as it's content is dynamically generated.
I split the script end tag like this <" + "/script> because at least firefox tries to end the actual script at this point. The cleaner approach would probably be to have the js as totally separate file.

edited Sep 1, 2013 at 14:09

answered Sep 1, 2013 at 4:15

ced-b

4,0371 gold badge31 silver badges40 bronze badges

5 Comments

ced-b Over a year ago

Hmm... Did you try building the entire content as one string and then setting it as the src attribute of the iframe?

Gandalf Over a year ago

l="<script"+" src"+"=\"code.jquery.com/jquery-1.9.1.js\">"+"<"+"/"+"script>"; $('#iframe_id').contents().find('body').append(l);

ced-b Over a year ago

@Gandalf see edits, that works. You can probably take this and make it also work using your jQuery approach, but usually string building HTML is anyways faster that doing it in jQuery.

Gandalf Over a year ago

In IE9, the iframe says "The webpage cannot be displayed" error. Any reason?

ced-b Over a year ago

IE might need a little special treatment, check this thread: stackoverflow.com/questions/16504816/…

Luan Castro · Accepted Answer · 2013-08-22 00:36:16Z

1

You don't need add a tag script to execute javascript, you can do a function and apply iframe context...

using eval

function initFrame (code){

    eval (code);

}

initFrame.apply ($('#iframe').contents(),[js_code]);

Without eval

var initFrame = new Function(js_code);


initFrame.apply ($('#iframe').contents(),[]);

answered Aug 22, 2013 at 0:36

Luan Castro

1,1847 silver badges14 bronze badges

4 Comments

Ruan Mendes Over a year ago

Using new Function is essentially the same as an eval. Running functions in the context of another frame can be problematic and hard to debug since the global object is different in both contexts...

Luan Castro Over a year ago

eval can't receive a return statment, and function cannot resolve a value like (5), eval and new Function are different.

Ruan Mendes Over a year ago

Yes they are slightly different, but in your case it doesn't matter at all. new Function still does an eval under the hood. Therefore, avoiding eval for new Function is not any better. eval may not allow a return statement, but it returns the value of the last expression evaled.

Gandalf Over a year ago

This seems to work if the content of js_code is core JavaScript. What if the content of js_code is a jQuery snippet. This does not seem to work then. Any suggestions?

Den Pat · Accepted Answer · 2020-04-30 12:17:08Z

-1

This worked for me, paste following code in the page which is in an iframe, not the parent page:

window.myFunction = function(args) {
   alert("script from iframe");
}

And now add following code to call above function:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

answered Apr 30, 2020 at 12:17

Den Pat

1,29413 silver badges19 bronze badges

Comments

PiotrC · Accepted Answer · 2013-09-01 14:16:20Z

-2

How about setting ajax refresh with js interval function to take any data stored in file/session etc. ?

It's surely not the most lightweight mode and it involves a tiny bit php, but can do the work.

answered Sep 1, 2013 at 14:16

PiotrC

1821 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to add JavaScript code into existing iFrame using jQuery?

8 Answers 8

3 Comments

Comments

9 Comments

3 Comments

5 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

Comments

9 Comments

3 Comments

5 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related