We have a website with multiple links to a web application. The intended behaviour is that the first click on any of the link should open the web application in a new tab, any subsequent click should open the web app in the same new tab.
We do this because our users only want one instance of the web app open at the same time.
This works with adding the targetattribute to the links:
<a https://example.com" target="webapp-tab">Link 1</a>
<a https://example.com" target="webapp-tab">Link 2</a>
But our CMS automatically adds rel="noopener noreferrer" to all links, so the links will look like this:
<a https://example.com" target="webapp-tab" rel="noopener noreferrer">Link 1</a>
<a https://example.com" target="webapp-tab" rel="noopener noreferrer">Link 2</a>
The problem is that this changes the behaviour. Each click on any of the links will now open a new tab.
Is there a specific reason why the behaviour changes? From what I understand the difference should only be that no referrer and opener information will be sent with the request, but why does it open in a new tab?
Is there anything I can do to keep the original behaviour even if rel="noopener noreferrer" is added to the links.
but why does it open in a new tab?
Seems to be specified that way, https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types says:
Note that when noopener is used, nonempty target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab.
My guess - with a different tab name specified by the application itself, there’s probably concerns that some sort of info that is not supposed to leak, could leak nonetheless - for example if a different script opened a tab with that name first, but without noopener - then it could have a reference to that tab, and still use that reference to access the contents later on, when the user opens a link that explicitly has noopener set.
Is there anything I can do to keep the original behaviour even if rel="noopener noreferrer" is added to the links.
That would likely undermine the security this feature is supposed to provide in the first place.
You can try and have a JS run over your document after it is loaded though, and have it remove the rel attribute from those links, resp. remove the noopener part from its value.
Then you would of course not get any of the “protection” this feature provides, but opening the links all in the same tab should still work.
Edit: A simple way to set the attribute value to an empty string for all links that have this particular target set, would be
document.querySelectorAll('[target="webapp-tab"]').forEach(function(e) { e.rel = ''; } )
(Make sure to execute that after the document has loaded, of course.)
Related
I want to put a link to a external page, but when I click on the link, which is meant to open a new tab, the original tab gets refreshed too while opening the new tab, I want to stop the refreshing since it has a session open and refreshing it leads to the login form of my page, is there any solution to this?
<a style='text-decoration: none;' target="_blank" href="(link to
the external web page)" >Visit</a>
I've been searching and I just can't find a way to fix this, not sure if I missed something or if I'm not searching with the right words, is just a normal <a href='extlink'> link that leads to another web page
I were told that could be a javasccript attached to the link, and that was the issue, I was using a class that refreshes the tab onclick without realizing,thanks for the suggestion
I have been running a localhost website with react.js while I am building a website and when I am trying to link to an external site (e.g. youtube) it ends up going to a link like this:
http://localhost:3000/www.youtube.com
while I am trying to go to:
https://www.youtube.com
I am using this to get my link:
<a href='youtube.com' target='_blank' rel='noreferrer'>YouTube</a>
You need to specify the protocol, or put // at the start of the href attribute. For example:
Try using a protocol like http:// or // to external links like this :
<a href='https://youtube.com' target='_blank' rel='noreferrer'>YouTube</a>
See this good answer on SO : https://stackoverflow.com/a/8951636/6028607
Try this:
<a href='https://youtube.com' target='_blank' rel='noreferrer'>YouTube</a>
It's easy to use HTML to open a link in a new tab. You just need an anchor () element with three important attributes:
The href attribute set to the URL of the page you want to link to.
The targetattribute set to _blank, which tells the browser to open the link in a new tab/window, depending on the browser's settings.
The rel attribute set to noreferrer noopener to prevent possible malicious attacks from the pages you link to
try using this
youtube
So, I started learning HTML few days ago, it's really easy and I understand those basics, but I didn't found the thing I currently need... So, I made a Link on my website, and when I press that link it will go to my site for example if I click "Start" it will go to "_blank" where the new things comes. So when I press that link to go there, how do I make the code that will load in that new tab, I still don't understand it. Hope you understand what I want, thank you for your help.
target="_blank" Opens the linked document in a new window or tab
target="_self" Opens the linked document in the same frame as it was clicked (this is default)
target="_parent" Opens the linked document in the parent frame
target="_top" Opens the linked document in the full body of the window
Source: https://www.w3schools.com/tags/att_a_target.asp
The tag defines a hyperlink
Consider this example,
Visit W3Schools.com!
The "target" attribute specifies where to open the linked document, it can take any of the values in (_blank, _parent, _self, _top, framename) when it's value is '_blank' then the hyperlink will open in the new Tab.
Then "href" attribute will consist of the actual hyperlink, that is a URL that will open in the new page.
As you want a hyperlink for your own website, you need to give a link that works & would be served by your web server (Fro Ex., Apache). You need to put the web pages in the websever var/www/ folder if your server is linux with Apache webserver. Similarly. If you give any other website link as href, then that web page will be loaded.
I am working on a project using socket.io. I want to give user some links to download a file as
<a href="<path>" >Link Name</a>
When I click on link to download file, my socket gets disconnected.
When I use this
Link Name
it works fine. Any reason why this happens?
When you follow a link within the same window, the current page's environment gets completely torn down, including the entire JavaScript environment in which your code (and socket.io's code) is running. That's why it does this when you click a link to a new page within the current window, but not when you open a new window (target="_blank").
You'll want to look at the various single-page-application techniques, which mostly involve swapping content into the current page using ajax (and updating the hash so the URL is different) without loading an entirely new page into the window.
You can try to target downloads to a hidden iframe. This would prevent page reloading:
<iframe id="downloadIframe" name="downloadIframe" style="display:none;"></iframe>
Link Name
We specify id as well as name for iframe for cross-browser behavior.
I have inspected some sites and they have a pound(#) sign in the url. What does it do?
<a href="#" >Link name</a>
It's a "fragment" or "named anchor". You can you use to link to part of a document. Typically when you link to a page, the browser opens it up at the top of the page. But you link to a section half-way down, you can use the fragment to link to that heading (or whatever).
If there is no <a name="whatever"/> tag within the page, then the browser will just link to the top of the page. If the fragment is empty, then it will also just link to the top of the page.
For a fragment only Link name, then that's just a link to the top of the current page.
You often see that kind of link used in conjuction with javascript. Standards compliant HTML requires a href attribute, but if you're planning to handle the request with javascript then "#" serves as a reasonable place holder.
... just to add a few extra useful tips.
You can access and change it with document.location.hash in JavaScript.
It can point to a named anchor (e.g. <a name="top"></a>) or to an element with a corresponding id (e.g. <div id="top"></div>).
Seeing one on its own (e.g. popup) generally means a link is being used to run JavaScript exclusively. This is bad practice.
Any a element should have a href that points to a valid resource. If one does not exist, consider using another element, such as button.
The pound sign (#) indicates to locate an anchor on the page. For example, if you include this somewhere on the page:
<a name="foo"></a>
or, more recently:
<div id="foo">*part of page*</div>
and then you click on a link on the page that has the href #foo, it will navigate to the anchor with the name or div with the id foo.
However, if you just have the href #, it will lead to the top of the page.
# indicates a link to an anchor.
I thougt I'd also mention something else:
Using '#' as the href for a link that activates JavaScript is bad because it scrolls the page to the top - which is probably not what you want. Instead, use javascript:void(0).
This links back to the page itself. It's often used with links which actually run some JavaScript.
I think most of the posters here forgot how to use Internal Links.
A typical <a> element uses an href attribute to link to an external URL/URI (website). But most new developers do not realize you can also link to internal sections of your web page by using a "#" and an identifier instead. The easiest way to do this cross-browser, is using the following HTML:
This page link...
Go to Section 1
...goes to this page location.
<a id="section1" name="section1"></a>
The "#section1" href value is called a "fragment identifier" and will appear in your browser's url when you click the link. Your page will then look for this identifier in your HTML page and automatically scroll down the page to it.
Notice I have used the anchor <a> tag as my receiver to the link. Traditionally this is how most web pages used to use these types of page links. Using anchors you avoid having to rename existing elements. It is also semantically correct and a better way to manage these types of bookmarks. But....it's ok practice to use a <div> or other HTML element with an id and name matching attribute assigned as the bookmark for the fragment identifier.
I like to use both id and name attributes with the fragment identifier, as HTML5 often does not support the name attribute on some elements, while id may not be recognized for the page marker identifier in older browsers.
This shortened, nameless version below is often used by developers as a default URL "stub" for an unknown URL added later to an anchor, to trigger a page refresh, or enable a link but let a Javascipt method capture the click event and route off somewhere else. This makes the "#" a nice fallback should the Javascript piece fail. It then becomes a nice Javascript-free refresh link. The "#" can also be a useful URL "filler for the "href" value when a missing or blank URL on an element might otherwise trigger some problem or style:
Go to the Top
The specific question was "I have inspected some sites and they have a pound(#) sign in the url. What does it do?"
An example is then given:
<a href="#" >Link name</a>
A consistent valid answer is given for jumplinks (whatever you want to call them) however the CSS :target psuedoselector would absolutely makes use of the hash in a URL as well.
It doesn't change the answers. However gives another use case I thought would be valuable, to not belabor, see the below excellent link which explains:
However, https://css-tricks.com/on-target/