Situation: you've got a .swf embedded in an html page, and when you click on something in the .swf, it needs to popup a chromeless window. Normally this would be fairly easy - but consider Safari, which completely disables all 'window.open' functionality while its popup-blocker is enabled (it makes an exception if the function is triggered onclick, but it doesn't count clicks in flash). How can you create something which gracefully degrades (provides an alternate and roughly equivalent experience) for browsers that won't execute window.open?
(note: this is AS3, and Safari 3 for PC or Mac we're talking about - but more broadly, any browser that doesn't support or refuses to allow the javascript window.open function.)
If your SWF is loaded using wmode='opaque' or wmode='transparent', then you could have the SWF output JavaScript code that would create an empty <div> that's positioned over the SWF area. That <div> could then handle the onclick event and create the popup window rather than the Flash code.
the div overlay was more complicated than the project deserved - check out code.google.com/p/popupfromflash for the code I came up with.
It attempts to use ExternalInterface to setup a window.open function, and if that fails (particularly in Safari) it calls back into flash and prompts it to do a navigateToURL to pop up the window normally (instead of chromlessly)
Related
The gist: What's the best way to escape a Flash object's focus on a webpage?
Context:
I have a hotkey listener (an AutoHotKey script) running in my tray. If the script detects the command Alt+Shift+F6 while I am clicked into a Flash object on a webpage, it activates and sends key combinations to Flash to pull certain data logs. After this process completes, I want to call up a JavaScript file on that same browser tab that requests additional information from the user - basically, a tiny UI with additional text fields available in a third-party bug tracker. To do this, I want to send a javascript: command to the address bar using Ctrl+L and having AutoHotKey paste in the full call to the JS file.
A visualization of a possible environment:
The problem:
I need the user to be clicked INTO Flash in order to pull the data logs. However, I need the user to be clicked OUT of Flash for Ctrl+L to actually work - Flash appears to eat all keystrokes at the browser-level when one of its objects has focus.
A possible solution: The easiest way to go about this would be to simulate clicking on the stage, which borders my Flash object on every side. This should work, but I must assume the stupidest possible user. Such a user would somehow limit their current browser window to only be as big as the Flash object (if not smaller), click into it, and attempt to use the hotkey. In this case...I have no idea where I should click, because it could be outside the browser. Further, I don't believe I can assume that all browser address bars are similar amounts of pixels south from the top of the window.
Additional complicating factors:
I want this to work for the user's default browser. (IE, Chrome, Firefox, Safari are my big targets.)
AHK does not provide any native DOM or COM hooks to anything except IE.
Ctrl+Tab and Alt+Tab shenanigans do not appear to work. That can get me to other tabs/windows, but returning to the tab/window with the Flash object still causes Flash to 'eat' further keyboard input.
While I'd be open to using another scripting language than AHK if it could overcome this Flash focus hurdle, I do not know how to create a keylistener that sits in the users tray until activated by a hotkey.
I have no access to the Flash object's code, and it contains no logic to interpret a key combination as a way to break focus or launch a script.
Would it be possible to use WinMaximize to maximize the size of the window? If you do that it should be easier to set up the script to avoid clicking outside the browser.
Perhaps look at ControlFocus and/or ControlSend (using the "edit1" control in IE and FF -- unfortunately, Chrome doesn't expose the "address bar" as a "control" this way but if you test for Chrome first, you can implement your "click outside the Flash box" method for that case).
I'm using the following code to open a new tab on click of a PDF download.
The problem is the new tab becomes the main tab often before the PDF loads.
How can I make the view stay on the current window (PDF) and open the new tab but not switch to it?
Note: In Chrome and Opera they understand the HTML5 download tag so the PDF simply downloads and the current window redirects - All good! So this is only a problem on IE & Firefox.
<h2 style="text-align: center;"><a href="http://cdn2.hubspot.net/hub/155045/file-847580737-pdf/Stepping_into_a_new_age_of_marketing_with_CRM_FINAL_APPROVED.pdf" onclick="casestudiesopen()" download><strong>Click here to download your eBook</strong></a></h2>
<script>
function casestudiesopen() {
window.open("http://www.workbooks.com/case-studies");
}
</script>
Well, I'll advise you to read this Stackoverflow answer, which is, in a way, quite similar to yours (the purpose anyway) :
Javascript disable switches current tab functionality in browser
JS/JQuery is indeed very powerful but also have its limits. Imagine a web page always requesting and keeping focus once you've opened it. I think you would be really annoyed, among other things.
That's why browsers prevent those kind of actions. Common browsers at least. Meaning, there's no way to prevent a browser like Firefox, Chrome, IE & Co. to focus a table since it depend of user's parameters.
You'll have to find a way to workaround your problem. I can propose this answer since it seems to have worked for the other guy.
I want to implement a utility for myself that should provide a small console where I can execute random JS in any browser (much like Firebug's console - I don't reinvent the wheel, I just want to do something I need and just have fun doing it).
So the usage use-case would be this:
Click a bookmarklet from any browser.
It shows dialog (much like jQuery dialog or similar) with text area and couple of buttons.
User enter a JS in the text area.
User clicks a button and it gets executed.
User closes the dialog.
I don't know how I can display nice dialog on any web page (Gmail, news, static pages, whatever).
I think it would be possible to create a jQuery dialog (or other library) and show it on the page. But it could lead to a lot of issues as the dialog might conflict with page CSS, JS and so on.
So the question is how to display a custom dialog on any web page from all (major) browsers using JavaScript.
The NOTES: I don't want to have a popup window. IFRAME would be ok but we cannot use it as the web page's DOCTYPE might not support it.
Thanks,
Dmitriy.
http://getfirebug.com/lite.html
Works in IE, Opera, Safari - basically gives you firebug's functionality in any browser.
bookmarklets are pieces of JS code, so you can basically develop any kind of JS program and use it via bookmarklet... just do what you would do normally. check how other bookmarklets work.
regarding the window display - use lightbox-like effect (DIV layered over other content).
I have a requirement to have some modal popups appear on a webpage. At first i implemented them as true modal windows, but then i found out that true modal windows cannot communicate with parent window in IE.
Now i am trying to implement them as regular windows that always steal focus, which is sorta working.
Here is the code that i am using:
modalPopup = window.open(url, 'popup', arr.join(",")); //use a global var here
modalPopup.focus();
$(window).bind("focus.modal", function(){
if(modalPopup){
modalPopup.focus();
} else {
$(window).unbind("focus.modal");
}
});
There are several things wrong with this:
In firefox, once i close the popup, the modalPopup does not become null, it points to parent window. (this is ok, since we dont support firefox anyway)
In IE, it works like a charm when you open 1 window and close it, but opening any more windows results in the exception:
Error: The callee (server [not server application]) is not available and disappeared; all connections are invalid. The call did not execute.
edit: In IE the error happens when modalPopup.focus(); is called. apparently modalPopup is never set to a falsy value when closed :P
Can you help me write a better implementation that uses window.open for creating the popups?
Before anyone says anything, using lightbox is not an option. The popup windows contain A TON of html, javascript etc, and loading them in the DOM is not going to result in a good UX. Also, we sorta have to have this work on IE6.
The windows containing a "ton" of JavaScript, HTML, etc. isn't a reason that you can't use "lightbox" style techniques (which do work on IE6; I don't know if a specific library you've looked at doesn't). The technique is simple:
Have an absolutely-positioned iframe on the page whose z-index is higher than any other content normally shown on the page. Normally the iframe is hidden.
When doing a "modal," show that iframe and set it to cover all other content. Create an absolutely-positioned div with a higher z-index than the iframe and place it wherever you want (typically in the middle of the viewport).
Put your "modal" content in that div. This can be pre-loaded, or you can demand-load JavaScript and other resources to fill it.
Have a UI control of some sort on the div that "closes" it by removing the div and hiding the iframe.
You can build very rich UIs with this that (can) have a dramatically better UX than enforced multiple windows. And you have the advantage of avoiding cross-windows communication and potentially offering much better response time to the user when they "open" one of these windows.
I'm using a custom right click context menu for a flash app (overriding the default adobe menu). For this Uza's right click solution ( http://www.uza.lt/blog/2007/08/solved-right-click-in-as3 ) works well.
However, flash player plugin (for Firefox/Chrome etc) has a bug which breaks usage of international characters when its using WMode for the html embed. WMode="widnow" works.
http://bugs.adobe.com/jira/browse/FP-501
The issue can be seen better here -
http://www.5etdemi.com/blog/archives/2005/06/firefox-wmodetransparent-is-completely-screwy-and-breaks-textfields/
The problem
I need to capture the right click event fired from Flash player plugin to the web browser container without using WMode on the html embed tag (ie. WMode="window")
Does anyone have an idea about this?
The right-click JS hack works in opaque and transparent mode because the browser is rendering the Flash inside its own display tree. In this mode, the browser receives mouse events, allows them to be handled by JS, then passes them to the Flash plugin. (This is the reason why there are bugs with entering accented or non-latin characters in transparent mode, because some browsers don't pass them through properly).
In the other window modes the Flash object is not part of the html DOM in the same way. Instead it is just given a rectangle of the display and can draw to it directly. It also gets its keyboard and mouse events from the OS directly, so I wouldn't expect any JS context menu hacks to work in any mainstream browser.