Dear all,
I have spent quite a bit of time trying to make a dynamically-loaded page's
scripts work in IE 7 and Firefox and would like to share with you the
lessons I have learnt. You might find my discoveries obvious or trivial, but
I am still going to post them in case they are useful to someone:
I have a page (host page) that is loading another page (guest page) into a
div via the .load() ajax function.
The host page's <head> element contains links to all the project's
JavaScript files (including jquery.js) and style sheets files.
The guest page just contains links to the JavaScript files and style sheets
files applicable to the content it is loading. However, these links are not
put into the <head> section as IE seems to ignore links placed there (thanks
to Chris Mcleod for sharing that with us at the end of August). The solution
is to put these links into the <body> tag.
The good news is that there is no need to re-load the JavaScript files and
style sheets files that were loaded in the host page as these seem to be
accessible from the guest page.
If you have some inline scripts in the guest page (some of my JavaScript
variables are dynamically generated via ASP.NET and therefore need to be
inline), the order in which you place the script tags is important as IE and
Firefox differ slightly:
- If you put the linked script before the inline script, Firefox will
execute the inline script before the linked script, whilst IE will execute
the linked script before the inline script.
- If you put the inline script before the linked script, both Firefox and IE
will execute the inline script before the linked script.
I use the second approach as it is consistent in the two browsers.
Also, take into account that any $(document).ready placed in the guest page
JavaScript code will be triggered as soon as it is found (it will not wait
until the guest page is loaded). This being the case, I just place the code
to be executed when the page is loaded at the bottom of the last loaded
script.
Another thing that has driven me crazy is the use of "var" in IE (Firefox
doesn't seem to have this problem):
In the host page (or any other normally loaded page) any variable declared
with "var" has a limited scope only if it is declared within a context (for
example a function). Any variable declared with "var" outside any context
has a global scope and can be accessed from any other place in the code.
In the guest page, however, any variable that is preceded with "var" will
have a scope that is limited to the script in which it was declared (I
imagine it has something to do with the eval statement used to execute the
dynamically loaded script code). That means that, in my case, the variables
that were declared in the inline script were not accessible from the code
present in the linked scripts.
The solution is to remove the "var" from the variable declarations. If you
just put "myVariable = 'whatever';" you will be able to access "myVariable"
from the rest of the scripts.
A final thing I have discovered that is probably quite obvious is that the
guest page JavaScript code can have an effect on the host page DOM. If, for
example, your guest page loads the following JavaScript code
"$('div').css('backgroundColor': '#F00');", all the divs in the host page
will turn red. This is probably due to the fact we are loading the guest
page into the host page (as oppossed to using an iframe). Tha means that you
should be careful when using the jQuery selectors in the guest page
JavScript code.
Well, that's about it! I hope somebody finds this information useful. If you
have found any other quirks regarding jQuery and IE 6 or 7, please share
them! I have been quite surprised about the few posts that talk about IE 7
at all. Maybe I am the only one finding problems. Or maybe people have not
started worrying about this new browser yet.
I will take the chance to thank everybody involved in the development of
jQuery and its plugins. you are doing a great job! Thanks!
--
View this message in context:
http://www.nabble.com/Dynamically-Loaded-Scripts-in-IE-7---Problems-Found-and-Lessons-Learned-tf2655919.html#a7408308
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
