I have the following problem:
I have an extjs menu in one iframe, and when i click outside this iframe the menu does not collapse, like it does when I click away in the same iframe the menu belongs to.
Do you guys have an idea on how to solve this issue?
This actually happens to any component that should hide when it loses focus. So, I'd love to see a more general solution, if you guys happen to know.
Thanks!
P.S.: I'm using version 3.2
While I don't know if your parent frame is also running a ExtJS application, you are likely going to need to utilize XDM (cross-domain messaging). https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
You would then need to add a listener on the parent frame for clicks within the window, and pass that click event to the iframe. The iframe would then handle the click as needed, which in your case is dismissing the menu.
For anyone still looking for a solution on this one.
You can address the Extjs menu and hide all open menus from the parent frame like this (fe inside a click event on the parent):
var menu = window.frames[0].[ExtApplicationName].app.getController('[CONTROLLER]').getMenu().items.items
Next, you can loop through the menu items and hide them by doing:
menu[i].menu.hide();
Related
I am using mat-dialog to display one of the slideshow created in google-slides. After opening a dialog I want user to navigate through slides using arrow keys. But this only works when user manually clicks on the slides for first time.
The issue here is, I am unable to bring a focus inside iFrame. Below is a code snippet to simulate my use-case.
https://stackblitz.com/edit/mat-dialog-example-9ttgpd
I tried using
this.iframe.nativeElement.contentWindow.focus() but no success. Is there any other technique of bringing a focus inside presentation?
You can try waiting for iframe to be loaded
<iframe ... (load)="$event.target.contentWindow.focus()">
Forked Stackblitz
I am looking for a way to close the AddThis menu with JavaScript if the user indicates he is not willing to visit an external site. Basically I want to trigger the same method that would occur if the user moves his mouse away from the menu.
I can destroy the Add This menu in the DOM, but that creates errors in the AddThis script and the menu cannot be reopened.
I have tried addthis.menu.close() to no avail.
Thanks.
Try a .blur event on the menu. Im guessing this could possibly trigger the event that would otherwise be triggered on a defocus of the element (a blur).
My page structure is like
I have a html page which consist of a jQuery Dialog.
Within the jQuery Dialog a screen opens within iFrame.
Now the problem I am facing is - I want to close jQuery Dialog by clicking a button within iFrame. (For e.g. If my iFrame source is Google.com, then on click of search button my dialog box should close)
So, Can I write close call handling click event of search button in $(document).ready(function() of my html page?
Note :- iframe source is not accessible.
If no, then what are the other possible option to do it?
Thanks in Advance.
If the iFrame source is on a different domain than you cannot do this.
Options
Use the Dialog's built in close functionality
If the position of your item that you want to trigger the close is fixed, you can overlay a div covering. Fire the close event on the clicking of the div. http://jsfiddle.net/YvbPB/
See jQuery/JavaScript: accessing contents of an iframe my friend.
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.
I'm using modal, modeless divs (I mean fixed, styled divs) on my HTML page. This page contains iframes with modal divs as well.
When I open a new div on the page, I need to disable keyboard events on the parent page (opener page). Also I need to be able to handle tab key presses on the parent page.
I have Googled, but I haven't found any solution for solving this issue.
Do you have any suggestions or ideas?
Maybe jQuery with this plugin could help you? Keybinding is made simple, and to disable a key (ex CTRL+F) you simply write:
$(document).bind('keydown', 'Ctrl-f', function(evt) {return false;});