I am writing a widget which gets embedded on other pages (on other domains) via an iframe. A click anywhere on the widget/iframe should bring up a dialog. The dialog does not fit in the dimensions of the iframe.
I cannot trigger the dialog from inside the widget/iframe since it will get clipped by the iframe dimensions.
A user of the widget also includes a JS from my site. But I cannot listen to onclick events on the iframe (on the host page) since they aren't any onclick events on an iframe.
What's a good, secure way of resolving this which will reliably work on all modern browsers?
Have a look at these PostMessage plugins 1 / 2 which allow you to communicate i.e. pass messages between an iFrame on another domain and the parent page.
This means you can listen for the click on the iFrame, then send a message to the parent. When the parent receives that message, it can then show a dialog
Related
I have a main program (some sort of testing control panel) that runs another program in an IFrame. In some sorts, this is similar to Storybook. The reason to have an IFrame is to provide some separation between the program that is tested (which may do what it wants with its DOM) and the host w/ the control panel = buttons & co.
I was surprised to observe that if I have in the IFrame a dropdown, and I click somewhere but OUTSIDE that IFrame => the dropdown closes. So practically the code in the IFrame has reacted to an event that happened in the parent window. (NOTE: the page in the IFrame comes from the same domain).
This is something that I don't bothers me. Any ideas why this happens and what can I do to avoid this? So I'd like the code in the IFrame to stop receiving/reacting events that correspond to actions that I do outside the IFrame.
I have an HTML page with an Iframe inside. I need to show the iframe in Fullscreen mode, and when I'm in such mode I need to show some Modal dialogs which are placed within the "base" HTML page.
As a solution I tried to dinamically append the dialog to the iframe's body. The modal shows, but the actions aren't executed (button clicks, etc.). I'd like to avoid, if possible, to recreated the event listeners each time I've to show a modal dialog.
Anyone with the same problem?
I created a simple JavaScript function to display my pop-up window once it loads. But it keeps on being blocked by Firefox and Google Chrome and I have to somehow enable it on the Firefox and Chrome to display the pop-up.
Are there any alternatives for this?
I have a player on the pop-up window so I have to use a pop-up to let the player play automatically. The problem is that if I put it on the page itself, once the user clicks another page the entire page reloads and the player automatically stops for a few seconds until the whole page reloads and I have to prevent this from happening.
The general rule is that popup blockers will engage if window.open or similar is invoked from javascript that is not invoked by direct user action. That is, you can call window.open in response to a button click without getting hit by the popup blocker, but if you put the same code in a timer event it will be blocked. Depth of call chain is also a factor - some older browsers only look at the immediate caller, newer browsers can backtrack a little to see if the caller's caller was a mouse click etc. Keep it as shallow as you can to avoid the popup blockers.
Please take a look at dthorpe's answer here. It covers your question.
You could try putting the player on the original page, and using something like History.js to control page changes (you could have the main page body in one wrapper div that changes, and leave the player outside of it).
Otherwise, you could try (assuming you meant a HTML5 <video> or <audio> player) downloading the data to localStorage/cookie/[other persistent storage mechanism] and have it seek everytime you change a page.
It will be hard to stop browsers from blocking your pop up window, because any way to do so is inherently exploitable; however, if you call the function to open another window from an onclick event, you may be able to circumvent some popup blockers. Also, some popup blockers allow popups when using the https protocol, although not many have this feature, and https can be hard to implement for the average website, if you don't have physical access to the server.
One other option is to open the other page in another tab (like this w3c example; you can 'click' the link with javascript).
You might also want to look at this post, as it is somewhat similar.
I only just discovered you asked this question.
Here's the answer in full.
Basically, you can simply create the popup immediately as the user event is fired, then fill it with content (your player, for instance) as you have it available.
I remember that facebook did something similar,
Lets say you loaded facebook.com, browsed around a bit and then opened a new tab to read some news, meanwhile you had updates to your facebook feed, but they would not be automatically displayed when you switched back to the facebook tab, only when you switched to the facebook tab they would then fire the event for fetching the feed updates.
How is this done?
It can by done by detecting in javascript if the browser window gained focus.
Dynamic changes on the page or ajax calls are probably done only when the browser window has focus. More about detecting browser window focus in javascript:
Is there a way to detect if a browser window is not currently active?
I'm making a simple browser game with keyboard navigation.
The problem is that I have iframes on the site and when the user clicks on one of the iframes the body event that detects keydowns simply doesn't work unless the user clicks outside the iframe again.
Is there a way to detect keydowns regardless if the user clicks on an external iframe?
thanks
No. You cannot detect keypress on an external iframe.
In general, no scripts events can be run in an external iframe and that's by design.
Just think of all the possibilities a malicious user would one have with such a, I would say, security hole.
If its the same domain you could potentially register the events on the iframe and the window.
If it's across different domains that you don't have access to in both places then, No.
If you have access to both domains then you could use some hash tag communication, or one of the other routes for cross domain communication. Basically you would register the events in the iframe and window and simply invoke the windows event when the event occurs.
Another solution
Although potentially evil you could do some variant of the following.
setTimeout(function(){
document.body.focus()
}, 100 );
Also I'm not sure how cross browser it is.