JavaScript

Master JavaScript! A Complete Guide to Opening Custom-Sized New Windows with window.open

 

This article introduces how to use JavaScript’s window.open method to open a new browser window with a specified size. Previously, we introduced a method for displaying pop-ups as modals within a page, “How to Display a Modal with JavaScript [No Plugins, No jQuery]
“. This time, we will take a slightly different approach by opening a page in a separate window with a specified browser size instead of displaying it within the page.

Contents
  1. How to Write CSS for Opening Pages in a Separate Window
  2. Setting the Button in HTML
  3. Using window.open in JavaScript
  4. Demo Page for Opening Pages in a New Window with Specified Browser Sizes
  5. Conclusion

How to Write CSS for Opening Pages in a Separate Window

First, let’s start with the CSS applied to the click button used to open a new window. Below is the CSS for the click button (.clk) that displays a separate window. This part involves design, so feel free to modify it as needed.

<style type="text/css">
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
padding: 0;
margin: 0;
overflow-x: hidden;
line-height: 1.8em;
text-align: center;
}
h1{
font-size:26px;
text-align:center;
font-weight:normal;
padding:10px 0 20px 0;
line-height: 1.2em;
}
.clk{
width: 200px;
height: 50px;
margin: 0 auto;
background-color: #cccccc;
font-weight: bold;
text-align: center;
line-height: 50px;
cursor: pointer;
}
</style>

Setting the Button in HTML

Next, configure the click button (class="clk") in HTML. Clicking this button calls the wopn() function, which opens a new window.

<h1>Click below to open a page with a width of 500px and a height of 500px in a new window.</h1>
<br>

<div class="clk" onclick="wopn()">Click Here</div>

Using window.open in JavaScript

The JavaScript code that actually opens a new window is as follows. Here, a page from https://dad-union.com/ is opened in a new window with a width of 500px and a height of 500px. The parameter “windowname” specifies the name of the new window, which can later be used to manipulate the window.

<script type="text/javascript">
function wopn() {
window.open("https://dad-union.com/", "windowname", "width=500,height=500");
}
</script>

Demo Page for Opening Pages in a New Window with Specified Browser Sizes

A demo page where you can try this feature is also available. Please give it a try!

Demo for Opening Pages in a New Window with Specified Browser Sizes

Conclusion

In this article, we introduced how to use JavaScript’s window.open method to open a page in a new window with a specific size. This technique is useful for everyone, from coding beginners to advanced users. By leveraging this method, you can provide a different user experience. If you have any questions, feel free to ask in the comments. Stay tuned for more helpful information in the next article!

※ Use at your own discretion when copying. Do not reuse the Google Analytics tags within the head tag of the demo page.

window.open
RELATED POST