What javascript would I need to open two web pages at the same time and close the previous tab?

Question

I'm working on an exam project where students will click on an option which would open two tabs with different case studies and close the previous tab but I don't have experience with Javascript and I'm unsure how to approach the problem.

It's built on Wordpress and I've tried using various plugins but all of them have failed. I have managed to get links to open in new tab (no different to but not close the previous one or open two tabs with individual webpages.

We're using anchor tags currently in HTML and putting the javascript inline but I think we might need to tackle it differently, potentially through calling a javascript file.

We want to use Javascript as it'll allow us to add code to track users when they click on the link.

The page layout is very basic with one link on it (it has a pageview conversion tracking code to track the number of students taking the exam) so there's very little chance the script will conflict with anything else, this is why the previous tab should close automatically to avoid distraction

<a href="http://www.example.com" onclick="window.open('https://www.example.com');return false">Example</a>

It opens the webpage in a new tab but I'm unsure how to make it open two new tabs (different URLs) and close the previous tab.

(I noticed there are similar questions asked but none address closing the previous tab)

Answer 1

To open multiple pages at once you can use the following code.

window.open('url1.com');
window.open('url2.com');

How to make a link open multiple pages when clicked

To close the current tab/window use

window.close();

How to close current tab in a browser window?

To do all 3 actions within the inline eventhandler like your example code, you can call window.open twice with different urls, window.close(), and then return false.

Answer 2

If you want to perform all 3 of those actions at the same time then you may want to create a function that does all three, and then call that function with the onclick event.

<a href="http://www.example.com" onclick="myFunction()">

Then you will define the function in a JS file and link it to your html. Something like this:

<script src="myscripts.js"></script>

The JS file (in this example) would be named myscripts.js and would look something like this:

function myFunction(){
  window.open('url1.com');
  window.open('url2.com');
  window.close()
}

Unfortunately, you are unable to close windows using Window.close() if that window was not opened by a script, so that is another issue. Without more information on how the user gets to this page in the first place, I can't really suggest a workaround.