How to force user to open in new tab?

Code Help HTML/CSS/JS
1

I’ve seen a lot of cool projects like Booogle (made by @GoodVessel92551) that require you to open in new tab before being able to use the website.
How do you do that?
And can you do it with only HTML, CSS, and JS?

2

You can open a link in a new tab by adding target="_blank" into your <a> tag:

<a href="https://link.to/url/" target="_blank">Open in a new tab!</a>

If this helped, please mark this as the solution so that we can close this topic. Thanks!

3

That does not force the user.

4

Always add rel="noopener noreferrer" to links that open in new tabs. This is a crucial security measure.

<a href="https://link.to/url/" target="_" blank rel="noopener noreferrer">Open in a new tab!</a>

This makes it so that if the user clicks the link, the browser will open it in either a new tab (most likely) or a new window (depending on the browser and settings).

4 Likes
5

I know, but that does not force the user. @TinyMooshmallow was asking to force the user, which means that you’d have to check if the repl is embedded.

6

Use @anon40284853’s method if you are linking to an external website, but if you are linking it to your website, it’s okay to save yourself a bit of your time and use my method instead.

1 Like
7

Clicking the link on the repl.co website and inside the Repl does open the URL in a new tab.

8

:woman_facepalming:
That doesn’t force the user! (Sorry if I’m being rude here, I have anger issues) Did you even read my post??? :sob:

9

Then you will have to disable wheel-clicking the tab, which can be done by adding onmousedown="(event) => { if (event.button === 1) { event.preventDefault(); }}" the tag.

10

You can do it like this

if (window.location !== window.parent.location ) {
  // code
}

Note that the code is triggered when it’s embedded.

2 Likes
11

I’m just gonna elaborate on @OmegaOrbitals’s code real quick:

if (window.location !== window.parent.location ) {
  window.location.replace("THE_URL_YOU_WANT_THE_USER_TO_GO_TO");
  // OR
  window.location.replace(/* the window.location OR window.parent.location */);
}

You could also use meta tags:

<meta http-equiv = "refresh" content = "2; url = URL" />
2 Likes
12

Hmm, I’m not sure window.location.replace is the right thing to do here. I’m pretty sure it’s window.location = "LOCATION". Also, that won’t do anything as it’ll only redirect it inside the iframe, and the website remains there. The right thing to do here would be window.open("LOCATION")

@lightdefusion

3 Likes
13

Yes that is probably the best thing to do
Now that I think about it, if the user has pop-ups/redirects disabled that doesn’t work right?

1 Like
14

This is true. As a note, if the browser has them disallowed by default, then data:text/html pages cannot open one unless the browser defaults are changed, as you cannot set permissions on data pages.

15

But that’s why you’re supposed to put a button.

1 Like
16

Try this:

<a href="https://example.com" target="_blank">Example</a>

If this worked, mark this as the solution so the topic can close.

17

Savardo already has that answer.

18

No, first, it has to say target=“_blank” and you do not need the other part.

19

Your way still works either way.

20 
if (window.location == "https://example.example.repl.co") {
continue;
} else {
alert("Open this site in a new tab!")
}

I hope you find this code helpful!