I'm developing a web audio SDK and considering embedding just the audio (so not the UI elements) in an iframe. I'm getting the following error:
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
I'm wondering if there is a way to create a user gesture on the iframe even though it is hidden and audio-only? The original gesture is on the parent component, but it seems like that is not propagating down to the frame. Thanks!
For better user experience (UX), browsers disallow auto-playing of audio unless users explicitly "request" audio with a gestures like clicks/taps. The iFrame must be visible and interactive to receive user gestures, otherwise the UX safeguard is bypassed.
Related
I have an iframe that has html/scripts injected into it that I have no control of. This iframe is part of a webview that we use in a mobile app so all redirects that occur need to go through the native levels. This is why popups need to remain blocked.
I see the URL of the new location in the console whenever I try to navigate away:
Blocked opening 'https://www.newwebsite.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
Is there someway to intercept the URL that is blocked from within the parent?
I have tried adding click event listeners to the <a> tags which solves some of my problems but this does not work for window.open calls.
Any tips or advice is would be very helpful. Thanks!
So, I've seen this approach on one site (I can't remember it, though) and it works like this:
First, there is a simple page with a simple login form. But when you click the login button of the form, if the validation of user and password is positive and the response from the server is positive as well, a new pop-up window appears (which contains the application written in javascript - ExtJS) and the current tab of the browser (which was the login form page) closes.
In my opinion, this is an excellent approach because the ExtJS is a single page application pattern, powerful enough to run full AJAX, without visible redirects. Plus, the pop-up scenario eliminates the browser page control buttons (back, forward, refresh) and the address bar is read-only.
Now, I'm trying to reproduce this by using the help of ASP.NET as server side scripting language, among ExtJS as the main application. So, the results would be as following:
Login page with a login form - HTML5 + CSS3
Application page (pop-up window) - purely ExtJS
A web service - ServiceStack
The web service exposes the method for login purpose, as well as the other methods, and it always returns JSON responses. A session variable must be set (if the login was successful) before opening the pop-up and closing the window.
And here comes the question:
How can I accomplish this scenario of opening a pop-up and closing the current window/tab if the login was successful? Any help, hints, references, advices, criticism is totally what I'm expecting.
Thank you!
you should be able to close the current window after open another one.
window.open('new window url'); window.close();
I tried this on my box, and it works well on chrome and safari
<input type="button" onClick="window.open('popop.html'); window.close();" value="open" />
Keep away from opening pop-ups if you really don't have to. All modern browsers are set up to prevent you from opening pop-up windows by default.
AFAIK the only 100% scenario to open a new window (with target attribute) is a hyperlink clicked by user.
window.open() and even document.getElementById("hiddenLink").click() are blocked by certain browsers.
Are there any real positives of doing so or is it only a false novelty of that site? The reasons you state are all well with one-window scenario.
How can I programmatically click the browser's Back button from within my Flex application.
I'm using deep linking to allow the user to navigate back/forth inside my application. I want this to work when BACKSPACE is clicked inside the application as well, but Flex captures BACKSPACE and the browser doesn't get the event. I don't want to implement browsing history myself within the application, naturally.
Any ideas? Can I send BACKSPACE to the containing browser? Can I specifically invoke "BACK" in the browser from javascript maybe?
you can try a JavaScript/Flex bridge.
write a JS function that sends the browser back, and invoke it from within Flex.
have a look at ExternalInterface
I am writing an ASP.NET 3.5 web app that displays a list of items. I want to be able to display a non-modal popup with details when the user selects an item. I want to be able to display several detail popups simultaneously. (i.e., the user can click an item to see its details, then click another item to get another popup.) Currently I call RegisterStartupScript during postback to write a "window.open(...)" script to the page when it re-renders. The problem, of course, is that this requires a full page postback and refresh.
It occured to me that this might be a perfect use for XMLHttpRequest or AJAX but I don't know how to do it (or whether it's even possible or smart to do this). Can someone show me the way?
I have the AJAX Extensions installed but I'd prefer not to use the AJAX Control Toolkit.
EDIT:
Some clarification: When the user selects an item a custom event is raised. On the server I handle this event and use some server-side logic to construct a URL which I then use with RegisterStartupScript to construct a "window.open(myUrl...)" script. But posting back the whole page to do this seems inefficient and I'd like to know if I can just make a call to a simple server-side function that constructs the url and sends it back without having to roundtrip the entire page.
Creating a popup has very little to do with AJAX, and a lot more to do with JavaScript. See the jQuery dialog library here. You can then use jQuery's AJAX API to do your server dirty work :)
jQuery Dialog UI
--
Bill Konrad
Devtacular - Web Development Tutorials
You can use DHTML Window widget.
It offers many way to display either modal or non modal window.
Also it supports AJAX.
You can use dhtmlwindow for open a new window, or
dhtmlmodal to open a new modal window.
Of course, you can edit it to match your requirement.
Sample:
var insWindow = dhtmlmodal.open("insbox", "iframe","UserMaster.aspx?" + queryStr, "User Master", "width=425px,height=500,center=1,resize=0,scrolling=1", "recal");
Do you really need to open a new window? Opening an absolutely positioned DIV or a new layer on top of the current page in the same window is all the rage these days.
Edit:
I don't think it would limit the number of popups, there is some neat stuff that can be done these days with libraries like jQuery + jQuery UI, you can simply create as many of these DIVs/layers as you need and make them movable, resizable, etc. Only thing that real popups have and these do not is that they do not appear on the tab panel/taskbar.
Yes, you will be limited to the size of the window in which is the main page opened, however, I don't personally see it as a problem since most people surf in a maximized browser window anyways.
Implementation of the oldschool typical popup window is undoubtedly much easier for you, but it also runs into problems with end user popup blockers. Just had that problem # my work, they needed to make a popup during the certificate authentication process for some reason and as soon as Yahoo released a new version their toolbar, it quit working).
I have an HTML wrapper that contains a Flex application, is there an Event that I can listen on, that is triggered when a user leaves the HTML wrapper either by navigation arrows or closing the browser?
Thanks.
You can also listen for Event.ACTIVATE and Event.DEACTIVATE in Flash. All EventDispatchers receive these events when Flash/AIR gains or loses focus from the OS.
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/events/EventDispatcher.html#event:deactivate
This is very helpful for when you you provide a link that opens a new window and you want to reduce functionality and load (pause and mute a video for example) and then resume when the user comes back.
Edit: I realized this may not be what you're asking for exactly, but I'll leave it in in case it's helpful for anyone looking for it. Also note that you can perform other actions in the onbeforeunload event that will generally be reliably executed before the user accesses the confirmation dialog, unless your unload routine is overly complex (in which case you should consider altering your design anyway).
onbeforeunload lets you interrupt page unload:
window.onbeforeunload = function(e) {
// Browser will pop up a confirmation dialog, with some text before
// and after your return string; try it in different browsers to
// see how they behave.
return 'String to confirm';
}
There is Body.onUnload, but i'm not sure how reliable it actually is.
The closest thing I've found for this is the javascript window.onunload event. However, you can't really listen for this within the Flex app, as the app may not be running anymore by the time the unload method is called. We've used it to signal to other parts of the page via javascript that the app was unloaded though, so depending on what you need to do that might be enough.
The question is, what do you need to do when the user navigates away?
If you need to perform an action on your server, then the best way to handle this is to open a Socket() when your swf initializes, and then when the user navigates away, that socket will be terminated, and the server can detect that and perform additional logic.
If you need to perform a client side operation, like saving a SharedObject, then you can't rely on a "just one last thing" event to the plugin, since there are alot of avenues to closing out a plugin session. In that case, your best bet is to continually be saving SharedObjects every few seconds.