Options are ignored when using window.open() - javascript

I am using the below to open a new window, but it seems that the options are ignored.
var newWindow = window.open('index.php?ident=' + gender + '&nick=' + nickname + '', 'PopupChat', 'directories=no,location=no,menubar=no,titlebar=no,toolbar=no,scrollbars=yes,status=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
I have tested using Chrome, I still get an address bar etc.

Historically, browsers have been incredibly picky about the options string, and spaces are/were not allowed. You have spaces before some of the options:
var newWindow = window.open('index.php?ident=' + gender + '&nick=' + nickname + '', 'PopupChat', 'directories=no,location=no,menubar=no,titlebar=no,toolbar=no,scrollbars=yes,status=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Here --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^----------------^-----------------^----------------^
From MDN:
The string must not contain any whitespace
Removing them may solve the problem.
Separately, if the values in w, h, top, and left are anything but raw numbers, they'll cause trouble as well.
Working example: If I put this on a server and run it with Chrome (or Firefox or IE11), it opens Stack Overflow in a window with the options requested (except addressbar, which you can't suppress anymore):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Foo</title>
</head>
<body>
<input type="button" id="the-button" value="Click me">
<script>
var w = 400, h = 600; top = 1, left = 1;
document.getElementById("the-button").onclick = function() {
var newWindow = window.open('http://stackoverflow.com', 'PopupChat', 'directories=no,location=no,menubar=no,titlebar=no,toolbar=no,scrollbars=yes,status=no,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left);
};
</script>
</body>
</html>

Related

How to put a picture into a pop up window in javascript?

I have this script, however, I cannot figure out how to get an image to show up in the pop up window. Right now, when the window pops up, I only get script. I have tried to enter a link using the href code and the
<html>
<head>
<SCRIPT language="JavaScript">
var w = 480, h = 340;
if (document.getElementById) {
w = screen.availWidth;
h = screen.availHeight;
}
var popW = 300, popH = 200;
var leftPos = (w-popW)/2;
var topPos = (h-popH)/2;
msgWindow = window.open('','popup','width=' + popW + ',height=' + popH +
',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');
msgWindow.document.write
('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<html>
<head>
<SCRIPT language="JavaScript">
var w = 480, h = 340;
function openWindow(){
if (document.getElementById) {
w = screen.availWidth;
h = screen.availHeight;
}
var popW = 800, popH = 700;
var leftPos = (w-popW)/2;
var topPos = (h-popH)/2;
msgWindow = window.open('','popup','width=' + popW + ',height=' + popH +
',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');
msgWindow.document.write
('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
'<img src="https://static5.cargurus.com/images/site/2009/10/24/14/42/2004_suzuki_vitara_4_dr_lx_4wd_suv-pic-8731393806365188898-640x480.jpeg">'+
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
}
</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>
</body>
</html>
To just show an image, then replace this part as shown:
msgWindow.document.write ('<img src="//i.imgur.com/j2JTnI2.png" >');
I strongly recommend against using document.write();, use document.body.innerHTML instead.
precisely use:
msgWindow.document.body.innerHTML = '<img src="url/to/your/image.jpg"></img>';
instead of:
msgWindow.document.write('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
Here's a working example using an image.

Tweet button opening new window and new tab

I am doing FreeCodeCamp's Random Quote Machine exercise.
Using this answer, I tried to set up my tweet button to open up a new window rather than a tab that the user could use to Tweet this quotes with.
The only issue is is that it is opening up a new tab as well as a new window. Is there any way I could get it to just open the new window?
HTML for Tweet Link
<a class="twitter-share-button" href="https://twitter.com/intent/tweet" target="_newwin">
Tweet</a>
Related JavaScript
jQuery('a[target^="_newwin"]').click(function() {
var width = 500;
var height = 300;
window.open(this.href , 'newwindow', 'width=' + width + ', height=' + height + ', top=' + ((window.innerHeight - height) / 2) + ', left=' + ((window.innerWidth - width) / 2));
});
Pen of my Project
Thank you!
You are getting both your custom behavior (opening a new window) and the standard behavior of a link (in most browser nowadays, opening a new tab). To prevent the latter, you need to use the ´preventDefault´ method:
jQuery('a[target^="_newwin"]').click(function(e) {
e.preventDefault();
var width = 500;
var height = 300;
window.open(this.href , 'newwindow', 'width=' + width + ', height=' + height + ', top=' + ((window.innerHeight - height) / 2) + ', left=' + ((window.innerWidth - width) / 2));
});

window.open only in Firefox?

sorry if this is a repeat question!
I have the following Javascript which works fine in Firefox and produces a pop up window. In IE 9 however it does nothing at all and in Chrome it works like a link and changes the current page!
Any advice appreciated!
window.open(page,name,'width='+width+', height='+height+',location=yes,menubar=no,resizable=no,toolbar=no,scrollbars=yes');
Thanks in advance.
This is a working example
JS
function openWindow()
{
var width=668;
var height=548;
var page="http://google.com";
window.open(page, "awindow", "width="+width+",height="+height+",location=yes,scrollbars=yes, resizable=yes");
}
HTML
Open​
DEMO.
Did you create the variables correctly?
This code is working for me:
var page = 'page.php';
var name = 'pagename';
var width = 200;
var height = 100;
window.open(page,name,'width='+width+', height='+height+',location=yes,menubar=no,resizable=no,toolbar=no,scrollbars=yes');
EDIT
In my webapp I use the following function for opening windows. It should work in all browsers.
function wopen(url, name, w, h, scrollb) {
scrollb = typeof(scrollb) != 'undefined' ? scrollb : 'no';
w += 32;
h += 96;
wleft = (screen.width - w) / 2;
wtop = (screen.height - h) / 2;
var win = window.open(url, name,
'width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' +
'location=no, menubar=no, ' +
'status=no, toolbar=no, scrollbars=' + scrollb + ', resizable=yes');
// Just in case width and height are ignored
win.resizeTo(w, h);
// Just in case left and top are ignored
win.moveTo(wleft, wtop);
win.focus();
}
Where are you making the call to window.open? IE9 will block calls if they're made during page load as part of its popup blocker. Chrome does something similar, but redirects new windows to the main tab (thus, putting the user in control). As for Firefox... check your FF popup blocker settings.

Why is Firefox 6 ignoring my height, width, top and left settings in javascript window.open?

Can anybody see what's wrong with my code? It behaves properly in IE but firefox 6 seems to ignore any height or width settings that I pass through to the javascript window.open call. I can't see anything obviously wrong with it but javascript isn't my first language so I may be making a noob error somewhere in this.
The purpose of this function is to open an 800x600 window centered on the screen and displayed modally in both IE and Mozilla family browsers.
<html>
<head>
<script language="javascript" type="text/javascript">
function openWindow(pageURL,Title,w,h)
{
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
if (window.showModalDialog) {
window.showModalDialog(pageURL,Title,'dialogWidth:' + w + 'px,dialogHeight:'+ h + 'px,dialogTop:'+ top + 'px,dialogLeft:' + left + ',resizable=no');
} else {
window.open(pageURL,Title,"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes,resizable=no,modal=yes, copyhistory=no,width=" + w + ", height=" + h + ", top=" + top + ", left=" + left)
}
}
</script>
</head>
<body>
Launch
</body>
</html>
Just to clarify a bit, the function is designed to test for the presence of ShowModalDialog (presuming that only IE supported it) and fall into the proper window.open branch in everything that supports the W3C window.open command which implements the "Modal" option. The idea being that if ShowModalDialog was implemented then it would use that otherwise use the window.open with the "Modal" option.
Semi-colons, not commas, in showModalDialog:
<html>
<head>
<script language="javascript" type="text/javascript">
function openWindow(pageURL,Title,w,h)
{
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 2;
var options;
if (window.showModalDialog) {
options = 'dialogwidth:' + w + ';dialogheight:'+ h + ';dialogtop:'+ top + ';dialogleft:' + left + ';resizable=no';
console.log(options);
window.showModalDialog(pageURL, Title, options);
} else {
options = "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes,resizable=no,modal=yes, copyhistory=no, width=" + w + ", height=" + h + ", top=" + top + ", left=" + left;
console.log("window.open options: " + options);
window.open(pageURL, Title, options)
}
}
</script>
</head>
<body>
Launch
</body>
</html>
Is showModalDialog() a valid member of window? I can't find it in the documentation.
Edit: Just did a quick Google search. showModalDialog is not a W3C standard and is not implemented in Firefox.
Edit: I'm wrong. Firefox caved and started supporting it.

How to move an image to the mouse position in html/javascript?

I'm getting slowly back to javascript and I'm a bit lost on basics.
I just want to move an image to follow the mouse position.
Here is a simple code I've been tweaking for some time without any success :
<html>
<head>
</head>
<body>
<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>
<script lang="javascript">
function updateAvatarPosition( e )
{
var avatar = document.getElementById("avatar");
avatar.x = e.x;
avatar.y = e.y;
// alert( "e( " + e.x + ", " + e.y + " )" );
// alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}
document.onmousemove = updateAvatarPosition;
</script>
</html>
It looks a lot like some tutorials to do this very thing.
What I don't understand is that using the alerts (I don't know how to print in the browser's javascript console) I see that avatar.x and y are never changed. Is it related to the way I've declared the image?
Can someone point me what I'm doing wrong?
I think that you don't want to set x and y, but rather style.left and style.top!
avatar.style.left = e.x;
avatar.style.top = e.y;
There is no x and y property for avatar - you should use 'top' and 'left' instead. Also, move the var avatar = document.getElementById("avatar"); declaration outside of the function, as you only need to do this once.
<html>
<head>
</head>
<body>
<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>
<script lang="javascript">
function updateAvatarPosition( e )
{
var avatar = document.getElementById("avatar");
avatar.style.left = e.x + "px";
avatar.style.top = e.y + "px";
//alert( "e( " + e.x + ", " + e.y + " )" );
//alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}
document.onmousemove = updateAvatarPosition;
</script>
</html>
avatar.style.top = e.clientY + 'px';
avatar.style.left = e.clientX + 'px';

Categories