Renaissance 2K

Hello, everyone.

I'm working with many people on a web development project. The team is using AJAX to send and receive configuration information to determine the customized content that appears within various elements on the page. Currently, the flow is rather simple. A user will make a request, the browser will make an AJAX call to the server, and the server will return HTML markup that describes the appearance/behavior of the desired element within the page.


Until recently, this has been working without issue, until it came time to test this with IE7. All our markup has been rendering as expected, except for one particular request which returns a small amount of JavaScript in a
<SCRIPT> tag to handle some of the wonkier behavior.&nbsp; Whenever this request was made, the <DIV> where the markup should be injected is a blank, whereas every other request would render properly.

After closer inspection, it appears that IE7 is stripping out everything within the <SCRIPT> tags, including the tags themselves, before injecting the markup.&nbsp; Consider the following:

var responseText = "

<p>Begin Script</p>

<script type='text/javascript'>

// random JavaScript code

</script>

<p>End Script</p>

";

displayArea.innerHTML = responseText;

alert(innerHTML);

In Mozilla Firefox, as intended, the page will draw an alert box containing indentical contents to the response text, including the <SCRIPT> information. In IE7, the alert box displays the following:

<p>Begin Script</p>

<p>End Script</p>

Naturally, the <SCRIPT> content is missing.

It's not difficult to figure out why IE7 would be stripping the information out, considering the potential security threats of passing unwanted JavaScript to the browser. At the same time, though, other browsers do support this without incident, and I would like to know if there's another reason for this behavior besides what we've already theorized.

With that in mind, is there any way of circumventing the problem Another team member has suggested using regular expressions to pass all the <SCRIPT> snippets to an eval() function to be executed "the hard way" though this seems somewhat inelegant. I was curious as to whether or not anyone had any additional suggestions.

The JavaScript code being passed, for those that are curious, is an implementation of the EXT-JS visual library and is displaying a tree structure.

Thank you very much for your assistance.



Re: Internet Explorer Web Development Injecting JavaScript into a DIV Element

unique_username

Is your example exactly what you are trying to do ... if so, the double quotes on the type attribute for the script tag will prematurely close your HTML string.

e.g. if you change it to....

var responseText = '

<p>Begin Script</p>

<script type='text/javascript'>

// random JavaScript code

</script>

<p>End Script</p>

';


then this should solve your problem...


however it will also depend on what content you have in your javascript code... it too may need escaping too...


the script should work fine, and not be a security issue, as long as you aren't trying to inject this on a page/window/iframe from another domain, or src (source) content from another domain.


If you really get stuck... give the script tag an ID, and add it empty... then after you've added this to the DOM, add your script content.