Force a URL to open in a new tab - javascript

I have a webpart on a site that allows you to insert a "Show more" link to an external page that expands on the information displayed in the webpart. Unfortunately this option only takes a regular URL as the value for the link, it doesn't let you construct the HTML link itself. I need this link to open in a new tab but since I only get to put the URL in, I can't use the normal target="_blank" HTML code. Is there a way to craft the URL itself to force a new tab?

In javascript:
window.open("url");
Or adding the attr:
document.getElementById("theLink").setAttribute("target", "_blank");
With the following html
<a id="theLink" href="url">

If you cannot modify any part the a tag, you can use jquery.
The following script will try to open all links on a different tab/window:
$("a").on("click",function(){
event.preventDefault();
window.open($(this).attr('href'),'_blank');
});
NOTE:
Make sure you read this answer

Related

opening a new window based on the current url of the page

So ostensibly I'm trying to make a button or a link who's target is contingent on the current page's URL. I'm working on a Wordpress portfolio site that opens up different projects in an Ajax window, but I also want to be able to link to the separate project page from that window. For instance, if I click the thumbnail for a project titled "Blue" it opens up the project in the ajax window and the url changes to "www.website.com/#blue." Incidentally, the url of the corresponding project page would then be "www.website.com/projects/blue". The idea is to hardcode the button into the Ajax window and write a script that generates the correct URL for the project page so my client doesn't have to copy-paste the code for the button and update the target URL every time she posts a project. This is what I came up with, but I'm not great with Jquery or Javascript and I think something might be wrong with my syntax or the structure of the script. Right now, nothing happens when I press the button.
First it splits the url at each "/" and creates an array from the different strings, then it removes the "#" from the unique string, and opens a new window with the new address.
EDIT There were some syntax errors, but it's still not working. Any thoughts on this new version:
$(".comment_button").click(function(){
var parse_url = window.location.href.split('/');
var project_name = parse_url[2].replace("#", "");
window.open("http://www.balletinform.com/projects/" + project_name);
});
Tried using a element ?, with target="_blank" attribute ?
<a id="blue" href="www.website.com/projects/blue" target="_blank">blue</a>
If I understand correctly, what you want to get is the #blue part of the url.
If so, you can use window.location.hash.
Your function will then looks like window.open("http://www.balletinform.com/projects/" + window.location.hash.substring(1));
Your current function was setting project_name to "www.balletinform.com" ([0]=>"http:"; splitted(/); [1]=>""; splitted('/'); [2]=>"www.balletinform.com"; splitted('/'); [3]=>"#blue").
So an alternative solution would have been var project_name = parse_url[parse_url.length-1].replace("#", "");
var new_url=""+(window.location.href).replace('#','projects/');
window.open(new_url);
Try replacing # with 'projects/'

Retain a javascript link when the context menu is used

I have the following link that opens a page in a new tab (in most browsers subject to the users configuration) provided that javascript is enabled and some conditions are met.
<a href="../scripts/no-javascript.htm" target="nojs" onclick="openWin(url,name); return false;">
href="../scripts/no-javascript.htm" is included for users who don’t have javascript enabled or where the conditions are not met (no-javascript.htm explains why). This can’t have the same url or name as the ones included with openWin(url,name).
Everything works fine except that if the user right clicks and selects “Open link in new tab/window” from the context menu they get taken to no-javascript.htm.
Is there any way I can have this format and still have the user go to openWin(url,name) when they use the context menu?
Thanks.
You don't have to use onClick. Just change the link with JS and if the user disables it you get the nojs page.
HTML
<a id="the-link" href="../scripts/no-javascript.htm" target="nojs">
Javascript
document.getElementById("the-link").href = "../new_link.htm";
JSFiddle example
Yes. (I'm assuming jquery here)
<a id='nojs' href="../scripts/no-javascript.htm" target="nojs" onclick="openWin(url,name); return false;">
<script>
if (!conditionsmet) {
$("#nojs").attr("href", "http://something.else");
}
</script>

How do I open a link in the same window and tab using the onclick event?

I have a page that has multiple divs. I want to get some information from my database to display in some of those divs and I also want it to be displayed as I click on a link to the home div.
I also need the page to be refreshed or reopened in the same window (not in a new page or tab). Last of all, I need the page to be in the home div.
I tried the code below and it didn't work:
<a href="#home" onclick="window.open('index.jsp#home')" >home</a>
home
home
I used this and it worked
منوی اصلی
change your :
onclick="window.open('index.jsp#home')" >home</a>
to
onclick="parent.location='index.jsp#home'">home</a>
no need to reload.
like this?
<input id="but1" type="button" value="click"></div>
function loadIndex() {
window.location.href = "http://jsfiddle.net/Xotic750/u5nmt/";
}
document.getElementById("but1").addEventListener("click", loadIndex, false);
on jsfiddle
remember jsfiddle is in frames
The problem with changing location.href to the current URL with a hash value is that the page won't reload but jump to the given ID.
If you really want to jump to the home div then you can just jump with location.href='index.jsp' and edit your index file
to set location.href = '#home' on load.
If you want to be able to pass information across to the newly loaded page (to provide a specific id) you could use the query string instead, e.g. to jump page use location.href = 'index.jsp?loaddiv=foo
Then once the page loads read the query string and use the value to jump to the requested div, e.g.
location.search = '#foo'
For details on extracting values from the query string see this question.

How to implement go-to javascript links? (plus highlight)

Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?
You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!
Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.
The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.

What is the difference between these two HTML anchors?

I tried to use Link Checker to find any broken links, but the second one is not included, the displayedPage.html shows 404 error, but it will not show in the Link Checker's report. What is the difference between the two <a></a>? Why wasn't the second one being checked as a link?
<a href="showpage.go?page=mypage&room=yours">
<span>my own room</span>
</a>
second:
<a onclick="javascript:window.open('my/displayedPage.html', '',
'width=590,height=450,scrollbars=no,resizable=no'); return true;"
href="javascript:void(0)">Show Me</a>
The second one does not have an href attribute that can be checked with the link checker you are using.
Presumably, the program you are using does not understand the javascript: protocol and/or ignores any other protocols than http and ftp.
It seems that your tool ignores javascript links. The second link is not a pure html link, it's a link created by calling javascript.
The second isn't a valid link, it requires javascript in order to work, something the link checker probably isn't checking (it is doing essentially static analysis I guess).
You should always have the href set to the link you want to open and attach javascript enhanced behavior, something like:
<a onclick="window.open(this.href, '',
'width=590,height=450,scrollbars=no,resizable=no'); return true;"
href="my/displayedPage.html" target="_blank">Show Me</a>
because in second one browser just executes javascript when you click this link.
this script is opening link in new window with given params
The Link Checker doesn't know javascript

Categories

Resources