Why setting a variable in a iframe works in pure Javascript way but not in Jquery?

Question

I'm trying to add a variable in a iframe, it works in Javascript way but it does not do what I want in Jquery way. Here is a jsfiddle.

Pure javascript way:

var iframeDocument = $('#iframe')[0].contentWindow.document;
var scriptObject = iframeDocument.createElement("script");
scriptObject.type = "text/javascript";
scriptObject.innerHTML = "var variable=9;";
iframeDocument.body.appendChild(scriptObject);

Result is okay in console (variable is set and equals to 9 and iframe context) :

And when I try to change the value of the variable in JQuery:

$('#iframe').contents().find('body').append($('<script type="text/javascript">').html('variable=10;'));

The variable is loaded in parent context and didn't change in iframe!

I know Javascript way is often better than Jquery way but I am simply wondering why this doesn't work as expected.

http://stackoverflow.com/q/610995/1267304 – DontVoteMeDown Oct 27 '15 at 16:16 — DontVoteMeDown, Oct 27 '15 at 16:16

score -2 · Answer 1 · answered Oct 27 '15 at 16:21

-2

You are missing </script>, which by the way, you cant't inject like that. Try this:

$('#iframe').contents().find('body').append($('<script type="text/javascript"><\/script>').html('var variable=10;'));

answered Oct 27 '15 at 16:21

marioivangf

178
1
9

1

`$('')` doesn't care about closing tags – charlietfl Oct 27 '15 at 16:41
But when it's appended it prints ``, it's a way to force scaping, could also be: `$('#iframe').contents().find('body').append(' – marioivangf Oct 27 '15 at 17:01

Why setting a variable in a iframe works in pure Javascript way but not in Jquery?

1 Answers1