My company recently launched a website and we're getting a JavaScript error often in IE11.
Object doesn't support property or method '[ext. func name]' [Internet Explorer 11.0]
In our code we're frequently extending jQuery with the following syntax:
$.fn.center=function() { ...... };
The error message always happens on those functions. Is there a solution to this? Or at least an explanation? I'm ok with changing the code but I'd like to understand why it is happening as well.
I have not been able to reproduce this issue in IE11 myself. The only reason we're able to see the errors is because we're AJAX'ing all clientside errors to ourselves via window.onerror.
I am not sure about jQuery, but if you use compilation for your project, you might consider to add at the top of your entry point
import 'core-js'
At the moment core-js polyfill library is the easiest way to make Cross Browser Support
Related
I have an Angular5 single-page app that works perfectly on Google Chrome, Firefox, Microsoft Edge and mobile browsers. However, with IE11, I get the errors:
ERROR TypeError: Object doesn't support property or method 'find'
and
ERROR TypeError: Object doesn't support property or method 'startswith'
Based on Angular docs, it's supposed to support IE11. I tried to apply fixes on the browser settings (as per Microsoft forums) like reset Advanced Settings in Internet Options and trying in compatibility mode, etc. But nothing on the browser configuration worked.
Is there any special configuration required on Angular side to make it work on IE11? How can I fix the errors mentioned above?
I'm not sure which code samples may be relevant, please let me know and I can provide. Thanks.
EDIT: More details on the accepted solution can be found in Angular - Browser Support. Specifically, enabling polyfills.
There should be a file called
polyfills.ts
In it, you can uncomment various polyfills for different browsers. Just read the commentblocks.
Those errors pop because IE doesn't implement those functions.
To resolve this, simply look for the functions on MDN's website.
For instance, here is the find method.
If you go to the bottom of the page, you will find a polyfill for this function (in the page I gave you, in french, it is Prothèse d'émulation).
Simply copy and paste your code into a Typescript file, and import that typescript file into your project.
We currently updated a project from Polymer 1 to the Polymer 2/ hybrid version.
I know that webcomponents-hi-sd-ce.js is the polyfill for edge.
When testing the page on Microsoft Edge I now get an error indicating that webcomponents-hi-sd-ce.js.map could not be found (404).
The same error occurs when loading the project with webcomponents-lite.js
I couldn't find similar cases so I figured this might be a issue in Polymer 2. I tried importing the script directly by myself but that didn't help either.
I would appreciate if someone could help me out here or share his experience with a similar problem.
The exact error from Edge v.38:
HTTP500 + for some reason the file path is shown incorrect even though it is actually right in my folder.
https://..../bower_components/webcomponentsjs%20[synthetic:util/global]
Debugging the loader, I've found the following issue:
For each absent native platform feature (as determined by the loader) an acronym will be appended to the polyfill URL.
Unfortunately, for some combinations of features—-as with MS Edge—-the resulting path is unavailable.
This might have been resolved meanwhile, but I've moved on to just using webcomponents-lite (since we're only supporting Edge).
There seems to be an issue with webcomponentsjs (version ~1.0), that applies to webcomponents-loader and webcomponents-lite. It should work whenever you load the app with F12-Tools closed.
See https://github.com/PolymerElements/polymer-starter-kit/issues/1025 for details, especially July 27th's comment.
you should use the webcomponents-loader like so
<!-- Load polyfills; note that "loader" will load these async -->
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
also a missing map file should actually be no problem as this is "just" used while debugging to see "readable" code instead of the compressed version.
also depending on your Edge version you may need to transpile your code to es5 using polymer build.
In my Angualr2 application, i am using Typescript. I need to maximize the browser when the app is get to run. I have seen this. So in javascript it can be done with
window.moveTo(0, 0);
window.resizeTo(screen.width, screen.height)
but i don't know, how i can access to the window object in the typescript?
TypeScript is just a superset of JavaScript so any valid JavaScript is valid TypeScript.
First off, you mentioned installing jQuery. The code you linked to doesn't use jQuery so I don't understand why you would need it.
Second: window.resizeTo does not work in most cases. Unless you're making a pop-up, it's unlikely it will work at all. In fact, I just tested it in Chrome, Edge, Firerfox, and IE11. IE is the only one which worked.
I have some JS that runs fine in FF and IE but in Chrome I see the following error:
uncaught exception ReferenceError: JSON is not defined
I presume I need to include something but I'm not sure what. Help?
Also, any clue why this might work on IE/FF but not Chrome?
Btw, I'm using JSON.stringify() in my script.
UPDATE: JSON.stringify is now available in chrome (couldn't find when it was introduced).
The JSON object is not yet part of the standard IIRC, but is expected to be soon. In the meantime, browsers are free to implement it at will, and that's probably what you are seeing here.
Your best bet is to get a separate library that does the same thing and use it for the meantime until native implementations are more widespread. You can find a very good one here (Link at the bottom).
I have a big (probably) javascript problem.
i have a long and complex script on the page based on mootools framework,
in FF and other browser everything works fine, but in ie 6 and 7 i got "error:153 (sometimes 84) Unspecified error" and the strange thing is in IE8 that show me the error "Object doesn't support this property or method".
someone know the possible cause of the problem? o maybe someone know a list of IE's unsupported property or method?
In IE8 you can get the line number of the error, then right-click -> view source. IE8 has a proper source, which includes script lines, so you should quickly be able to find the source of your error.
If the script you're using isn't obfuscated or all on one line, you could use the JavaScript debugger in IE8 to pinpoint the object which is causing the error. Press F12 to open the Developer Tools, go to the Script tab, and click the "Start Debugging" option. If there's an error it may well break on the relevant line. If not you can set some breakpoints and step through the code.
You can also use IE8 developer tools http://blogs.msdn.com/ie/archive/2008/09/03/developer-tools-in-internet-explorer-8-beta-2.aspx to debug.
For other version I suggest you use Web developer tool bar which is similar to web developer tool bar for firefox.
Its near impossible to tell what the problem is with this information (at least for me).
For IE6/7 I suggest adding a few alerts to the javascript in intervals to find out exactly what line of code is causing your problem. If you know which object is causing the error, it is usually quite simple to find out what the exact problem is.
IE8 provides nice debugging tools, so that is a good place to start.
In my case the error was due to a $ mapping conflict.
Using jQuery instead of $ solved the issue.