Develop Reference

When reverse engineering code to make a web page plugin, how can I find what function is called when a certain element receives an event?

I run into this problem quite often when I decide to try tinkering with a 3rd party site for a browser plugin, let's say I want to make a simple auto-play plugin for a video site that doesn't have an autoplay feature. There's a UI element that I know triggers their internal function for playing the video, but I dont know how to identify that function by inspecting the element in the console.
What tricks / methods can I use to be able to trigger that function manually without the user actually clicking the element?

In Chrome dev tools I think you can add a breakpoint for when an event is fired which might allow you to find the function that the 3rd party calls or you could simulate the click event using this code from MDN:
function simulateClick() {
var event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
var cb = document.getElementById('checkbox');
var cancelled = !cb.dispatchEvent(event);
if (cancelled) {
// A handler called preventDefault.
alert("cancelled");
} else {
// None of the handlers called preventDefault.
alert("not cancelled");
}
}
For more information see MDN.

If you know that clicking a button or an element somewhere results in the video playing, often it'll be simple enough to just call .click() on that button.
With the mouse hovered over the element with the functionality, right click and Inspect at that point, and the Elements panel of the developer console should bring you to the element the mouse is over. Figure out a selector or a process to uniquely identify the element, and then .click() it, eg
document.querySelector('.video-container .play-button').click();
You also may need to wait for the video container / play button to be created in the DOM first, in which case you can use MutationObserver or a setInterval to wait for the site to be ready.
An alternative, trickier method is to, when inspecting the element, go to the Event Listeners panel, and look for listeners attached to click / mousedown (etc) events. Sometimes, these functions are callable from the global scope, in which case you can call those functions directly instead of clicking the element.
If the function isn't callable from the global scope, a hacky method to get a reference to it anyway is to monkeypatch addEventListener before the page loads, listen for when the listener you want gets attached, and then call the function passed. (But the earlier methods are much simpler and preferable when possible)

Create event recursively in javascript

I would like to create click event on every window. (parent and iframes);
Here's my code:
function createClicks(e) {
if(!e) e = $(document);
iframe = e.find('iframe');
if(iframe.length) createClicks(iframe.contents())
e.click(dosomething); //create click event
}
when I fire the function createClicks(), it only creates click event for $(document) but not for iframe.
Any idea?

I have found why iframe click events not created.
it was because I called the createClicks on the load of parent window however the iframes not yet loaded therefore the events for iframes can't be created.
what I did is I setTimout for createClicks function then it works.
setTimeout(createClicks,1000);
most probably there's better solution. but this what works for me.

Click event added to parent iframe(body) not working in child iframe(body)

I have requirement where I need to detect inactivity of web page and if user is inactive for more than 15 min then user should be logged out.For this purpose I am trying to detect inactivity of user by attaching click/keypress events to whole whole page and also for the main iframe.
The problem here is I am able to detect keypress / click event on the main page (main iframe) but wherever showDialoge(another iframe), I am not able to detect this event. Even though this events are being added to body of main iframe and also to whole web page, somehow i am not able to detect the same.Please help.
I am using OpenText Cordys framework XFORMs / JavaScript.
No jquery as of now but if required I can used.

If your files are on same server, you can call parent window's function from child iframe like
parent.html
<script>
window.whichKey = function(keycode) {
console.log("I'm called from child frame, you pressed " + keycode);
}
</script>
child.html
<script>
window.onkeypress = function(event) {
window.parent.window.whichKey(event.keyCode);
}
</script>
The other possible solution for your case is passing a variable in the url of parent from your child iframe. For example window.top.location.href = "parent.html?inactive=true"; and in the parent window you can check for this variable and perform required action.
This is how you can bind an event from parent to child frame's body for listening keypress using jQuery
$("#child-frame").bind("load", function(){
$(this).contents().find("body").on('keypress', function(e) {
console.log(e.keyCode);
});
});

If I understand your issue it has to do with event propagation. I'll admit though that I am less familiar with iframes. See this other post.
What is event bubbling and capturing?
Aside from your question, ideally you should manage this via sessions. Expire the session after 15min. If the user is not authorized, aka not logged in, send them to the main page.

system.windows will return you the window objects of the opened applications. You can attach the event handler to all windows and do it.

Capture click on div surrounding an iframe

How can I capture a click or mousedown event on a div surrounding an iframe. I've tried attaching the function to click event on the div but since the iframe never bubbles the event up to the surrounding div the function is never called. Is there a way I can capture the event on the div and then propagate it to the iframe for default action?

If the click is in the iframe area, the iframe context handles the click event, it does not bubble up to the iframe parent. So the div will never register the click event at all if it happened in the iframe area.
Furthermore, if the iframe contains a page that does not belong to the same domain as the iframe parent, any interaction is prohibited (re. same origin policy).
When the same origin policy is met, there are a few things you can do, you could call a method in the iframe parent context:
top.parentFunction();
So in the iframe you add an event listener that delegates to the iframe parent (accessible with the top reference.
Propagating events is a lot more complicated, so I'm simply going to refer to Diego Perini's NWEvents library. I believe his event system to be one of the better ones out there and he's particular on iframe interaction.
I certainly would not start writing your own code to achieve this, this can easily be a year long project if you want to do it properly and even then will be inferior to Diego's work.

There's no "good" way to do it, but if you really need to detect a click on an Iframe, you can kind-of do it in the latest browsers.
<iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe>
<script type="text/javascript">
var inIframe = false;
function checkClick() {
if (document.activeElement
&& document.activeElement === document.getElementById("iframe")) {
if (inIframe == false) {
alert("iframe click");
inIframe = true;
}
} else
inIframe = false;
}
setInterval(checkClick, 200);
</script>
This script will check every 200ms whether the user is in the Iframe. Of course, they may not have clicked on the Iframe to get there, but I'm afraid this is the best you can do without #BGerrissen's solution.
It will detect the first 'click' only, unless you click out again. It only works in really modern browsers.

You can use a library like porthole to pass messages between parent and iframe, even across domains. Using this wouldn't exactly propagate the event (you won't be able to get the event object), but you can create your own event in the form of a simple message, and then handle it in the parent as a click.
Here's their example
However, I've used Brendon's answer as it's simpler works for my current need.

If you land here because you need to track a click on a PayPal button (like me), and you have access to the JavaScript SDK, you can listen to the click by adding the onClick callback in the initialization.
Example:
paypal.Buttons({
onClick() {
// here you can track the click
}
}).render('#paypal-container');
Link to the docs: https://developer.paypal.com/sdk/js/reference/#link-oninitonclick.

How many times is onunload triggered?

I have just been helped on a problem I have here.
var win = window.open(url, name);
win.onunload = StartLoad;
win.close();
To solve this problem completely, I wanted to know if onunload will be triggered once or every time a event occurs?
In other words, will my function startLoad run every time the child window "win" gets redirected, closed etc? Or will it do this event once and that's it?
Apologies, if this is a silly question.
Thanks all

No - this method can fire multiple times as you navigate off a page in IE6 and IE7.
This code snippet illustrates this (save as OnUnloadTest.htm):
<body>
<form id="form" action="OnUnloadTest.htm" method="post">
Click here
</form>
<script type="text/javascript">
window.onbeforeunload = beforeunload
function beforeunload() {
alert('OnUnload');
}
</script>
</body>
Basically, the event fires once for the actual anchor click, and once as the page actually posts back. I've only seen this issue when you have javascript in the href of the anchor, although if you use ASP.NET linkbuttons then be warned as this puts javascript in the href.
For most other sorts of navigation (e.g. user clicks a normal anchor, or closes the browser, or navigates away with a bookmark, etc) the event does only fire once.

It should only fire once, the first time the window unloads. Anything else would be a security hole.

If you want to make sure that your event handler only runs once you can have the handler unbind itself the first time it is invoked. This will guarantee that the callback does not run more than once:
var win = window.open(url, name);
win.onunload = function(event) {
win.onunload = function() {}; // assign a noop
return Startload.call(this, event);
};
win.close();
Some JavaScript libraries have a built-in helper for binding an event handler that you only want run once. For example, jQuery has a one() method for this purpose:
var win = window.open(url, name);
$(win).one('unload', Startload);
win.close();

Read WebKit Page Cache II – The unload Event for interesting discussion on how unload event plays with page caching feature of modern browsers.