Is it possible to simulate browser click events? - javascript

How can I simulate exact behave of mouse click on a browser's button (e.g. Firefox)?
When user clicks on a button using mouse click then an event is generated. Could I use or call the event manually?
I can use Javascript to simulate click on a button but it will not call the same event in the same way as when a user really clicks on the button.
The reason I ask for solution: record engine for recording any event occur in the document level works in background, I want to create web app with self play functionality, that means when I browse the web app in browser it will do business flow automatically and then the engine will record the events.
Please ask if my question not clear, Thanks.

This is easiest with something like jQuery.
//listen for clicks - real or simulated
$('#some_element').on('click', function() { alert('click!'); });
//simulate clicks (two ways)
$('#some_element').click();
$('#some_element').trigger('click');
It is possible to know, from inside the event callback, whether the event was real or simulated. I did a blog post on this some months ago.

You should look into Selenium. It uses automation and other native APIs to simulate user input in exactly the way you wish.

Related

Vaadin onbeforeunload event

Is there any Out Of the Box Vaadin 10 (and higher) event similar to window.onbeforeunload in JavaScript?
I've tried to use onDetach() or beforeLeave(), but it only works inside UI, and when user reloads the page or closes the page it's not working.
You can use the approach described in https://vaadin.com/forum/thread/17523194/unsaved-changes-detect-page-exit-or-reload that was already suggested in a comment.
At the same time, I'd urge you to be really careful with beforeunload events since they are in some situations fired even though the user is actually not navigating away from the page.
The most common case is if the user clicks a link that starts a download. In that case the browser will fire the event immediately when the user clicks the link. Slightly later when the browser receives the response headers, it will discover that it's a download and not a new HTML page to display. The end result is then that beforeunload has been fired but the previous page is still kept running.
If you want to use the event for cleanup, then the best approach today is probably a combination of the unload event and then using the new-ish Beacon API for notifying the server that the user has actually navigated away. Integrating this into a Vaadin application will require slightly more JavaScript, but it has the benefit that it will actually work.

How to define different messages when Navigation Away and Reloading page? [duplicate]

This question already has answers here:
Identifying Between Refresh And Close Browser Actions
(13 answers)
Closed 6 years ago.
I am currently looking at the "unload" event of a window to try to determine how the "unload" event was triggered, but am having little success. Is there a way to determine how the javascript event was triggered?
Page Refresh
Back Button (or navigate away from the page)
Closing the Browser
Essentially I need to execute some code only when the browser window is being closed, not refreshed or navigated away from.
Purpose: When a customer does an update of our software, the update will redirect their first Internet request to an offer page. There is a button for a "Do Not Bother" option, but some users will simply close their browser. Upon closing the browser, I need to duplicate the "Do Not Bother" functionality so the user no longer gets redirected to the offer page. Simply attaching to the "unload" event will not work due to the different ways of leaving a page.
No, and if there was it would be browser dependent.
What kind of code are you trying to run when the user closes the page?
Is it to logout the user?
Then the user would not be logged out if the browser crashes or the network connection breaks (and probably not if the computer goes to sleep/hibernation mode).
If it is for logout-purposes you should probably use a timestamp variable at the server that gets updated with every request (or use a ajax-ping), and logout the user if it hasn't been seen for a specified time.
Update: Found this answer here at stackoverflow.
Yes, there is a solution!
I've designed a solution based on onBeforeUnload+onLoad events, HTML5 local storage and client/server communication. See the details on https://stackoverflow.com/a/13916847/698168.
I use a method of doing keyboard "sniffing", in that it looks for keydown's of "F5", "ctrl+r", "alt-f4", "backspace" and others, and if it finds them flowing through the keyboard event queue, it sets boolean variables appropriately to trap that status... then I use a "onbeforeunload" function handler, which tests against those boolean status variables to decide what to do.
You can even shut down various keyboard strokes (like "ctrl+n" or "F1" for instance) by using preventDefault(), bubbles=false and returnValue=false in your keyboard handling.
This stuff is not for the faint of heart, but its certainly doable with some persistence and lots of cross browser testing!

How can my app request FB permissions upon click of the like button?

I have a website with Facebook integration. The homepage has a few Like buttons, which are popular, and a login button, which is not. I'd like to attach an event to the Like buttons which will make them de facto login buttons - that is, in addition to everything Facebook is doing, I want to take the opportunity to request extended permissions for my app.
It doesn't work, and here's what I know about why:
I'm listening for clicks using the following call:
FB.Event.subscribe("edge.create", function (obj) { /* my callback */ });
The edge.create event is fired when Facebook FINISHES processing the click.
Facebook processes the click asynchronously, deferring during completion of a request-response cycle.
Javascript code executed after this async wait is not part of the same stack, and lacks the blessings conferred by the user action.
The means that Facebook provides to request extended permissions involves creating a popup window, and most modern browsers include a popup blocker which rejects the call outside of a stack triggered by a user action.
This chain leads to the result that handlers fired on edge.create are unable to request extended permissions. I can think of two classes of solutions:
Find a way to listen on the original click, rather than after Facebook receives the click, sends a request, receives a response, and finally fires the global handler
Find an alternate UI for requesting permissions that doesn't involve a popup
Nothing I've found in researching has shown me an easy way to do either of these. On solution 1, FBJS provides an addEventListener method, but as far as I can tell FBJS has nothing to do with my case (integration on a website that I own), so I can't use that to catch the click. On solution 2, Facebook's own documentation for FB.login says the following:
You should only call this on a user event as it opens a popup. Most browsers block popups, unless they were initiated from a user event, such as a click on a button or a link.
(Source: https://developers.facebook.com/docs/reference/javascript/FB.login/)
So I'm at a dead end, but it seems like a terribly artificial problem - does Facebook want me to be able to request permissions upon click of a Like button, or not? If so, what am I missing? If not, why are they implementing this restriction in the UI layer?
Facebook Like buttons exist inside of an <iframe>. As such there is no way for you to capture or intercept the button's click event, or even to have a click event on the <iframe> itself as far as I can determine.
Perhaps you could start the page out displaying your own buttons that look like Facebook Like buttons, and then you can handle clicks on those as normal. You could wire them so that on the first click they request permissions and then replace all your custom Like buttons with actual Like buttons.

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/

Is there a way in javascript to detect if the unload event is caused via a refresh, the back button, or closing the browser? [duplicate]

This question already has answers here:
Identifying Between Refresh And Close Browser Actions
(13 answers)
Closed 6 years ago.
I am currently looking at the "unload" event of a window to try to determine how the "unload" event was triggered, but am having little success. Is there a way to determine how the javascript event was triggered?
Page Refresh
Back Button (or navigate away from the page)
Closing the Browser
Essentially I need to execute some code only when the browser window is being closed, not refreshed or navigated away from.
Purpose: When a customer does an update of our software, the update will redirect their first Internet request to an offer page. There is a button for a "Do Not Bother" option, but some users will simply close their browser. Upon closing the browser, I need to duplicate the "Do Not Bother" functionality so the user no longer gets redirected to the offer page. Simply attaching to the "unload" event will not work due to the different ways of leaving a page.
No, and if there was it would be browser dependent.
What kind of code are you trying to run when the user closes the page?
Is it to logout the user?
Then the user would not be logged out if the browser crashes or the network connection breaks (and probably not if the computer goes to sleep/hibernation mode).
If it is for logout-purposes you should probably use a timestamp variable at the server that gets updated with every request (or use a ajax-ping), and logout the user if it hasn't been seen for a specified time.
Update: Found this answer here at stackoverflow.
Yes, there is a solution!
I've designed a solution based on onBeforeUnload+onLoad events, HTML5 local storage and client/server communication. See the details on https://stackoverflow.com/a/13916847/698168.
I use a method of doing keyboard "sniffing", in that it looks for keydown's of "F5", "ctrl+r", "alt-f4", "backspace" and others, and if it finds them flowing through the keyboard event queue, it sets boolean variables appropriately to trap that status... then I use a "onbeforeunload" function handler, which tests against those boolean status variables to decide what to do.
You can even shut down various keyboard strokes (like "ctrl+n" or "F1" for instance) by using preventDefault(), bubbles=false and returnValue=false in your keyboard handling.
This stuff is not for the faint of heart, but its certainly doable with some persistence and lots of cross browser testing!

Categories