Use javascript to simulate a click event on javascript: href

Question

I'm using a 3rd party system that allows us to add custom javascript and I need a way to look for a custom URL and then have the system pop up the user login which is called by clicking on href="javascript:;"

< a class="nav-link" href="javascript:;"> < b>sign in</b></ a>

Note the class="nav-link" is NOT unique

I have no issue looking for custom URL and doing various actions, but I don't know how to perform a simulated click event on that javascript href so that it pops up the user login.

For instance landing on: "https://our.site.com/webstoreNew/services/guestprofile" The custom URL portion is "guestprofile" and it doesn't get redirected by main system and stays

I've tried the following:

<script>
const guest_url = "https://our.site.com/webstoreNew/services/guestprofile";
let current_url = window.location.href;


if(current_url === guest_url) {

$('href="javascript:;"')[0].click();
}

</script>

other things tried:

$(javascript:;)[0].click();
$(href="javascript:;")[0].click();

I feel like this is probably a syntax issue, but need someone's help

Is the HTML-part of your question a direct copy of the actual code? If so, the anchor-element is malformed HTML since tags start with "<" immediately followed by the tag-name, with no space inbetween. Same for the closing tag, it starts with "</" immediately followed by the tag-name. — Oskar Grosser
– Oskar Grosser, Commented Nov 25, 2020 at 2:10
Sorry.. i had put in spaces, but there are no spaces in the actual code. <a class="nav-link" href="javascript:;"> <b>sign in</b></a> — Joe K
– Joe K, Commented Nov 25, 2020 at 2:15

Aib Syed · Accepted Answer · 2020-11-25 00:55:07Z

1

EDIT: updated with more of your code and removed code that would work in snippet.

Check my snippet below, just create a function and call it like in my example below fakeClick();.

If you want to target the href you mentioned you can use querySelector like this:

const href = document.querySelector('[href="javascript:;"]');

The snippet below will not trigger a click because we are using window.location.href; which isn't supported in stackoverflow snippets. That being said, if you run this in your project it will function as expected.

//your guest url
const guest_url = "https://our.site.com/webstoreNew/services/guestprofile";

let current_url = window.location.href;

//this is the a element where we trigger the click
const href = document.querySelector('[href="javascript:;"]');

console.log(href);


//this is the function
//if both are equal it will trigger a click on atag
function fakeClick() {
if(current_url === guest_url) {

href.click();
}
}

//here we are calling the function so it will run immediately
fakeClick();

<a class="nav-link" href="javascript:;"><b>sign in</b></a>

Additionally, as @Oskar Grosser mentioned, if you want to use the code from your example you just need to change the incorrect call from this:

$('href="javascript:;"')[0].click();
}

To this:

$('[href="javascript:;"]')[0].click();
}

As you can see the adjusted Jquery matches the querySelector call, and should function the same way.

edited Nov 25, 2020 at 0:55

answered Nov 25, 2020 at 0:19

Aib Syed

3,1942 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joe K Over a year ago

I think the issue here is "a" element. In my case there is no such element and it's just a href="javascript:;" reference. As seen here < a class="nav-link" href="javascript:;"> < b>sign in</b></ a>

Aib Syed Over a year ago

developer.mozilla.org/en-US/docs/Web/API/Document/querySelector - You can use querySelector to find the href. It's a powerful method that can help you reference anything on your page. - Just replace the atag query call with something that can reference your href.

Aib Syed Over a year ago

I've updated my answer to show how you can target that href.

Oskar Grosser · Accepted Answer · 2020-11-25 00:27:47Z

0

With jQuery you query for one or more elements using CSS Selectors.

Since you want to query for an exact attribute, you have to format the query-string like this:
[attributeName="value"]

Another note is, what you query for has to be in a String. With your other attempts, the browser tries to resolve javascript and href as if these were variables, hence the errors.

The call of click() itself is correct, that will fire a click-event.

// Setup for feedback; ignore
$("a").click(() => console.log("'a' was clicked!"));

// Correct query
$('[href="javascript:;"]').click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:;">A link</a>

answered Nov 25, 2020 at 0:27

Oskar Grosser

3,4951 gold badge9 silver badges23 bronze badges

1 Comment

Joe K Over a year ago

This is great, but for some reason the system is saying this: Uncaught TypeError: Cannot read property 'click' of null at guestprofile:42 I've changed the URL multiple times to see if that's the issue, but no.

Collectives™ on Stack Overflow

Use javascript to simulate a click event on javascript: href

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related