jQuery incompatibility with Firefox

Question

Hello, I'm using a simple piece of code

$("container").load(url, function(){ callback();})

to replace the content of a div container using jQuery's AJAX functionality. That appears to work well with Internet Explorer, however after trying to view it through Firefox I am getting some unexpected behaviour.

The page is fetched and placed correctly inside the div only for a moment; then the whole page appears to refresh automatically and seems to redirect itself to a page prefixed with

wyciwyg://1/http://

Needless to say that it just hangs there with a blank page and nothing happens unless I click on Firefox's stop button. Are there differences between IE/Firefox that could be causing such a behaviour in jQuery? Thanks in advance for your help.

Answer 1

There's probably <script> tags in the document returned at the targeted url.

Loading content into the page that contains <script> tags has browser specific quirks that jQuery cannot hide (well... it tries, but in the process makes the quirks even more quirky and strange). You should avoid fetching a page that contains <script> for use as HTML as with load(). Which means generally don't load arbitrary pages containing any old HTML constructs, but only addresses that are intended for use with jQuery content loading.

Whilst it's difficult to say why a script in the target page might end up replacing the page with a wyciwyg URL without some code to play with, it has happened in the past with calls to document.write, which is a behaviour that will definitely cause breakage in general as you can't write to document from an already-parsed document like the one you'll be loading into. It could also be an interaction with an add-on.

Answer 2

If document.write is your problem, try writeCapture.js (full disclosure: I'm the author). It has a jQuery plugin so include it and change your code to:

$("container").writeCapture().load(url, function(){ callback();});

and see if that doesn't fix the problem.