HelpSmith Topics
Making Help Authoring a Pleasure To Do

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

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.

16

Comments

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

14

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:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

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>
18

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.

6

Sample HTML File

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

15

Perfectly, that's exactly what I need.

Many thanks for your help!

8

Add a Comment

Please Login or Register or leave comments.

Hello World
Lorem ipsum dolor sit amet
OK
Login
Nickname or Email:
Password:
If you do not have an account, you can register.