The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Opening Link to a New Tab
Animation Sigmabear
post May 10 2021, 12:12 AM
Post #1





Group: Members
Posts: 2
Joined: 9-May 21
Member No.: 27,933



Hi guys, I am new to the forum

I am stuck with a certain part of our website and found this place looking for answers.

So my plan is quite simple, I need to click a link and it should open a new browser tab instead of loading it on the main tab.

I have watched multiple tutorials on Youtube. The code is very simple and it works. I applied it to my code:

CODE
<a onclick="window.open(location.href='vrdemo/vrdemohouse.html',target='_blank')">VR 360 tab test</a>
<a onclick="location.href='vrdemo/vrdemohouse.html'">VR 360</a>


1st link is the new test link. 2nd is the old one, where clicking it will load the page on the current tab.

The problem I have with the first one is, when I click, it opens a new tab BUT ALSO loads the page on the current. What am I getting wrong here?
The code and tutorials are so simple and straight forward I am lost at what I got wrong.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 10 2021, 09:54 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You've mixed two different methods up. I'm surprised by the result. I wouldn't have expected it to work at all.

You've mixed these two up.

This opens the link in a new window/tab.
CODE
<a onclick="window.open('http://google.com')">Link text</a>


This loads the linked to page in the current window.
CODE
<a onclick="location.href='http://google.com'">Link text</a>


And below is the correct way of doing what you want.
CODE
<a href="http://google.com" onclick="window.open(this.href);return false">Link text</a>

You have the URL in the href attribute. That way the link works normally if JS isn't available. If you don't do it this way and rely totally on JS the link will be dead without JS. The 'return false' bit stops the link from being followed if JS is available. Without that you'd get the same as you have now - the page would load in both the new and the old window.

But HTML 5 allows target blank again. So you don't need to use JS if you don't want to.
CODE
<a href="http://google.com" target="_blank">Link text</a>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Animation Sigmabear
post May 11 2021, 10:31 PM
Post #3





Group: Members
Posts: 2
Joined: 9-May 21
Member No.: 27,933



QUOTE(pandy @ May 10 2021, 09:54 AM) *

But HTML 5 allows target blank again. So you don't need to use JS if you don't want to.
CODE
<a href="http://google.com" target="_blank">Link text</a>



thanks! yes this works perfectly!

CODE
<a href="vrciavatti/vrciavatti.html" target="_blank">VR 360</a>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:42 AM