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
Related
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();
I have an aspx page in one of my .Net Web application. Inside which I am having iFrame that show a URL content.
My requirement is to restrict user from using right click option. I have already implemented the Javascript code for this, but it is working only outside the iFrame on the page NOT inside the iFrame i.e. when I run the project and right click somewhere outside the frame it shows proper error message but when I right click inside the frame it, allows the user to right click (View source).
Any idea how to achieve the desired result?
I am using this jQuery plugin http://jacklmoore.com/colorbox/ to show a popup window. There is a link in the content of the first popup clicking on which triggers another small popup window. I'd like to have this second popup without closing the first one. Is it possible to achieve this without changing much in the plugin?
There would be no way to do that without significantly altering the plugin. Sorry.
Assuming you have the chops, consider using ColorBox with the html parameter for the first popup window. In the HTML, develop your own window, eventing and handler (with Jquery). Just a thought.
I have an odd problem with Fancybox. Using version 1.2.6 (yes it's old, but that's what I'm stuck with currently), I invoke an iframe via a button click (see screenshot below)
Everything is fine if the user selects a radio button and submits the form. However, if the user closes the fancybox then invokes the iframe again (using the same button click as before), the form is not clickable. Instead there are left and right arrows on the iframe as if it's trying to display a picture (see screenshot below)
The only way to 'fix' the issue is to reload the page or not dismiss the fancybox in the first place.
[UPDATE]
Here is how I invoke the fancybox. To dismiss the fancybox, you have to click on the "Modify Address" button.
$('#hidden_link').fancybox({
frameWidth:400,
frameHeight:500,
hideOnOverlayClick:false,
hideOnContentClick:false,
showCloseButton:false
}).trigger('click');
The element #hiddenlink is a hidden href.
[UPDATE 2]
Firebug displays the error Image corrupt or truncated: data:image/gif;base64,AAAA when this occurs. Not sure if that is related or not.
Does Fancybox create a container div for the modal on page load, or does it create it on demand? If it creates one on page load then it might offer a "destroy" or "delete" method you can call on close.
If it creates one on demand then you might be able to explicitly destroy the existing one on close.
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.