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

To open a link 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

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

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

You can also download a sample HTML page 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.