How Do You Break the Global Space in JavaScript on the Client-Side Web?

0
votes

The Situation

I have a JSPF file (a java jsp "fragment" - not sure if it's actually handled any differently than a typical JSP - I think it's just nomenclature but docs and even stack answers I've found are unclear).

I can alert strings at the top and bottom of this JSPF file in inline script tags so the tags aren't broken or getting munged by other HTML shenanigans.

But if I declare a var in the top script tag, it won't be available in the bottom one and alerts "undefined".

I can however assign to a property of the window object and have that property alert in the bottom script tag as-expected. Nothing appears to be munging the window object. It shows the proper type and window methods still fire as expected at the top and bottom of this JSP file.

Obviously Awful Things on this Page:

  • We're using the circa 2007 prototype.js library. I think this was after prototype was doing the really ugly stuff and I don't see it mucking with the object prototype or anything like that.

  • Everything is being served in X-UA compatility = IE7 mode from the load balancer which won't allow HTML overrides. This is on the response headers for absolutely everything, however. Images, js files, CSS files. I used to think document type only impacted CSS/HTML concerns but it appears that when you put it on the linked JS files or you have JS in the HTML we go back to IE7 mode or something. That or something else is nuking the querySelectorAll method which should work in IE8 but doesn't on these pages.

  • The response headers all apply IE7 mode but the HTML doc itself is switching to quirks mode which confuses me because I thought all you needed was an attempt at setting a doctype to establish a generic standards mode. In our case, there is whitespace above the doctype and it's only the first half of this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

so this is what we actually have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

This might be responsible for quirks mode but I had thought IE8 (not sure about IE8 in IE7 mode) just looked for any old doctype to establish standards mode and that it allowed for whitespace in front of the doctype. Not to mention I thought that second part was for validators. Regardless I still don't get why the the global space has been nuked. It could also possibly be tables with improper HTML placement (wrong tags, not nesting-fail).

  • Probably not relevant but the java templating is a complete disaster. Nested includes mixed with ajax requests serving content nested 9 layers deep. You have to look at dozens of XML, JSP and Java files just to figure out how this page is built. 6 XML config files just to sort out a modal, etc...

Things I've ruled out:

  • There are no conditional IE comments setting meta tags differently. You can see the same response headers in the non-IE browsers.

  • There are no frames or iframes in the mix causing this. If there were, I wouldn't expect the window object properties to carry the same values anyway.

  • The window object doesn't appear to be broken or overwritten in any way.

  • No, nothing as recent as coffee script going on in this particular codebase. It's mostly prototype and an unholy union of taglib data inserted directly into JS via inline scripts and a bunch of really awful JavaScript written by primarily generalists/server-side devs.

  • I don't think it's a memory issue although I still haven't tried profiling that yet. I've spent enough time on the page to know that it's reasonably stable. Given the sheer quantity of crap that has to get resolved on the server before the page can even load, performance stinks but I'm not running out of memory or crashing/freezing or anything when the page is open. It's a heavily used page and we're serving car dealerships in production so I don't think it takes an ace machine to handle this page or we'd hear a lot more about it.

I still haven't sorted out where in our dev version of the codebase I need to go to kill the load balancer setting-equivalents that are setting the doctype but is it maybe quirksmode inline HTML JavaScript and IE7 JavaScript in the linked files causing some kind of conflict that destroys the global space? But how do you nuke the global space without breaking the window object somehow? Or maybe some aspect of prototype.js I don't know about?

1
javajavascriptjspquirks-modex-ua-compatible
Potential responders don't like "wall of words". They don't like "wall of code" either. Keep it short. - Joseph
I'll trim the disclaimer of inexperience at the top but when basic rules of a language appear to be nuked it's kind of hard to know what's worth leaving out. - Erik Reppen
"But if I declare a var in the top script tag, it won't be available in the bottom one and alerts "undefined"." This seems to be the key to me - is it possible that these scripts are in different iframes or frames? If you can't post the code, could you post the end result html in a fiddle or something? - Peter Hanley
This... this could be stated better. Are you trying to figure out what's causing the doc mode to be IE7? - JayC
Both scripts alert with plain strings. Everything works when assigned to window properties on both ends but not to a simple global var. I'll try to see what I can show from the codebase. There's nothing anybody would want to copy out of here but there might be stuff I shouldn't be showing publicly. - Erik Reppen

1 Answers

0
votes

Ok, so you're declaring something in in one script tag which should be global but it's not there when the second script tag is run. You cannot "break" the (javascript) global space into more than one piece for a given page. If you have a iframed page... that's different, because that's two pages. Same with javascript or some meta tag doing a redirect; you're dealing with two separate pages. I suspect, that might be what's going on here--that you have a javascript redirect; some script setting the document.location to another page, or the same page but with different parameters causing different script tags to show up rendered into in the document or something.

With any single page you only have local and global declarations. I really can't think of any other situation where you'd have more without relaxing what is meant by a single page (as I've stated earlier).

(Edit: I repeat you cannot "break" the global space. Titling this question as such is probably why your question got down-voted as it's rather nonsensical; "breaking the global space" only makes sense in that I can interpret that phrase metaphorically and can come up with few use cases where the global space might appear to be "broken in two" when you're actually seeing two different global spaces.)

Since you've got JSPs including JSPs and a whole mess of script tags, it seems to me the only way to be really sure of what is going on where is to use a HTTP tracer like Fiddler2, capture all traffic concerning what is loaded when you think a given page is loaded, adding some statement (maybe just debug) in a top-most script block to allow debugging to any page to see what is loaded when (adding breakpoints as necessary for event handlers), and just watch, skip, and evaluate. Painful process, I know, but this is what you have to do when you have server-side code intermingled half-hazzardly with client-side code. It's not a good way to develop websites.