I'm having a problem with a piece of in-line JavaScript in Firefox. It's s simple SetTimeout() method within an <a> element that sets a delay (to allow time for an animation to play out) before opening the destination link in question.
The Problem:
When I click on the link in Firefox I get taken to a white page with the number 2 in the top left hand corner of the screen.
Other Browsers:
Opera, Chrome, Edge, AVG Secure Browser - all work as expected and open the destination link as expected.
The Code:
I've stripped down the code to the bare minimum in order to isolate the problem and realise that it is the in-line JS within the link that Firefox does not like (or is completely ignoring!) Whatever it is, I get no warnings or exceptions thrown when looking in FF developer tools.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<nav>
<p id="homepage">
<a
href="javascript:setTimeout(()=>{window.location = './index.html'},500);"
>Home</a
>
</p>
</nav>
</body>
</html>
At first we thought this could be an IDE problem or server related issue but those possibilities have been eliminated.
Has anyone seen this problem before or know why I'm encountering this purely in Firefox?
According to this MDN
When a browser follows a javascript: URI, it evaluates the code in the URI and then replaces the contents of the page with the returned value, unless the returned value is undefined. The void operator can be used to return undefined
Like suggested, try using the void operator:
Home
You are using an arrow function syntax which is not standardized among all browsers apparently. Also is not backwards compatible and you should either use a compiler such as Babel, or either write classical functions syntax style code.
UPDATE: just use this code if you want it to work.
<p id="homepage">
<a
href="index.html" onclick="window.setTimeout(function(){window.location = './index.html'},500); return false"
>Home</a
>
</p>
Related
I am using the below meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This is my full html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<title>Compatability Mode?</title>
</head>
<body style="padding:50px;">
<div style="border:1px solid green;padding:30px;">
<div style="position:relative; left:-30px">
<div style="position:absolute;height:20px;width:20px;background:red;left:inherit"></div>
</div>
</div>
<div>
If the red box is outside the line, it's ie8 mode<br />
If the red box is inside the line, it's ie7 mode<br />
</div>
</body>
</html>
Now what i want to achieve is, if the user goes to browser mode and changes it to IE8 Compat View or if IE8 Compat view is defaulted in compatibility view settings, i want the page to be rendered in IE8 mode only
How can i do that?
I am ok with any solution(javascript,jquery) or anything else
You can't.
By design, the user (or admin) is fully in control of the experience and can do many things to view your design in unexpected ways. You know about the CV button (which actually forces a page to be displayed in IE7 mode). There's also the F12 tools, compatibility view settings, group policies, IE Enterprise mode, and more.
A better approach is to design the page to determine whether the current capabilities support your needs using things like feature detection, progressive enhancement, graceful fallback, etc.
There are things you can do to influence the decision, but there's always going to be some path, or feature, or workaround, update, or other factor that you didn't think of or predict.
What's the IE7 problem you're trying to solve? Perhaps there's a different way to achieve the effect, one that doesn't rely on a feature unique to IE8.
Hoping to help...
-- Lance
P.S. You might want to look at your smart quote settings, as the sample you posted uses "smart" quotes in the meta element.
Microsoft IE8 and IE9 used to offer functionality to start
a WebDAV explorer on a Windows computer from within a WebPage:
<HTML>
<HEAD>
<SCRIPT>
function fnDavStart(oSpanObj, sPath) {
oSpanObj.navigateFrame(sPath, "_blank");
}
</SCRIPT>
</HEAD>
<body>
<div ID=davDiv>
<SPAN ID=oWebDavHelper style="behavior:url('#default#httpFolder');" onclick = "fnDavStart this, 'https://webdav.myserver.com')">
Click here for WebDAV folder
</SPAN>
</div>
Now the method navigateFrame() and/or the behaviour "httpFolder" seems to be gone in IE11.
How to get similar functionality in IE11?
Thanks,
You can force IE to render like IE9 with this code in your meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
It will make all IE versions (even the ones not yet released) to render pages and javascrit like IE9.
I havent used the behaviour approach before, but have you checked if the SharePoint OpenDocuments object still works?
Open Now
Here's some code with the js embedded in java.
https://github.com/miltonio/milton2/blob/master/milton-server-ce/src/main/java/io/milton/http/fs/FsDirectoryResource.java
How can I turn on IE 10 Compatibility View programmatically in Javascript or HTML?
I just added the following meta tag within the <head> tag, but it is not working.
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
Is there any way to do the same thing in JS?
I checked the compatibility mode article on msdn - here.
Your meta tag is still the method for enabling compatibility mode in IE 10 and IE 9.
As long as you have:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<!-- Other meta tags etc. -->
<head>
Then it should work. You could try making the http-equiv value case sensitive (at the moment you've set it to lowercase).
Also, to answer your question about JS, you can detect whether the browser is in compatibility mode by comparing the browser engine with the browser version for IE. However, this involves browser version detection, which tends to be a bit unreliable. Also, there isn't a way for you to set the user's compatibility mode in JS. So, for the moment at least, you'll have to stick with the meta tags.
I hope this helps.
A good plugin to allow you to view http header information is IEhttpheaders. Just download it from that link & install. Then, when you start IE, go to the tools menu and select 'DisplayIEhttpHeaders...'. When you visit your site it will list the header response. If you modify your answer to include the response, then we can see if it's the problem.
You say “I just added the following meta tag within the header tag”. Do you mean:
The <header> tag
The <head> tag?
The x-ua-compatible meta tag does need to go inside the <head> tag, not a <header> tag.
I have a web application that is working perfectly in Chrome and FireFox, yet is crashing in IE. Note, this is not a JavaScript error, but rather the iexplore.exe process actually crashes.
The code is posted below. This will crash in IE9 (when the button is clicked). Reversing the JavaScript or making changes to the CSS may eliminate the issue, but realize that this is reduced code from a much, much larger application that can not be easily changed in this way (for example, in the actual app the two JavaScript commands are called in two different functions - the second one is run conditionally based on the results of the first). I am not even sure what my question is anymore, other than "is there a way to get Microsoft to patch this quickly?" I am interested in hearing people's thoughts:
<!DOCTYPE html>
<html>
<head>
<title>IE Crash</title>
</head>
<body>
<div id="dvStep11" style="width:500px;">
<label for="inpDOB">Date of Birth (mm/dd/yyyy)</label>
<input type="text" id="inpDOB" style="width:350px;" />
</div>
<button onclick="document.getElementById('inpDOB').value = '12/7/1971';document.getElementById('dvStep11').style.display='none';">Click here</button>
</body>
</html>
Edit: I have opened a case with Microsoft and am working on this with a development team member there. I will update this as I receive more information.
Microsoft has confirmed to me that this is a bug in the IE9 rendering engine. From my further research, it has to do with the fact that the width of the parent DIV, combined with the width of the INPUT causes the INPUT to wrap. For some reason, in this case when assigning a value to the INPUT and immediately hiding the parent DIV, IE crashes.
Microsoft suggested I force IE to use the IE8 rendering engine (which does not crash) with this line of code:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I found, however, that I can also just avoid the problem by wrapping the INPUT in its own unstylized DIV or SPAN. This is preferred because, aside from this bug, the IE9 rendering engine is a lot better (and faster) than IE8's.
Funnily, the debugger IE9 brings is quite useful with break points, variable tracking and such, so I would try and see if that can be of any help. (If you can get IE9; I'm not sure about the dev tools in IE 7 and 8).
I designed a HTML Webpage, and everything look perfect on Chrome and Firefox.
But on IE9, its show very bad >_<
I wonder, do we have any script or some ways to auto set / fix those thing for IE?
you should include the HTML 5 Doctype. When i loaded the page in IE9, it was forcing the page to Quirks mode. looks mostly ok when I change it to IE9 standards mode.
<!DOCTYPE html>
Also, you could try using the meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" >
or
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
to force the browser mode to IE9.
I got two, two word phrases for you bro... 'Progressive Enhancement' and 'Graceful Degradation'
Please validate your page first. No proper doctype deceleration. Browser will render your page in QuirksMode. I think some tags also missing.
I don't know any script to do so... But your problem may depend on what properties are you using and if they are supported by IE9. You may want to check W3C site for CSS properties support
It depends on what feature you use. For example if you use a progressbar you can emulate one with javascript. Alternatives are also called polyfill. A good link to use could be the html5 please website
you may want to consider using these:
http://html5doctor.com/html-5-reset-stylesheet/
and:
http://modernizr.com/