Using BOTH Href & click listener - javascript

I've got a browser plug-in I'm working on and I want it to behave a certain way when the user clicks things. Not limited to, but including, a behavior for links!
The problem is that the plug-in has to work for a wide variety of sites, and some of those sites use the dreaded pseudo-protocol such as:
Show Element
Currently my behavior is added to the anchor tag via
anchor.addEventListener('click', superAwesomeFunction);
Unfortunately this has a problem where the click listener only fires once. If I preventDefault() of course the click listener sticks around, but I've now broken the host site! Otherwise, clicking the link fires the click listener but only on the first click. I'm wondering why my superAwesomeFunction() doesn't fire again if the link is clicked a second time. Is href="javascript:things()" doing more than I know?

It is possible to add an event listener to a link that has a JavaScript function call set in the href attribute.
Here's a jsFiddle that shows it working. Both functions fire each time the link is clicked.
There must be something else going on with your code beyond what we can see in what you gave us.

If you must wait user some time and going on url then, you may add some code to your superAwesomeFunction's process end:
document.location.href = $(this).attr("href");

Related

Click a link and use window.open() blocks one of the links

I'm trying to create a simple JS function that will open a new window/tab when clicking a specific button, so the user will actually open 2 windows/tabs, however no matter what I do, one of the links gets blocked by Chrome as a "popup-blocked".
I'd like to do something like this:
$(document).ready(function(){
$("a").mousedown(function(){
window.open("https://stackoverflow.com/","_blank");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click Me!
;
But when I do this, the button link doesn't work, but the JS does.
If I change the JS and add a setTimeout() to it, the button URL goes through but the JS gets blocked.
No matter what I do, I can't get both of them to go through.
Any help would be appreciated.
Navigating to two places at once, with one in a new window, is really popular with people who want to show the user a massive advert in a new window.
Massive adverts are unpopular with users, so browsers take steps to prevent this behaviour.
Sometimes legitimate uses get caught in the crossfire. Blame the blackhat end of the advertising industry.
You'll need to find some other way to display… whatever it is you want to display… to the user that doesn't involve navigating to multiple webpages at the same time in separate windows.
The problem is caused by the mousedown() event you are using which is a part of down+up sequence to trigger the click() event of the <a> tag.
so opening a new window "breaks" the flow and browser is not tracking for the mouse-up event anymore to follow the original url.
so the solution is to attach the click() event instead without stopping propagation. this will fire the attached and original events and none of them will be blocked.
$(document).ready(function(){
$("a").click(function(){
window.open("https://stackoverflow.com/","_blank");
});
})
you can try sample on this page as stackoverflow snippet is sandboxed and is blocking popups

JS: How to open 2 links from current web page

I need to create bookmark to my browser that will open link with id:
window.getElementById('updateOk').click()
and then (opens little window with another button)
document.getElementsByClassName('rmit-save-details btn btn-inline right btn-green')[0].click();
how can I connect these two to work in one click in Chrome browser? I understand that the 2nd script must wait some time (maybe 0,5 seconds will be enough) and I even find setTimeout function but I just can't do that working... Nothing happens after clicking. When I click to bookmark with just one js script, it's working.
Thanks a lot!
Why don't you use a callback function on clicking over the first element.
document.getElementById('updateOk').addEventListener("click",function(e){
// return your other element callback here
},false);
And within the callback put the exact same thing that you might be using for the click of .rmit-save-details element. It might be any submit event or whatever you want to do but it would work.

How do browsers display the target url of a link

If you do a google search for some string , the browser would render the search results in the form of clickable links. Now here comes my question. If one hovers on those links, at the bottom left hand side, you would be able to see the location where the browser would take you if you hit it. I want to know how the browser does it.
I dont think that search results are actually HTML based anchor tags. Atleast that's what I feel. But even in those cases, the target url gets displayed whenever we hover over the links.
Please share your thoughts on how its done..i need to do the same in a js code.
-->Thanks for your answers. There is a reason why I had to ask this. I have to enable drag and drop between a web page which i am gonna show in an SWT Browser and a java GUI. In order to do that, in the mousedown event, i am firing a javascript code. This basically gets the HREF attribute on the anchor element which the user has clicked. **Now here is the catch. If I open google.com and if I do a mouse down IMAGE,YOUTUBE,GMAIL,DRIVE links the target URL is coming up fine. But if i try to do a mouse down on any of the results in google search OR in our original thin client application which we need to enable for drag and drop, the link is not coming up. However, the browser at the bottom shows the target link. I am confused. This is the reason why I think it is not an anchor tag.
I tried by registering an onmousedown with the following code for all the anchor elements. But with this if the user does a mousedown on any of the search result...no alert box was coming up.
var elements = document.getElementsByTagName('a');
for(var i=0;i<elements.length;i++)
{
elements[i].onmousedown = function()
{
alert(this.getAttribute('href'));
}
}
I dont think that search results are actually HTML based anchor tags. Atleast that's what I feel.
You feel wrong. Search results are <a> elements.
But even in those cases, the target url gets displayed whenever we hover over the links.
The browser has to know where the link goes. It can make its UI do pretty much anything it likes.
Please share your thoughts on how its done..
With native code
i need to do the same in a js code.
window.status = element.href in a mouseover event.
Some browsers will block this these days as it is too useful a technique for a phishing attack (to trick the user into going somewhere other than where they expect to go).
Search engine results, at least from google, are rendered as html anchor tags. No need to guess check the html source of the search page.
So the part about showing the link in the status bar on hover, that is standard behavior (I see a url to your SO profile when I hover on your name).
I'm going to take a leap and assume what you want to figure out, is how to render a link as anchor tag, but still do some javascripty stuff, instead of the default anchor tag behavior. Like how google attaches tracking information to the url instead of just open the search result url in a tab.
To do that, you need to attach an event handler to the anchor tag to capture the ''click'' event, prevent propagation of the real click event, and do your stuff instead. So the HTML looks like an anchor tag, but when you click it, its all your javascript.
You'll find a lot of references to do this on questions like jQuery: Capture anchor href onclick and submit asynchronously or just basic google search on how to trap anchor click / href event.
Hope this helps.
You can change the status bar this way: The href is the text in the status bar and when the user clicks the link it is changed to the real url:
Link
If you look at the source code of a Google search page, you'll see the links have format
<a onmousedown="return rwt(...)" href="http://somelink.com/somepath/">...</a>
Initially, the href property of the link is correct, so it shows up correctly on hover.
However, it gets mutated at click-time by Google's rwt function, which changes the href property to a http://www.google.com/url?... URL.
This mutation happens when the mouse is pressed down -- just before the browser follows the link (which happens when the button is released up).
You can observe this behavior easily by right-clicking on a result link and seeing the URL change on click.

JavaScript click event

My browser (firefox) prevents any popup from loading, and loads links that open new windows in the current tab, unless I explicitly say I want the link to load on a new tab or window, with the appropriate shortcuts (for example, middle click on the link, or left click with ctrl pressed causes the link to open on a new tab, and shift + left click on a new window).
I would like to create a javascript function f() that runs some code (meant to create the link address) when the link is pressed, and then loads the link that has been created, without removing the user experience described above.
Right now what I have is something like <a href="javascript:void(0)" onclick="f()"/>, but middle click doesn't work (it instead loads the url javascript:void(0)) and neither do the other features described above.
Do you have any idea as how to solve my problem ?
Thanks.
have you tried window.open('url')?
see: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
Also, as far as I know, you can't control whether or not the browser opens in a new tab or new window. That is a browser setting that is different for every user.
You might also try removing the onclick, and using
EDIT
There seems to be issues with using middle click with opening new tabs instead of executing the javascript: middle click (new tabs) and javascript links
As that site says, you can instead create an id for the element and bind it through javascript.
**Taken from that link:
...
And then in your JS, hook the link via it's ID to do the AJAX call.
Remember that you need to stop the click event from bubbling up. Most
frameworks have an event killer built in that you can call (just look
at its Event class).
Here's the event handling and event-killer in jquery:
$("#thisLink").click(function(ev, ob) {
alert("thisLink was clicked");
ev.stopPropagation();
});
Without jQuery, it might look like this:
document.getElementById('thisLink').onclick = function(e)
{
//do someting
e.stopPropagation();
}
Other browsers may vary, but by default Firefox doesn't tell the web page that it has been middle-clicked (unless you set the hidden preference to enable the feature). You might be able to create a workaround based on the focus and/or mouseover events instead.

Simulate real mouse click

What I want to do is execute a mouse click say on youtube to press play when the page loads. How do I click that specific location (assuming it is always in the same location)?
I have tried and failed with
var e = document.getElementById('myelem'); e.click();
var e = new jQuery.Event("click");e.pageX=x;e.pageY=y;$("#elem").trigger(e);
and stuff like that. nothing really works. Any suggestions? I am using google chrome
alright it seems like there has been a little confusion so I will further explain. I have created a popup tied to a keystroke event what I want to do is trigger x-webkit-speech by clicking the microphone that is in my popup so that the user does not have to click it themselves. I have tried a bunch of ways like above and have not been successful. After this my program will be done so I really would love some help thanks :]
In general, browsers won't let simulated mouse clicks trigger "real" actions, e.g. a jQuery click() won't cause the browser to follow a link. Otherwise, spammers could trigger banner clicks on every page load (among other more malicious uses).
According to http://www.filosophy.org/2011/03/talking-to-the-web-the-basics-of-html5-speech-input/:
Eventually, it will be possible to invoke the speech-recognition directly with the startSpeechInput() method, but to my knowledge this is not implemented in any of the current browsers.
I suggest waiting for Chrome to implement the API so that you can trigger speech input from JavaScript.
<button id="myButton" onClick="alert('You clicked me!');">Click me</button>
document.getElementById("myButton").click();
http://fiddle.jshell.net/Shaz/HgyeZ/
That's with regular clickable items though. But with YouTube Videos, you could also append &autoplay=1 to the end of the url (if it's embedded into a page).
http://fiddle.jshell.net/Shaz/tcMCa/

Categories