带有jQuery的Internet Explorer上的Javascript错误，但在Firefox上可以正常工作

Question

A quick question I'm hoping someone can help me out with.

On firefox our jQuery slider is working perfectly, however on viewing with internet explorer there are some javascript errors occurring. The website is http://foscam-uk.com/index.php

Hoping there is a possible solution to this.

Kind Regards and Thank You!

Errors: Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3) Timestamp: Wed, 6 Jun 2012 22:36:43 UTC

Message: Object doesn't support this property or method Line: 5653 Char: 9 Code: 0 URI: http://foscam-uk.com/js/prototype/prototype.js

Message: Object doesn't support this property or method Line: 5988 Char: 5 Code: 0 URI: http://foscam-uk.com/js/prototype/prototype.js

Message: Object doesn't support this property or method Line: 2 Char: 5 Code: 0 URI: http://foscam-uk.com/skin/frontend/default/theme316/js/scripts.js

Message: Object doesn't support this property or method Line: 5736 Char: 7 Code: 0 URI: http://foscam-uk.com/js/prototype/prototype.js

Message: Object doesn't support this property or method Line: 5988 Char: 5 Code: 0 URI: http://foscam-uk.com/js/prototype/prototype.js

Message: Object doesn't support this property or method Line: 73 Char: 11 Code: 0 URI: http://foscam-uk.com/index.php

Answer 1

IE has some limitations on number of CSS and JS files. (Around 30). I didn't count but seems like you have tons of JS and css file references. If you exceed this IE basically stop downloading the script or css file. You can verify it yourself by using Fiddler.

Try to compact them to single file with compressor tools (ex: http://developer.yahoo.com/yui/compressor/ )

Answer 2

prototype.js seems to be throwing errors in every browser but these seem to have no effect on your site.

your site works fine in IE7 and IE10. In IE8, your version of jQuery throws an error, not the slider code. I would upgrade your 1.7.1 version of jQuery to 1.7.2 (the latest).

Answer 3

So it looks like you're loading a several third party libraries. You're loading PrototypeJS, Scriptaculous, jQuery, and jQuery plugins*. It appears to me what you have is not so much a JavaScript problem as a plugin organization problem.

Now, you do appear to be using things like jQuery.noConflict() in one place, but then not in another.

My suggestion is to deactivate all the current modules you're using on the site which inject JavaScript, and then re-enable them one at a time. Each time you re-enable a plugin, check to see whether that, and all the other plugins are also working.

---

*Actually, you're loading more than just a few libraries. You're actually loading two versions of jQuery , plus Prototype. This is not a good practice. Here's what I can see, not counting the Magento generated code that is being inserted:

• Prototype 1.7
• Credit Card Validation Javascript
• Really easy field validation with Prototype
• script.aculo.us builder.js
• script.aculo.us effects.js
• script.aculo.us controls.js
• script.aculo.us slider.js
• jQuery 1.4.2
• jCarouselLite
• jQuery 1.7.1
• TMSlider: jQuery based image slider
• jQuery Easing v1.3

You need to do a rethink as to how you're handling some of these effects. There's a great deal of overlap in what these libs do, and you'd be better off seeing if there's a way to create some sanity in which modules you're choosing.

Answer 4

I had a similar issue with my client-side script. The IE10 F12 Dev tools script tab showed errors on jQuery syntax even though the site worked in IE8 and IE9.

One of the libraries I used (Telerik Kendo UI) was not IE10 compatible yet.

In order to force IE10 to show the page, I had to add this meta tag to the very top (first item in head) of my HEAD tag:

 <meta http-equiv="X-UA-Compatible" content="IE=9" />

Then the pages worked again.