Script Tags, jQuery, And Html(), Text() And Contents()
After this discovery, I figured I would run the various jQuery script-content-access methods in IE and FireFox to see what else I might discover. Here is the test code that I ran:
IE Browsers (IE6, IE7, ~IE8)
Non-IE Browsers (FireFox, Safari, Chrome)
As you can see, IE was only able to access the Script tag contents using the html() method. All non-IE browsers, on the other hand, were able to use text(), html(), and contents(). None of the browsers, however, were able to access the content using contents().html(). This is not a limitation of the browser or jQuery, but rather a byproduct of the fact that there are no non-text DOM nodes contained within the Script tag.
I cannot figure out why there is extra white space in the IE-based output when it grabs the content via html(). It's as if it is rendering the content using a PRE tag or something (minus the line breaks). That must just be a bug - one that has been fixed in IE8.
All in all, it looks like the html() method is the only cross-browser safe way to access the contents of a Script tag. That's good to know, especially since Script tags act as a very convenient container for HTML templates.
Want to use code from this post? Check out the license.
Thank for this post
I'm glad you found this helpful.
Thanks for the informative post!
I'm looking into using mustache.js to do client side templated html using the script tag to hold the templates, and I would like to keep the templates in a separate HTML file and load that in the script tag through the src attribute, but that does not seem to work. I'm getting to think this is not possible; have you tried to embed HTML templates from a separate file using the script tag, or have other suggestions to achieve this?
Thanks for your tests. I was really wondering why I couldn´t get my script-content with .text() in IE. Now with .html() it´s working fine in all tested browsers.
Is it possible to access the json content in the case of a remote src url, as in <script id="data" type="application/x-json" src="<some feed url>">? I can't quite get such a thing to work and was hoping to find a way around xss restrictions...
@Sam: Why don't you use Ajax to read the feed?
How about using a local Ajax-Call to a php file, which reads the remote feed for you? I think something like this should be possible if allow_url_fopen is true in your php.ini.
This is still an issue 2 years later. jQuery is supposed to remediate these cross browser issues, no? I have been unable to find any statement from the jQuery team calling this behavior "by design" or anything else. I wonder what they have to say about it.
$("textarea").html(test) . here "test" is a html content. here .html is not working fine in firefox.. it is working fine in IE. what what issue here issue. In firefox all the time it is considering as text not as html..? could you provide the solution.