Home > Web Front-end > JS Tutorial > body text

How to Open URLs in New Windows with Specific Dimensions Using JavaScript?

Patricia Arquette
Release: 2024-11-04 04:53:29
Original
1042 people have browsed it

How to Open URLs in New Windows with Specific Dimensions Using JavaScript?

Opening URLs in New Windows with JavaScript

When creating a "share button" to share the current page, a common step is to open the current page's URL in a new window. While acquiring the current URL may be straightforward, defining the new window's dimensions can be challenging.

To specify the size of the new window, the JavaScript function window.open() should be used. The syntax for this function is as follows:

window.open("URL", "Window Name", "Window Features");
Copy after login
  • URL: The URL of the page to be opened.
  • Window Name: The name of the new window (optional).
  • Window Features: A comma-separated list of window features, such as:

    • location: Display the URL in the address bar.
    • height=570: Set the height of the window.
    • width=520: Set the width of the window.

To apply these features to a "share button", the following HTML and JavaScript code can be used:

<code class="html"><a onclick="window.open(document.URL, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');">
  Share Page
</a></code>
Copy after login

This code creates a link with the text "Share Page" that, when clicked, will open the current page's URL in a new window with a height of 570 and a width of 520, along with other features like a location bar, scrollbars, and a status bar.

The above is the detailed content of How to Open URLs in New Windows with Specific Dimensions Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template