How to Open a Link in a New Window And Print New Window Using JavaScript




How to Open a Link in a New Window And Print New Window Using JavaScript

How to Open a Link in a New Window And Print New Window Using JavaScript

JavaScript is a useful way to open a link in a new window because you control how the window will look and where it will be placed on the screen by including specifications.

Syntax for the JavaScript Window Open() Method
To open a URL in a new browser window, use the Javascript open() method as shown here:

window.open(URL, name, specs, replace)

URL Parameter

Beyond opening a window, you can also customize each of the parameters.

For example, the code below opens a new window and specifies its appearance using parameters.

Enter the URL of the page you want to open in the new window. If you don't specify a URL, a new blank window opens:

window.open("http://crowdforthink.com", "_blank");

Name Parameter

The name parameter sets the target for the URL. Opening the URL in a new window is the default and is indicated in this manner:

  • _blank. Opens a new window for the URL.
  • Other options you can use include:
  • _self. Replaces the current page with the URL.
  • _parent. Loads the URL into the parent frame.
  • _top. Replaces any framesets that are loaded.

Specs

The specs parameter is where you customize the new window by entering a comma-separated list with no white spaces. Choose from the following values.

  • height=pixels. This specification sets the height of the new window in pixels. The minimum value that can be entered is 100.
  • width=pixels. This sets the width of the new window in pixels. The minimum value is 100.
  • left=pixels. This spec sets the left position of the new window. No negative values can be entered.
  • top=pixels. This sets the top position of the new window. Negative values cannot be used.
  • menubar=yes|no|1|0. Use this spec to indicate whether or not to display the menu bar.
  • status=yes|no|1|0. This indicates whether or not to add a status bar.

Some specifications are browser-specific:

  • location=yes|no|1|0. This spec indicates whether or not to show the address field. For Opera browser only.
  • resizeable=yes|no|1|0. Determines whether or not the window can be resized. For use with IE only.
  • location=yes|no|1|0. Indicates whether or not to display scrollbars. Compatible with IE, Firefox, and Opera only.
  • toolbar=yes|no|1|0. Determines whether or not to show the browser toolbar. Compatible with IE and Firefox only.

Replace

This optional parameter has only one purpose — to specify whether the URL that opens in the new window replaces the current entry in the browser history list or appears as a new entry. 

  • When true, the URL replaces the current browser entry in the history list.
  • When false, the URL is listed as a new entry in the browser history list.

Print New Window

Page print in JavaScript is a simple code in JavaScript used to print the content of the web pages.
The print() method prints the contents of the current window.
It basically opens Print dialog box which lets you choose between various printing options.

window.print()

var myWindow= window.open("http://crowdforthink.com", "_blank");
myWindow.print(); 

Final Result


Author Biography.

Lokesh Gupta
Lokesh Gupta

Overall 3+ years of experience as a Full Stack Developer with a demonstrated history of working in the information technology and services industry. I enjoy solving complex problems within budget and deadlines putting my skills on PHP, MySQL, Python, Codeigniter, Yii2, Laravel, AngularJS, ReactJS, NodeJS to best use. Through Knowledge of UML & visual modeling, application architecture design & business process modeling. Successfully delivered various projects, based on different technologies across the globe.



News & Blogs

04dd32c0108d23bf51249aeab490ad84.png

Get a head start with trending Nodejs developer...

To build and run applications, you need different types of runtime environments that help in seve...

99c65279a4f62ad85fb5b8b340077bb3.png

How to Integrate Payumoney Payment Gateway in L...

I am going to explain How to Integrate Payumoney Payment Gateway in Laravel 5. Most of thing are ...

045b052a4c56e8680d2177403a62bb23.png

Important Things You Need To Know About Agile D...

In 2001, a gathering of 17 programming engineers met and talked about another way of thinking in ...