button in iframe should trigger event - javascript

I have a button in an iframe. I want that button to trigger an event outside the iframe. How can I do that?
I have the following button
<button class="btn">Back</button>
inside an iframe
I want when people click on that button, that it triggers an event in the view outside of the iframe. How can I do that?
No need to worry about cross domain because the iframe url is on the same domain as the view.
The button only shows up when the user navigates to the second page of the iframe.

It can't, at least not directly. Events stop bubbling when they hit the top of the document.
You could do something like:
button.addEventListener("click", passEventToParent);
function passEventToParent(event) {
parent.querySelector("iframe").dispatchEvent(event);
}
See dispatchEvent on MDN for more information about it.

Related

How To Use 'beforeunload' to Capture Iframe Click?

I am trying to build a code that does a request when a cross-origin iframe is clicked and it directs the main window to a new page.
Since it's impossible to directly tap into Iframe click events, I thought of the following conditions as necessary:
page unload event occurs
the window is out of focus
Page unload (As far as I know) happens only when the current url is directed to some other url.
Now, this unload could happen by clicking any link. To restrict it to Iframes, I added the condition of window being out of focus.
addEventListener('beforeunload',(event) =>{
if(!(document.hasFocus())){
// Do Something
}
});
My question is, are their any limitations to this approach? If yes, then please suggest some more conditions to make it as close to reality.
For those of you, who are curious: I want to track clicks on Google AdSense Iframes on my website.

How to track event on onbeforeunload

How can i track events if it is close tab, refresh page or button click on onbeforeunload?
I am clicking a button which is from iframe and it is redirecting me to some other page. It is cross domain call so can't set
$window.top.onbeforeunload = null;
I don't want to call onbeforeunload on button click. Please provide me any solution?

changing link's onclick event and text from child window

I have a link on my parent page. When i click on it a popup opens. On the popup I have a button, when I click on it I need to change link's which is on the parent window(clicked to open popup), text and onClick event.
How can i do it?
Its better to reference a function on the parent window, rather than write code on the popup, so I'd use parent.some_function();
This way, if the original page changes, you can change the function there too, without searching through your popup windows.
You can not access tab/window elements from different tab/window.

Focus event of the parent window stops firing after the page in the iframe is posted back

I have a main page in which I have an iframe
I have bound a function to be executed whenever the main page gets focus (that will
be after the user, opens another tab or window and then comes back to the page)
When the user clicks on a button inside the main page, an iframe opens, and if that iframe is posted back or reloads, then the focus event of the main page stops working.
In the following code, I have tried an alternate solution, by rebinding the focus event to the main page's window whenever the contents of the iframe are reloaded. But, still it is not able to bind the focus event again to the main page's window.
Can somebody please help ??
$(document).ready(function() {
$(window).focus(function() {
CheckChange();
});
$("iframe").load(function() {
alert('1');
alert(top.window);
$(top.window).focus(function() {
alert('2');
CheckChange();
});
});
});
I got its answer, after I open the iframe in the main page, and then switch between the browser tabs, the item which gets focus is the iframe itself and the parent window never gets focus, that's why its focus event is not called. What gets called is the focus event of the iframe, which I tried very hard to attach to iframe but, eventually I found out that with jquery, the focus event handler was not getting attached to iframe, I declared everywhere in my html pages on each iframe element explicitly the "onfocus=eventHandler" attribute and then the iframe started getting focus while switching between the browser tabs.

IE not firing (window|document).onclick event when clicking on a child iFrame

I've got a simple dropdown menu that I want to hide whenever you click anywhere on the page (not on the menu). This works fine in FF and IE until you add iFrames into the page. The menu doesn't hide in IE when you click on the iFrame. Works fine in FireFox.
I tried using document.onclick and window.onclick.
Any ideas?
Edit:
I would prefer not to have to add anything to the iframe. The page is dynamic, and different iframes could be loaded after the menu has already been created. It would be a hassle/undesirable to have to constantly watch for new iFrames and attach events to them.
Yes I am aware of jQuery.live, but we don't use jQuery.
I assume this behaviour is possible since it works on FireFox, I just feel as though I may just be attaching the listener to the wrong event type or the wrong element.
On the parent page, you can search for iFrames in the page and add an onfocus event for them. That event will be fired when the user clicks within the frame.
An alternative would be to have the drop-down menu disappear after a set period of time has elapsed since the mouse or focus was on it rather than requiring a click to dismiss it.
click events bubble up to the owner window and no further. If you want the parent window to find out about clicks on the content inside another frame, you must catch events on its window/document (or have the child document catch clicks and inform its parent document). Yes, it will be a hassle, and jQuery live wouldn't work anyway since it relies on event bubbling.
Alternative approach: when you open a dropdown, also open a transparent ‘shade’ div behind it (but in front of everything else on the page including the iframes), and catch clicks on the shade to close the dropdown.

Categories

Resources