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.
Related
I am trying to detect when a div within the entire document is loaded.
but for some reason is this not being detected?
https://codepen.io/noflaco/pen/eoeexM?editors=1111
document.addEventListener("DOMContentLoaded", function() {
const test = document.getElementById("test");
function consent() {
alert("test");
}
test.addEventListener("DOMContentLoaded", Consent);
});
why not?
why not?
Arbitrary DOM elements to not trigger a DOMContentLoaded event, so the event handler is never executed. This event is only triggered on the document element when whole DOM has been parsed and loaded.
You can learn more about this event on MDN.
Ironically, the fact that you can load the div via document.getElementById("test") means that it already exists, so there is no point in adding a handler to wait for it to load.
I'm doing a Firefox addon to intercept wheel mouse events over an embedded iframe video of Youtube or Vimeo.
I got it working over normal YT/vimeo pages (attaching the listener to the window and then looking at event.target to identify the video), the problem is with the < iframe> tag: it doesn't intercept the "wheel" event (while for example "mouseover" works).
i.e. there is a similar HTML code in a page:
<iframe src="//player.vimeo.com/video/89055435/fallback?noscript" frameborder="0"></iframe>
This works:
iframes[i].addEventListener("mouseover", func, false);
For "wheel" I do the similar:
iframes[i].addEventListener("wheel", myFunc, false);
or
iframes[i].contentWindow.addEventListener("wheel", myFunc, false);
No result. I tried also capturing instead of bubbling: nothing.
I tried also this:
window.addEventListener("wheel", myFunc, false);
This works over every obj of the page, but nothing over the iframe itself.
I made also a setTimeout with the listener, to see if the iframe was not fully loaded: nothing changes.
http://jsfiddle.net/chtNP/121/
So, what should I do to have my wheel event when I'm over an iframe with a video inside it or how to get all wheels from the window including those over the iframe?
I had the same problem, here is my solution:
var iframe = document.querySelector('iframe');
iframe.contentDocument.addEventListener('wheel', event =>
iframe.dispatchEvent(new WheelEvent('wheel', event))
);
this will forward every wheel-event on the iframes document to the iframe element in the parent document.
Notes:
it is not possible to 'recicle' the event, it needs to be cloned
the WheelEvent constructor copies many, but not all of the original events properties
the cloned event is not isTrusted
the event forwarding is attached to the iframes document. It will only work as long as the document doesn't change. So you should run the above code once the final document is loaded
accessing the iframes document may get you in cross-domain-trouble
I have a slider button created using a JavaScript plugin, which automatically generates an element with class name .flex-next. However, when I run the following code, nothing is logged in my console:
$(window).load(function() {
$( ".flex-next" ).on( "click", function() {
console.log("youclick");
})
});
Since the button is added dynamically after the dom is loaded, you need to use event delegation so the click event can be used on this button:
$(document).on('click','.flex-nex',function() {
console.log("youclick");
})
Your setting your call to fire when the window loads by using $(window).load(...);. A flexsider is initiated on $(document).ready(...) which happens after the window loads and all of the content is loaded into the DOM. So when your script fires, it looks for an element that isnt there yet.
Get around this by firing your script on $(document).ready(), and use event delegation. The best practice way is to declare your function like so:
$(document).ready(
$(document).on('click', ".flex-next", function() {
console.log("youclick");
});
});
this way your click listener will wait until the page is ready and will put a click event on to any .flex-next event, even those created dynamically. That way if your using large imagery that is loaded asynchronously the code will still work.
You are probably calling your $(".flex-next").on call before the slider button has been executed. So, basically, your .flex-next class doesn't exist in the DOM yet when you call the .on
You should call the .on call after plugin has been initialized.
I have a window that is opened by
var myWindow = window.open(
'popupManager.htm',
'myWindow',
'status=0,toolbar=0,width=500,height=100');
and it will act as a debug window.
inside I want to hook up to windows events on the window.opener and I'm not getting this to work. Both URL's are in the same domain/same website.
I can hook up to DOM elements fine using, for example
$("input[soid=DlgButtonBar_cancelButton]", window.opener.document).bind("click", function() {
alert('Cancel button was pressed!');
window.close();
});
but I want to hook up to the move event (window.onMove) and close event.
tried
window.opener.addEventListener('move', function() { console.log('moving...'); });
with no luck.
what is the trick? using jQuery or simple javascript...
Listening on window events doesn't seem to work. I use this trick to listen to window events (unload in my case):
Create a document element (e.g. span) on the parent document (e.g. the one you want to get events from) :
var $unloader = $('<span style="display:none;" id="unloader"></span>');
$('body').prepend($unloader');
$(window).unload(function(){$('#unloader').click();});
In the opened document (e.g. popout), you can listen to the unload event now masked as a click event:
$("#unloader",window.opener.document).click(unloadEventHandler);
If you need to detect if the unload is a close or a navigation event, you can check the closed property for the parent after a delay:
window.setTimeout(function(){
if(window.opener.closed == true) {
// Close event
} else {
// Navigation event
// window.opener.location to get new location
}
},500);
The risk is in the delay, the closed property is changed after the unload methods and event hooks are executed so if the delay is too short you might get the flag before it is changed and if it's too long, you get unnecessary delays.
I think the move event can be handled similarly, hope this helps. Let me know if there are any possible improvements to this method. Thanks and good luck.
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.