Is there a way (I assume it would be with javascript) that I can have a checkbox or link on my page that will make all the links on my page have target="_blank"?
I want to have a checkbox that says something like "Open all links in new page/tab" on my site that when checked will change the target and unchecked will put it back to how it was.
jQuery example
$(function() {
$('#yourCheckoxId').toggle(function() {
$('a').attr('target', '_blank');
},
function() {
$('a').removeAttr('target');
});
});
You might want to try jQuery as an alternative to genuine Javascript
the actual code could look something like that:
$('a').attr(target, '_blank')
Modifying the target attribute of all the anchors on the page is merely a matter of getting all links, and setting their target properties one by one:
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
anchors[i].target = '_blank';
}
Related
I'm trying to inject js to loop through all the a tags in a page and remove the href so that they don't go anywhere when clicked.
For this issue, I can't use jquery. So I need to use it using vanilla js (pure js).
Here's what I have so far:
document.querySelectorAll("a").forEach(ele => {
var anchors = document.getElementsByTagName("a");
for(var i =0; i < anchors.length; i++)
{ var myLink = anchors[i].getAttribute("href");
anchors[i].setAttribute("href","");
}
});
I ran the code, but none of the href tags were changed. They are all still links. How to get all the a tags to not work as links?
I'm also open to other solutions, like turning the a tags into divs, or something else.
Setting the attribute to an empty string will result in the anchors pointing to the current page:
link
Remove the attribute entirely instead (and remove the unnecessary and unused outer loop).
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
anchors[i].removeAttribute("href");
}
link
link
or
for (const a of document.querySelectorAll('a')) {
a.removeAttribute("href");
}
link
link
Try this code
$( "a" ).each( function( index, element ){
element.removeAttribute("href");
});
I am trying to modify a site to make it open external links in a new tab.
Currently I have a loop which works fine except that it opens ALL links in a new tab which is not desired:
I have tried using filters but can't seem to get it to work properly.
<script>
document.addEventListener('DOMContentLoaded', function(){
let links = document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
links[i].setAttribute('target','_blank');
}
});
</script>
Maybe checking if the URL contains a Shopify handle or something along the line?
Thank you in advance!
You can check if the href attributes begins with http://, https:// or www. since those are the most common external links, all internal usually starts with /. (you can add an additional check if the href contains the domain name as well since it possible to have internal URL with the full URL)
So the code will become something like so:
document.addEventListener('DOMContentLoaded', function(){
const links = document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
const link = links[i];
const href = link.getAttribute('href');
if(href.match(/^((https?:\/\/)|(www\.))/) {
link.setAttribute('target','_blank');
}
}
});
Maybe something like this?
const links = document.querySelectorAll("a"); //get all <a> elements
links.forEach(el => { //loop trought all <a> elements
if(!el.href.includes(window.location.hostname)){ //if not this domain
el.setAttribute("target", "_blank");
}
})
/*just to show elements with target=_blank*/
[target="_blank"]{
color: green
}
other domain
this domain
Note: you don't need that document.addEventListener('DOMContentLoaded'... just put defer attribute on your <script> tag
To get only External links Open in new Tabs, you must use anchor’s property hostname, when its value not matching your “localhostname” string then overwriting anchor's property target default value "_self"(current browser content) to "_blank"(new tab) value, your script code will be:
<script>
document.addEventListener('DOMContentLoaded', function(){
let links = document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
if (links[i].hostname!="localhostname"){
links[i].setAttribute('target','_blank');
}
}
});
</script>
Take a look at the following JavaScript for me that opens a pop up window, please:
function openPopup(e) {
e.preventDefault();
window.open(this.href, "popupWindow", "width=600,height=600,scrollbars=yes");
}
var el = document.querySelector(".bbc-popup");
el.addEventListener("click", openPopup);
Here is a JSFiddle of it in action:
http://jsfiddle.net/dvadcgps/1/
However, when I include it on my page, the code doesn't work, and the link opens in the current tab. The only external JavaScript resources I rely on are jQuery (1.11.3) and Bootstrap 3, and those are both included within the above fiddle, to no effect.
What other reasons could there be for this code to not work?
Here is the full HTML code of the page, with all external resources included, for you to see how it stops working... the links that should open popups are behind the View Chairs' Builds button:
http://jsfiddle.net/e60y004n/1/
Working off Brian Ray's comment, I had to ensure the Event Listener was added to every element, as my current code was only adding it to the first.
Firstly, I add all the elements I want to be targeted to an array.
var chairPopup = document.getElementsByClassName("chair-popup");
I then loop through every element in that array, adding the Event Listener to each:
for (var i = 0; i < chairPopup.length; i++) {
chairPopup[i].addEventListener("click", openPopup);
}
The full code, with the function(), reads as follows:
var chairPopup = document.getElementsByClassName("chair-popup");
function openPopup(e) {
e.preventDefault();
window.open(this.href, "popupWindow", "width=300,height=1000,scrollbars=yes");
}
for (var i = 0; i < chairPopup.length; i++) {
chairPopup[i].addEventListener("click", openPopup);
}
In an answer that has since been deleted by it's author, they mentioned a need to change popupWindow to _blank within the window.open() function. I can confirm that this is needed, otherwise each link opens up in the same popup window.
window.open(this.href, "_blank", "width=300,height=1000,scrollbars=yes");
Let's say I have a single HTML page and it contains hundreds of links. These links will load in the same window when anybody clicks them.
I want it to open in another window. I know that I can use target for each link:
My Text1
My Text2
My Text3
Howeder, I'd prefer to use JavaScript if that's possible. Is it possible to do that with JavaScript, and if so, how?
Yes, it is. Use something like this:
var newtab = window.open('http://www.example1.com/', '_blank');
newtab.focus();
This may open in new tabs or new windows depending on the particular browser, but I don't know of a way to control that any more specifically.
EDIT
Or were you asking for a way to set the behavior for all links on the page? Then you can add the proper target to all of them when the page loads.
With jQuery: http://jsfiddle.net/b8hdv/
$(document).ready(function() {
$('a').attr('target', '_blank');
});
...or without jQuery: http://jsfiddle.net/uFvUS/
window.onload = function(e) {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].target = '_blank';
}
}
function open_in_new_tab(url )
{
var win=window.open(url, '_blank');
win.focus();
}
Use like this:
$("#a_id").on("click", function(){
open_in_new_tab($(this).attr("href"));
});
Demo HTML:
Click me!
Found here
Try this:
window.open('http://www.example1.com');
and capture the event click.
I have a script that creates a printable page by copying the HTML across and then doing some manipulation, such as disabling the buttons on the page, on page load.
I also want to disable the links on the page. I don't really mind if they look like links still as long as they don't do anything, and don't give any JavaScript errors!
The anchor tag doesn't seem to have a disabled attribute...
Unfortunately, I can't use jQuery, so JavaScript only please!
Edit: I want to disable the links, buttons etc on the page so that when the 'printable page' opens in another window, the user cannot mess with it by clicking buttons or links. I want it to essentially be a 'frozen snapshot' of the page that they want to print.
Setting their href to # and overwriting the onclick event should do the trick.
var links = document.getElementsByTagName("A"), j;
for (j = 0;j < links.length; j += 1) {
links[j].href = '#';
links[j].onclick = function () {
return false;
};
}
Why can't you use jQuery? So much nicer...
$('a').each(function(){this.onclick=function(){return false}});
Anyway here is a normal javascript way. Smaller than above and you also don't need to modify the links... by defining the onclick function to return false it will not visit the href:
var anchors = document.getElementsByTagName("a");
for (i = 0; i < anchors.length; i++)
anchors[i].onclick = function(){return false};
There is also an array of links in the document object. While I've never tried, I believe you can set them too.
for (i=0;i<document.links.length;i+=1) {
document.links[i]=='#';
}