Javascript Opening New Window

Question 1

I'm sorry if this question has been asked before,

I'm just curious with my code:

function showPopup(file,wdth,hght) {
//height = 768 width = 1024
var w = wdth;
var h = hght;
var winWidth = w+'px';
var winHeight = h+'px';
var winTop = (screen.height/2)-(h/2);
var winLeft = (screen.width/2)-(w/2);
window.open(file,'Upload','top='+winTop+',left='+winLeft+',width='+winWidth+',height='+winHeight+',toolbar=1,resizeable=1,statusbar=1,scrollbar=1,location=1, fullscreen=1');

}

Then I run it with HTML:

<input type="button" onClick="showPopup('preview.php', '1000', '1000')" value="Priview">

The opening window still donsn't have toolbar, statusbar, scrollbar, etc as I set inside my function.

Anybody help me what's wrong with my code? Thx

Question 2

add console.log('top='+winTop+',left='+winLeft+',width='+winWidth+',height='+winHeight+',toolbar=1,resizeable=1,statusbar=1,scrollbar=1,location=1, fullscreen=1') and show us what pops out.

Question 3

I'm sorry Joe, what do you mean console.log? If you mean error log, it doesn't give any error.

Question 4

If you're using Chrome, hit F12 for the console. In Firefox there's an inspector somewhere. console.log will output to that console.

Question 5

Pressing F12 just show me the CSS and I can't do nothing from the console, i've try remove all my css to make sure it clean from effected styling. Unfortunately, it doesn't work. However i've found some issue due to this issue. Finally i just make a simplification (trick) with css to show the scrollbars (Although I know this isn't an effective solution). Actually I just need scrollbars.

Question 6

<html>
 <head>
 <title>Test Website</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script>
 function showPopup(file,wdth,hght) {
 //height = 768 width = 1024
 var w = wdth;
 var h = hght;
 var winWidth = w;
 var winHeight = h;
 var winTop = (screen.height/2)-(h/2);
 var winLeft = (screen.width/2)-(w/2);
 window.open(file,'Upload','top='+winTop+',left='+winLeft+',width='+winWidth+',height='+winHeight+',toolbar=1,resizeable=1,statusbar=1,scrollbar=1,location=1, fullscreen=1');
 }
 </script>
 </head>
<body>
 <input type="button" onClick="showPopup('preview.php', '500', '500')" value="Priview">
</body>
</html>

Question 7

Thank you Paul.. I've try to remove 'px' from the units and try following you code, but it dosen't work. Where is exactly my wrong code? Make me frustated

Question 8

Glad to help. The code above (edited) works perfectly for me! (tested in FF and Chrome)

Question 9

Just found the following accepted answer in another SO post: Unfortunately Chrome only supports a small set of window features when using window.open. If you believe that this is a bug or an issue you can file it at crbug.com. (stackoverflow.com/questions/2568064/…)

Question 10

Just found this for FF in a related SO post: This should do it: window.open("example.com", "name", "scrollbars=1,width=100,height=100"); but note that Firefox will only show scrollbars when the content is larger than the window. To force Firefox to always show a scrollbar (like Internet Explorer does) you need this in the stylesheet of the HTML that's being shown in the popup: html { overflow: -moz-scrollbars-vertical; } (stackoverflow.com/questions/1163275/…)

Question 11

Another SO post saying that FF disabled adjusting the statusbar: stackoverflow.com/questions/2909645/… ... it honestly seems like the cross browser support might be iffy for this.

Question 12

the second parameter ('name') is 'Upload' - it should be '_blank'

or one of the other supported values mentioned here: http://www.w3schools.com/jsref/met_win_open.asp

Paul Calabro is also right, you do not need the "px" units.

Paul Calabro 1,9261 gold badge17 silver badges35 bronze badges · Accepted Answer · 2013-03-15 04:05:32Z

1

<html>
 <head>
 <title>Test Website</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script>
 function showPopup(file,wdth,hght) {
 //height = 768 width = 1024
 var w = wdth;
 var h = hght;
 var winWidth = w;
 var winHeight = h;
 var winTop = (screen.height/2)-(h/2);
 var winLeft = (screen.width/2)-(w/2);
 window.open(file,'Upload','top='+winTop+',left='+winLeft+',width='+winWidth+',height='+winHeight+',toolbar=1,resizeable=1,statusbar=1,scrollbar=1,location=1, fullscreen=1');
 }
 </script>
 </head>
<body>
 <input type="button" onClick="showPopup('preview.php', '500', '500')" value="Priview">
</body>
</html>

Share

Improve this answer

edited Mar 15, 2013 at 4:43

answered Mar 15, 2013 at 4:05

Paul Calabro's user avatar

Paul Calabro

1,9261 gold badge17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Plipus Tel

Plipus Tel Over a year ago

Thank you Paul.. I've try to remove 'px' from the units and try following you code, but it dosen't work. Where is exactly my wrong code? Make me frustated

2013年03月15日T04:25:48.773Z+00:00

Paul Calabro

Paul Calabro Over a year ago

Glad to help. The code above (edited) works perfectly for me! (tested in FF and Chrome)

2013年03月15日T04:42:27.98Z+00:00

Paul Calabro

Paul Calabro Over a year ago

Just found the following accepted answer in another SO post: Unfortunately Chrome only supports a small set of window features when using window.open. If you believe that this is a bug or an issue you can file it at crbug.com. (stackoverflow.com/questions/2568064/…)

2013年03月15日T04:47:47.72Z+00:00

Paul Calabro

Paul Calabro Over a year ago

Just found this for FF in a related SO post: This should do it: window.open("example.com", "name", "scrollbars=1,width=100,height=100"); but note that Firefox will only show scrollbars when the content is larger than the window. To force Firefox to always show a scrollbar (like Internet Explorer does) you need this in the stylesheet of the HTML that's being shown in the popup: html { overflow: -moz-scrollbars-vertical; } (stackoverflow.com/questions/1163275/…)

2013年03月15日T04:48:52.25Z+00:00

Paul Calabro

Paul Calabro Over a year ago

Another SO post saying that FF disabled adjusting the statusbar: stackoverflow.com/questions/2909645/… ... it honestly seems like the cross browser support might be iffy for this.

2013年03月15日T04:51:21.533Z+00:00

|

CollectivesTM on Stack Overflow

Javascript Opening New Window

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related