jQuery selecting data-href - javascript

I am creating a Chrome extension which removes the Google Redirection when clicking on a link on a Google search. I have done an inspect element on a link and I can see that there is a function called 'onmousedown' and also a 'data-href' which is the actual link to the website. I have been able to remove the 'onmousedown'. However, I was wondering how I can make the link the 'data-href'? Sorry if this is a bit hard to understand.
Here is an image of the inspect element. Basically I want to put the data-href in the a href.
Here is what I have done so far.
$(document).on("DOMSubtreeModified", function() {
$("a[onmousedown]").removeAttr("onmousedown");
});

You can use .attr() like below to get all elements with data-href attribute and it that value as the value of the href attribute.
$('a[data-href]').attr('href', function () {
return $(this).attr('data-href')
})

Related

Jquery each and attr

I have some external links in my page
Label
Label
I try to direct the ext link to an exit page before automatically redirecting it to the destination. It works fine, but with multiple ext links on the page, my script is getting the href of link-1 for other ext links too.
Ergo:
// To grab the href of the destination page i.e http://example.com/link-1
var external = $(".ext").attr('href');
// To forward to the exit page first i.e http://localhost/checkLinkURL?=http://example.com/link-1
$(".ext").attr('href', 'http://localhost/checkLinkURL?=' + external);
I have tried wrapping the second part of code in an each function but it still gets only the href of link-1. I don't know if the rest of my script is relevant to the problem. It's pretty basic and just strips out the exit page and forwards automatically to the destination. But how come this doesn't work as intended, even with an each function?
You can change the href attribute of each link, you can use .attr() with a callback function which provides the current href for you as the second argument, which you can use as your query string:
$('.ext').attr('href', function(i, external) {
return 'http://localhost/checkLinkURL?=' + external;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Label
Label

Get link element when event fired on href property

I use a library which let me define href property on my links. But this lib don't allowed to define onclick property.
I want to execute JS function in my link. So I defined the following line (I know it's a bad practice, but I've no choice) :
Link
With this line, the JavaScript function runs correctly. But I need to get the element that fired the link clicked and the preceding code gives me Window object. I know href property doesn't fire an event but I really need to get the link clicked.
With button tag it's very simple by using onclick="get_element(this)" but with a tag I don't know how to do that.
If you want to try examples : https://jsfiddle.net/j8o7qvz2/
Do you have a solution ?
You can add this piece of Javascript code after generating all anchor tags. This will iterate to all anchor tags then set the onclick attribute based on the href then sets the href to #.
var links = document.getElementsByTagName('a');
for(var link of links) {
link.setAttribute('onclick', link.href);
link.setAttribute('href', '#');
}
function get_element(element) {
console.log(element);
}
Link
<br />
<button onclick="javascript:get_element(this);">BUTTON</button>
EDIT:
Since you can use external JS then maybe I'll add an answer with jQuery.
I don't know how jQuery does it may it iterates also but this is cleaner and shorter than Vanilla JS.
$('a').attr('onclick', $('a').attr('href'));
$('a').attr('href', '#');
function get_element(element) {
console.log(element);
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Link
<br />
<button onclick="javascript:get_element(this);">BUTTON</button>

Link Tracking with DTM and Custom Variables

I need to capture the link that was clicked as well as the page that the link was clicked on using Adobe DTM, and then pass it into an evar and sprop. I don't need pageviews, so the s.tl() is used.
I'm using an event based rule with "click" as my event type, with my element tag/selector as "a" for the anchor tag.
Below is the page code that I'm using in DTM - but my problem is, I'm getting an "Unexpected token ILLEGAL (line: 1, col:3)" and I can't seem to figure out why.
Ultimately - is this the right approach to take, or is there a more simplified approach or better solution?
// Custom Link Tracking
$(“a”).click(function(event) {
console.log($(this).text();
s.eVarXX = $(this).text();
By using an event-based rule that already listens for the anchor click you don't need another jQuery function.
You can simply grab both the href and link text within the Adobe Analytics section of your rule:
s.prop1 = $(this).text() // link text
s.eVar1 = $(this).attr("href") // Link URL
Hope this Helps

Passing in values into a jquery function with a # at the beginning

I have a script which is located in its own .js file, which I believe is used to look for a specific anchor and assign an onclick event where it will forward the user to another page.
$(document).ready(
function () {
"use strict";
$(".popup a").on(
'click',
function (event) {
event.preventDefault();
$("#the_link").click();
}
);
}
);
What does #the_link mean in the context of the rest of the code? I am trying to find out how and where it is getting its value from but I can't find it anywhere. Help!
I also replaced #the_link with www.google.com, but then after nothing happened where before a window pops up. What could I do to make it go to google? <-- testing purposes.
PS. I am very very new to javascript.
PSS. In honesty, I am not sure what is going on in that code above.
That is jquery, not plain javascript (so you might add the jquery tag to your question).
$() is jquery, and the # means get me the element with the id of "the_link". Go search your document for an id="the_link", there will be no # in the id field, the # is used to tell jquery you are querying by element id, as opposed to some other type of query (by other attribute, by class, etc).
In a valid HTML document, exactly one element may have a given id, so selecting by # is a way to refer to a unique element in the document.
$("#the_link") is jquery syntax, and it refers to the element with an id of "the_link" that is located in the HTML markup.
Somewhere in the HTML, you have (for example):
<a id="the_link" href="#">...</a>
Here, the href attribute is where you would insert the http://google.com to go to that link when the anchor element is clicked.
<a id="the_link" href="http://google.com">...</a>
Alternatively you can write in your javascript:
function (event) {
event.preventDefault();
window.location.href = 'http://google.com';
}
It means that you are accessing element with id the_link. Some of your elements in html has attribute id="the_link".
If you want to go to google.com when the_link is clicked:
document.getElementById("the_link").onclick = function(){
window.location.href="http://google.com" //this goes to google.com
};

Prefixing a URL in an window.open function jQuery

I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.
You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});​
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.
Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});

Categories

Resources