This question already has answers here:
setTimeout Internet Explorer
(7 answers)
Closed 5 years ago.
I have the following web page:
<html>
<head>
</head>
<body>
<h1>Wait until closed</h1>
<script>
function wait(popup){
if (!popup.closed){
setTimeout(wait,1000,popup);
} else {
alert('closed');
}
}
var popup = window.open("http://www.google.com", '', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes, width=1000 , height=800, top=' + screen.top + ', left=' + screen.left);
wait(popup);
</script>
</body>
</html>
When I open it with Chrome or Firefox, I see the message 'closed' after I close the popup. In IE11 however nothing happens. What is the explanation of this difference in behaviour? (i.e. which part of the standards IE11 does not adhere to, or interpret differently in this case, if at all?)
EDIT: reading the suggested answers, I tried to change setTimeout(wait,1000,popup) to setTimeout(function() {wait(popup);},1000), like this:
<html>
<head>
</head>
<body>
<h1>Wait until closed</h1>
<script>
function wait(popup){
if (!popup.closed){
setTimeout( function() {
wait(popup);
}, 1000 );
} else {
alert('closed');
}
}
var popup = window.open("http://www.google.com", '', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes, width=1000 , height=800, top=' + screen.top + ', left=' + screen.left);
wait(popup);
</script>
</body>
</html>
but this does not work either.
EDIT: The comments indicate that this is a duplicate, but since trying to change the code according to the suggested answers did not work for me until now, I modify the question by asking to change the above code so that it works in IE11 (hope that this is allowed by SO rules). The code shown does not work.
This one was kind of bugging me, so I tried it in on a local file and got the same behavior. window.open returning null in both IE and Edge. Apparently if protected mode is enabled, window.open will return null in both IE and Edge.
https://msdn.microsoft.com/en-us/library/Bb250462.aspx
I'm not sure how to work around it. Maybe a closeable frame?
Related
I am attempting to make some css change when using mobile but an unknown variable displays as undefined.
I have searched through numerous tutorials and found lots of different solutions but I am a beginner to javascript and html and don't entirely understand them. I am using chrome and changing the user agent to see what happens on mobile.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Show</p>
<div id="device"></div>
<script type="text/javascript">
var innerHTML="";
testExp = new RegExp('Android|webOS|iPhone|iPad|' +
'BlackBerry|Windows Phone|' +
'Opera Mini|IEMobile|Mobile' ,
'i');
if (testExp.test(navigator.userAgent))
document.getElementById("device").innerHTML =
show();
else
document.getElementById("device").innerHTML =
hide();
function show() {
document.getElementById("demo").style.display = "none";
}
function hide() {
document.getElementById("demo").style.visibility = "visible";
}
</script>
<p>End</p>
</body>
</html>
On desktop it should show:
Show
End
But it displays:
Show
undefined
End
On mobile the 'show' disappeared. But undefined does not.
The problem comes from this line : document.getElementById("device").innerHTML = hide();
The hide function has no return, so if you use the data it returns, as it returns nothing, it puts undefined inside #device element.
Thanks for your help I was a bit of a beginner so thanks for the support. For a reason I do not understand, I had to put something in a return before it could complete the function
I may not have worded the above correctly please feel free to clarify
This question already has answers here:
Detect if any kind of IE (MSIE) [duplicate]
(6 answers)
Closed 4 years ago.
Do you know a script for notices or warnings only for internet explorer users?
I need to show a warning only for users in this specific browser.
Please, Can you help me?
I had to do this problem a while back. I ended up using javascript since support for conditional comments was dropped: https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)
My solution ended up looking like this:
<style>
#ie-banner {
display: none;
/* other styling */
}
</style>
<div id="ie-banner">
<div id="ie-message">
<h5>INCOMPATIBLE BROWSER</h5>
</div>
</div>
<script>
function isOldIE(userAgent) {
var msie = userAgent.indexOf('MSIE');
if (msie > 0) {
// IE 10 or older
return true;
}
// other browser, IE 11, or Edge
return false;
}
if (isOldIE(navigator.userAgent)) {
var ieWarning = document.getElementById('ie-banner');
ieWarning.setAttribute('style', 'display: block;');
// drop off my react app below
// var root = document.getElementById('root');
// document.body.removeChild(root);
}
</script>
Note that I remove the child like that and use older DOM apis because more standards methods simply don't work on IE... big surprise.
If you only care about IE9 and down, then I probably would just use conditional comments. Straight from the link above:
<html>
<!--[if IE]>
This content is ignored in IE10 and other browsers.
In older versions of IE it renders as part of the page.
<![endif]-->
</html>
When I execute the below test HTML page in Chrome, I see the following in the debug console:
Has parent? true
Has parent? false
Am I right in assuming that this a Chrome bug (it doesn't happen in other browsers), or is Chrome within its right to do this for some reason? It resulted in a bug in one of my web apps and I finally isolated this snippet to repro the core issue.
Here is the test page:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body class="">
<script>
function testDoodle() {
var testParentEl = document.createElement('div');
var testChildEl = testParentEl.appendChild(document.createElement('div'));
document.body.innerHTML+=('Has parent? ' + !!testChildEl.parentNode+'<br>');
console.log('Has parent? ' + !!testChildEl.parentNode);
setTimeout(function() {
document.body.innerHTML+=('Has parent? ' + !!testChildEl.parentNode+'<br>');
console.log('Has parent? ' + !!testChildEl.parentNode);
},
2000);
return;
}
testDoodle();
</script>
</body>
</html>
EDIT: I should have mentioned that I'm testing on Windows 7 with Chrome 49.0.2623.87 m (64-bit). Was also able to repro on OSX 10.11.2 with Chrome 49.
Also, I should mention that sometimes it displays true/true and sometimes true/false. You might have to reload the page a few times to witness the issue. I'm not sure, but it's possible that the debug tools (console) need to be open as well.
Thanks much.
My guess is that testChildEl.parentNode does not reference testParentEl strongly, so it's garbage collected.
Both referencing testParentEl inside the timeout and adding a strong reference to testParentEl on testChildEl fix the problem for me:
(function testDoodle() {
var testParentEl = document.createElement('div');
var testChildEl = testParentEl.appendChild(document.createElement('div'));
setTimeout(function() {
testParentEl; // Prevents it from being garbage collected
document.write('Has parent? ' + !!testChildEl.parentNode);
}, 100);
})();
(function testDoodle() {
var testParentEl = document.createElement('div');
var testChildEl = testParentEl.appendChild(document.createElement('div'));
testChildEl.strongParent = testParentEl; // Prevents garbage collection
setTimeout(function() {
document.write('Has parent? ' + !!testChildEl.parentNode);
}, 100);
})();
I believe that this is finally fixed by Chrome v50 (or at least I haven't been able to repro since updating).
This question already has answers here:
Detect all Firefox versions in JS
(8 answers)
Closed 3 years ago.
I'm pretty new to Javascript. What I've learned is from just playing around with code.
I'm having trouble getting this to load. Bascially I need a certain div to only show in Firefox. Here is what I have.
<div id="parent" class="control-group"></div>
<script type="text/javascript">
$(document).ready(function() {
switch ( BrowserDetect.browser )
{
case 'Firefox':
$("button[name='btn']").click(function() {
$("#parent").html("<div></div>");
});
});
break;
}
</script>
You probably shouldn't be doing it like this, but if you are absolutely sure you only want to target Firefox:
var browser = navigator.userAgent.toLowerCase();
if (browser.indexOf('firefox') > -1) {
alert('Firefox');
}
fiddle
In mobile web minibrowsers, it seems that the window object makes no sense — since there's only one window to show. Therefore, things like window.pageYOffset=320 make no sense (as far as I can tell).
Given a simple example such as a map zoomin/zoomout such as
<html>
<head>
<title>zoom.html</title>
<script language="javascript">
var zoom=15;
var vpos=window.pageYOffset;
var key="whatever-your-Google-Maps-site-key-is";
function setImgSrc(z) {
document.getElementById('img').src=
"http://maps.google.com/maps/api/staticmap?center=Lisbon,Portugal&zoom="
+zoom+"&size=400x400&maptype=roadmap&sensor=false&key="+key;
}
function zoomin()
{ if(zoom<=18) zoom++; vpos=window.pageYOffset; setImgSrc(zoom); }
function zoomout()
{ if(zoom>=1) zoom--; vpos=window.pageYOffset; setImgSrc(zoom); }
</script>
</head>
<body onload="javascript:setImgSrc(15);">
<h1>zoom</h1>
<p><img id="img" alt="Lisbon,Portugal"/></p><p>
<a onclick="javascript:zoomin()">[+]</a>
<a onclick="javascript:zoomout()">[–</a>
</p><hr></body></html>
which seems to work well on desktop browsers; so I ask: how can I indicate that, on updating the page (onclick doesn't seem to work on minibrowsers, but href does) it should offset the page to the previous position?
(For other reasons, simply (re)loading the page to a given named anchor isn't working on the problem I'm dealing with.)
Thanks in advance for your feedback.
Isn't it lovely when you answer your own questions? Hmmm...
Anyway, according to this, some properties/functions for the JavaScript (JScript?) window object have different representations according to the choice of browser (Firefox, IE, etc.). Therefore, a possible page vertical offset function would be
function setPageVPos(w,vpos) {
try { w.scrollTo(0,vpos); } catch(e) {}
try { w.document.body.scrollTop(vpos); } catch(e) {}
}
The first tries with the window.scrollTo implementation in Firefox browsers, and the second tries with the document.body.scrollTop implementation in IE browsers. I've tested in both Firefox (desktop) browser and in a HP iPaq IE-like (mobile) minibrowser and works on both.