How to open a window in new tab with just href attribute? - javascript

Edit: The link above doesn't contain any answer that applies to this question. If the person who put it there actually read this question they would have realized this.
What's my best option for opening a link in either a new tab or new window when I only have control over the href attribute of an anchor tag?
We have a homegrown menu navigation system that someone before me built and it sets the href of the menu anchor links based on a url column in a database table. So I know there are much better ways to open a link in a new window than what I'm asking for and I wouldn't normally try this, but for now I just need to do it this way.
I've tried using:
javascript:window.open('http://www.goodwill.org')
That does work for opening the link in a new tab, however it changes the current tab to be a blank page except for the text [object], which obviously defeats the purpose.

You need to ensure that the JS expression in your link does not return a value:
javascript: void(window.open('http://www.goodwill.org'))

If you have access to the html, which you do by either html or js
HTML
<a target="_blank">

Related

What would be the easiest way to do a list of skills on a page that open in a popup?

I'm trying to list a bunch of skills on my website and have each of them open in a pop-up on click to give a little more info.
Basically, I want it to look like this, not as a button.
Image for reference
I've tried some codes from the internet but they either don't work or break my Wordpress theme.
The closest I've gotten was with this piece of code:
"Example code"
To open a link in a new tab as a popup, the easiest way is to :
<a target="_blank" href="#">Link</a>
target="_blank" is the attribute to have a link open in a new tab.
If these articles are in an array, you can return this array and create an element from each article in it and assign a click event to this element.

Dynamically load content preserving 'open in new tab' functionality

I am using javascript to dynamically load page content on my webpage.
I have a number of links, but they do not have href attributes. When the user clicks a link, they have a data-content attribute which is used as a key to load new content dynamically from a JSON file.
My links look something like this:
<a data-content="about">About</a>
This works perfectly well.
I know from a UX perspective, users may want to right click a link and load it into a new tab. This current way of doing things does not permit this behaviour.
One way around this would be to move the data-content attribute to the href attribute and add a # before. For example:
About
Right clicking on this link and loading in a new tab would open the URL
About
I could then use javascript to look for # in the URL and use the string after it as a key to find the content to load on the page.
When I make this change though - javascript no longer loads my new content.
So what are some ways of dynamically loading content onto a page whilst preserving the functionality of 'open in new tab

open url in new tab or reuse existing one whenever possible

Now I have a link
link
However, this always open up a new tab. I want the following effect
If the user already has a tab with the same URL, reuse that tab, and refresh if possible
Otherwise, open a new tab
How can I achieve this using JavaScript?
It's OK if there're only some browser-specific methods, so users of browsers without corresponding support will "fallback" to the always-new-tab way.
You can set specific window's name, in order to open reuse the tab. The problem is, as far as the href will be the same, it won't be reloaded. So you can't obtain the refresh part easily.
So, for instance, you can have:
link
link
In JS, you can actually obtain the same, using window.open. You could also use the url as target, so that you don't need to specify manually:
link
link
You could also generalize, and add a click listener to the document, in order to open some links in this way. Something like:
<div id="container">
link
link
</div>
<script>
document.getElementById("container").onclick = function(evt){
if (evt.target.tagName === "A")
window.open(evt.target.href, evt.target.href);
return false;
}
</script>
If the page are on the same domain, at this point you could probably trying to do an empiric refresh of the page as well.
setting up target="child" would refresh the current tab if already opened
ABcd
Defg

Opening a new tab in JS

Is it possible to open a new tab in JS?? I tried googling it but most answers were answered before about years that it was not possible then, so is it possible now?!
Thank in advance :))
another question if possible, can we open to separate Urls using the same tag? I mean to open 2 diff tabs when clicking on one hyperlink
Yeah. You could do this in Javascript using window.open('target.html','mywindow','width=400,height=200') added to the onclick event.
See this for more info.
Opening a new tab in modern browsers is the same as opening a link in a new window by setting the target attribute. With HTML you do this by:
Click me
(See HTML a target attribute)
With javascript you do the same by window.open(url, '_blank'...) but remember that most browsers will block this unless it is done on the onClick event, so opening a new tab automatically after some timer has gone off for example is not a good idea.
You can also use link text if it's a link that should open in a new tab.
If you wanted to open both pages at the same time you could always combine both of the techniques mentioned above.
Double Link
This will open the pages thispage.html and thatpage.html simultaneously.
dont forget to add the title attribute to your link as opening new windows/tabs without warning users is generally frowned upon. Something like;
title="Clicking this link will open two new tabs"
should keep the standardistas off your back.
Also, you may want to separate your onclick event from your html as again munging them all together really isnt best practice. If you are using jquery then assign the onclick event by inserting a small piece of JavaScript at the top of your page as such;
$(function(){
$('#the-link-id').click(function(){
window.open('thatpage.html');
});
);

Is it possible to copy, paste, open new window in javascript?

At the moment to get to an external link from our intranet, we have to copy the link, and paste the link into a new window. Is there any way we can achieve this in a single function in javascript?
Thanks
UPDATE:
When users login from outside the network, urls are changed. This is what we need to code for. I think I the following is applied twice, from server side and client side (this code is not editable):
s=s.replace(/location.assign\(([^;]*)\)/g,"location.assign(alter_url($1))")
s=s.replace(/location.replace\(([^;]*)\)/g,"location.replace(alter_url($1))")
if(s.match(/location\s*=\s*([^;]*)(;?)/)!=null&&s.match(/\.open\(.+,.+,.*location\s*=.+\)/)==null)
s=s.replace(/location\s*=\s*([^;]*)(;?)/g,"location=alter_url($1)$2")
s=s.replace(/location\.href\s*=\s*([^;]*)(;?)/g,"location.href=alter_url($1)$2")
s=s.replace(/window\.open\(([^,]*)(,.*)?\)/g,"window.open(alter_url($1)$2)")
s=s.replace(/\.src\s*=\s*([^;]*)(;?)/g,".src=alter_url($1)$2")
s=s.replace(/\.action\s*=\s*([^;]*)(;?)/g,".action=alter_url($1)$2")
s=s.replace(/\.innerHTML\s*=\s*([^;]*)(;?)/g,".innerHTML=alter_html($1)$2")
s=s.replace(/\.outerHTML\s*=\s*([^;]*)(;?)/g,".outerHTML=alter_html($1)$2")
Actually, the more I look at this, the more unrealistic it's becoming..
Right-clicking and choosing "Open in new window" doesn't work? Because if not, I'm not seeing a Javascript workaround working either. But:
You can open a new window with a specific URL (e.g., link) in Javascript easily enough:
window.open("http://stackoverflow.com");
And there are ways of getting the text that's selected in a page, to feed into that. All of which can be wrapped up into a bookmarklet so that the action becomes "select the text, click a link on the bookmark toolbar".
But if "Open in new window" doesn't work, I wouldn't expect that to work either.
You can use the window.open to open the links on a new window. In fact, you could use a bookmarklet to set the target to _blank on every link on the site, in case you can't access the application source code.
BTW, if you hold the Shift key when opening the link it will open on a new window.

Categories

Resources