How to open a link in a new browser window, but not a tab

MikeP

3 years ago

5 comments

Currently I'm working on linking a Web Help system with my website. I can open a specific topic in a new tab in the web browser by using a hyperlink like this:

<a href="https://www.helpsmith.com/webhelp/topics/help-project.htm" target="_blank">Get Help</a>

But how can I force the web browser to open the link in a new instance of the browser program?

PS: I believe that would be easier for the users of my web app (with low computer skills) who need to access a help topic from a specific webpage.

Comments

Eugene

3 years ago

Using Window.Open() method

To open a link in a new window of the web browser, you can use the window.open() method (from JavaScript code).

You can find the description of the window.open method at:

https://www.w3schools.com/jsref/met_win_open.asp

Eugene

3 years ago

Sample JavaScript Code

Here is sample JavaScript code (based on jQuery) that opens links with the attribute class="new_window" in a new browser window.

1. Include jQuery to the `<head>` section of your webpage by adding the line below:

2. Add the following code into the `<body>` section of your webpage

<script>
    $(document).ready(function() {
        $(document).on('click', '.new_window', function() {
            // get clicked hyperlink element:
            // <a href="..." class="new_window">
            var element = $(this);

            // get href value of the clicked hyperlink
            var link = element.attr('href');

            // open link in a new window
            // for more options, see:
            // https://www.w3schools.com/jsref/met_win_open.asp
            window.open(link, 'my_window', 'toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=300,width=1500,height=800');

            // disable default 'click' event for the hyperlink
            return false;
        })
    });
</script>

3. Add a hyperlink linking to a topic:

<a href="https://www.helpsmith.com/webhelp/topics/help-project.htm" class="new_window">Get Help</a>

Eugene

3 years ago

Defining the window position and size

Please note that the window.open() method allows you to specify the desired position and the size of the browser window. For example, see the sample code above.

Eugene

3 years ago

Sample HTML File

You can also download a sample HTML file that demonstrates how it works in the attachment below.

MikeP

3 years ago

Perfectly, that's exactly what I need.

Many thanks for your help!

How to open a link in a new browser window, but not a tab

Comments

Using Window.Open() method

Sample JavaScript Code

1. Include jQuery to the <head> section of your webpage by adding the line below:

2. Add the following code into the <body> section of your webpage

3. Add a hyperlink linking to a topic:

Defining the window position and size

Sample HTML File

Add a Comment

1. Include jQuery to the `<head>` section of your webpage by adding the line below:

2. Add the following code into the `<body>` section of your webpage