I have written a frontend for Elasticsearch in AngularJS and it is working fine on Chrome and Firefox, but on some IE11 it is not working at all (some IE11 are working and some are not!)
Not working does mean:
Angular variables are not not interpreted at all and I get it as {{variable}}.
In gerneral my search engine does nothing (no controller call). It seems, that there is no AngularJS code executed at all and the site is a complete mess.
Any ideas?
update
I know, I had too less information but probably I am as confused with this issue as you.
Now I know, that IE11 always sets itself to "Document mode - 7" as shown in this question
How to set IE11 Document mode to edge as default?
There are probably two ways to solve this issue..
My html page can force IE11 to use lates "Document Mode", or
every single user hast to set "Document Mode" to the latest version (don't like that)
Solution
I added this
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
to my index.html to force IE11 to use its latest version, in this case edge
Related
I'm using jstree v3.2.1 wrapped with ngJsTree in an AngularJS web-app to be used mainly on IE11 browsers.
I found that users who could not connect to the internet, due to their company policies, could not load properly the jstree I use within my forementioned web-app, on the other hand users who do access to the internet see everything just fine.
In particular the former users see just the spinner of jstree loading frozen and the "Loading..." text, which is strange because I set up the jstree config object to translate it into another string.
Moreover, I put a breakpoint inside the callback function associated to the ready event, and it never gets called.
Finally, the jstree part of my web-app works uber fine with both online and offline users when they reach it through Chrome or Firefox.
Is there any restriction on the online/offline usage of this library when in combo with some sort of IE11 strict security policy?
Thank you in advance
We had the same problem with IE11 in an environment without online access and custom security policies.
In our case the security policies somehow influenced the compatibility mode of IE which caused the problem.
After setting the compatibility mode manually in the Page header as described below everything works:
(After the Deployment we also needed to close and reopen the Browser, simply pressing refresh didn't change the compatibilty mode)
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8;" />
I have an angular application that run ok on chrome and firefox.
But on IE the application does not work.
My Big problem is that I can't find the error reason. and got some generic error.
How can I debug the application on IE or how can I find the reason for the Error
This means that ng module is failing to load. :)
Please look at your browser's console to find if any files are missing or not being downloaded correctly. Also it helps if you click on the link to http://errors.angularjs.org in your console, it will give details about which particular module is failing to load.
Check below link for complete details for resolution:
http://blog.technovert.com/2014/10/dependency-injection-fails-angularjs/
IE Debugging : First of all you need to ensure your Angular application works on IE please consider the use ng-style tags instead of style="{{ someCss }}". The latter works in Chrome and Firefox but does not work in Internet Explorer <= 11. Arguably, this is the biggest annoyance of IE—the page just doesn’t load and doesn’t give any errors. Sometimes you need to view the page again in Firefox. If it’s not an IE specific error, Firebug will pick it up. If Firebug loads normally, the chances are it’s one of two IE specific errors: a trailing comma, or unsupported XML syntax.
For minimize the application files I use
bundles.Add(new ScriptBundle("~/app").IncludeDirectory("~/Assets/app", "*.js", true)
);
(Part of asp.net mvc)
And from the layout page I take all the application files
#Scripts.Render("~/app")
Like I said this part of code worked for me in some browsers, But on IE It fail.
By Changing the script src to all specific files, I resolve this problem. and now on IE it work like the other browsers.
Maybe I miss a comma or ";" (end row) or something like that.
Thanks
need to check this page or api
http://henriquat.re/appendix/angularjs-and-ie8/necessary-changes-for-ie8-compatibility.html
https://docs.angularjs.org/guide/ie
I have an angularjs site deployed to IIS on a Windows Server 2012 R2 host inside my firewall. When I RDP into the server and, from there, navigate to
http://localhost/Foo
in IE11, everything behaves as one would expect;my page is served to the browser.
But, when I attempt to browse
http://servername/Foo
in IE11, I get an error thrown from line 1016 of angular.js
"Object doesn't support property or method 'querySelector'"
This only occurs in Internet Explorer.
Everything tested out fine in Chrome as well as Firefox.
Does anyone have a clue as to why this is happening and what I can do to fix it?
The solution to this problem was to add the
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
tag as the first item in the Head.
The meta tag has to be the first tag in the head for IE to pick up edge mode; otherwise, it ignores the DOCTYPE that is supposed to instruct IE not to fall into quirks mode.
I had included the meta tag as an afterthought when I was deploying and had typed it in at the bottom of the head.
MSDN|Specifying Legacy Document Modes
The X-UA-Compatible header isn't case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.
The default Compatibility Settings in Internet Explorer cause IE to silently behave differently for internal sites and external sites.
Setting the X-UA-Compatible meta tag explicitly declares that browsers should be receiving your internal site in Edge mode without the requirement of administrating Compatibility Settings, but the header must be specified as the first tag in the head in order to have this effect.
Disable Compatibility view mode for your intranet and site that you're trying to access and this will solve your problem.
I'm trying to make my web application based on Angularjs work in IE8 and IE11.
After a lot of search, i am asking my question here: is it possible to make an Angularjs application work in IE11? and into IE11 ?
Thanks for advice
I had a problem while loading a angularjs file on IE. It worked perfeclty as expected on Chrome and Firefox but was giving error as angular not defined and what not. After searching on Internet I applied following fix to my code
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
and now it displays the page.
It should work and how you achieve that will depend on the application you are writing. Basically, you have to add extra codes to handle IE8. The AngularJS guide on IE should be a good place to start.
However, there could be situations where you run into problems. For example, when you want to use the "X-UA-Compatible" meta tag. An option could be to use the Google Frame plugin but Google has stopped updates on it from January 2014.
I think your question needs to be more precise about What is wrong with IE11?
I have personally created angularjs applications that works from IE8+ and on all other browsers like chrome, safari, firefox, opera. With all these browsers angular worked just fine.
It is important to mentioned that Microsoft broke the "Internet Explorer" inheritance meaning that internally IE11 is completely different from all other previous versions of IE but being the most advance version of Internet Explorer Angular does not need any particular "adaptation" to work with this browser.
If there is anything you should be worry it is IE8 :) and I am not saying this because of angular but because of IE8 itself.
UPDATE: There is a workaround to the problem. It is to force IE10 into compatibility mode by including one of the following meta tags:
<meta http-equiv="x-ua-compatible" content="IE=7" />
<meta http-equiv="x-ua-compatible" content="IE=8" />
This is not really a perfect solution for various reasons, but it eliminates the problem at least.
ORIGINAL QUESTION:
I realised a couple of months ago that there is a problem with our Silverlight application in IE10 on Windows 8 (I have not tried the IE10 preview for Windows 7). When the asp.net page hosting our SL app first loads everything works fine and the application loads as expected. If I refresh the page immediately, it also reloads as expected. But: If I focus the Silverlight application by clicking in it and THEN hit F5, it just goes blank. It is like the plugin disappears completely. If I trace the requests using Fiddler I can see that no request is issued for the xap file. I have been hoping that this would be fixed in a patch release for IE10, but so far nothing has changed. I cannot find any information about this when I try googling it. It seems highly unlikely that I should be the first person to discovered it and I am quite surprised that I am not finding more information. To reproduce the issue:
Create a new Silverlight application
Add some sort of content to MainPage.xaml, like a Button or whatever
Run the app in IE10 (on Win8)
Click anywhere within the Silverlight application. This is just to focus the plugin.
Refresh the page (F5)
Result: The Silverlight application does not load and the page is blank.
A few observations:
After the steps above, no amount of refreshing will bring the application back.
After the steps above, if I re-enter the url into the address bar and hit Enter, the application loads as expected.
If I enable Compatibility View in IE, the app also loads as expected. Nothing I do will reproduce the bug when compatibility view is enabled.
Now to my questions:
Has anyone else observed this behaviour?
If so, have you found a workaround?
I'm seeing the same issue with my Silverlight application in IE 10.
I've tried adding the IE 8 compatibility meta tag suggested above, but this does not resolve the problem consistently. It seems to work only intermittently, after say every 5th refresh attempt?!
The only way I can see to work around this consistently is to force the Browser Mode into "IE 10 Compatibility View", and I don't think this can be done via page content (meta tag, etc.)? I've had to remove the IE 8 compatibility meta tag so that the "Compatibility View" button is available in the address bar, and then ask users to click the compatibility button, which is then remembered for the site. This results in the browser entering Browser Mode: "IE 10 Compat View" and Document Mode: "IE7 Standards". The refresh behaviour then works consistently as expected and as it used to.
This is a big problem for us. We've built our Silverlight app such that the browser refresh button is used to refresh pages/content within the app (the users stays logged in, etc.). It's really bad that we have to ask users to set our site to run in compatibility mode for the refresh functionality to work as expected.
Note that this still works as expected in Chrome. It seems silly that we might need to recommend that our users use Chrome because of this issue!
UPDATE:
A workaround for this seems to be to always load the Silverlight object into its hosting page dynamically using JavaScript.
E.g.
function onLoad() {
var silverlightControlHost = document.getElementById("silverlightControlHost");
silverlightControlHost.innerHTML = "<object ...
UPDATE 2:
Here is the latest code I use to work around this issue:
...
function unloadSilverlight() {
document.getElementById("silverlightControlHost").innerHTML = "";
}
function focusOnSilverlight() {
document.getElementById("silverlightObject").focus();
}
function onLoad() {
window.onbeforeunload = unloadSilverlight;
setTimeout(focusOnSilverlight);
}
</script>
</head>
<body onload=" onLoad() ">
...
I still had issues with the solution presented by Chris.
This works perfectly for me though:
window.onbeforeunload = function () {
var silverlightControlHost = document.getElementById("silverlightControlHost");
silverlightControlHost.innerHTML = "";
}
I solved the problem in a very easy way. I Wrote a javascript code at the end of the page (or after the object tag in where is your silverlight app) and set the focus to another element, for example, a link. Example:
<object id="silverlightHostControl">...bla bla bla</object>
<script type="text/javascript" language="javascript">
var shc = document.getElementById("silverlightHostControl");
document.getElementById("myLink").focus();
</script>
The shc var is useless, I put just for clarify. Remember: your javascript code must set the focus to another (but focusable) object AFTER the silverlight app object tag was parsed, which means your js code is writen after silverlight app object.
In answer to your question #1, this is happening with our Silverlight apps as well. The only workarounds are 1) restart the browser or 2) switch to compatibiity mode.
It apparently is a bug in ie10.
Thanks for all workarounds solution but this is obviously a bug with Silverlight plugin.
We have raised few tickets directly with Internet explorer development team and they said the issue is from an external problem. It is not a good answer from Microsoft.
Anyway, this time our developers raised ticket through Silverlight development team which still waiting for their response. To get a good response from them, we need to get more people who are facing this issue.
You can vote this issue from Connect website which is Microsoft's official bug reporting platform.
The link to our ticket is: http://connect.microsoft.com/VisualStudio/feedback/details/789004/ie10-shows-blank-page-upon-refreshing-silverlight-app
Cheers
Moh
Yeah i am also facing same issue with one my application. If i opens help of my application in IE 10 then i have to refresh the page each time to view the contents.
I have two workaround for this issue:
1. Press ALT key once
2. Open IE in compatible mode