Problem description:
This afternoon I ran into a hassle: IE7 and IE8 intercept navigateToURL('xxx','_blank') inside Flash; getURL under AS2 gets intercepted the same way. I feel like I’ve run into this before, but it doesn’t happen that often, so I never bothered to dig into what conditions trigger the interception. It came up again today, so it’s a good chance to figure out why.
After some searching, I found plenty of discussions from last year. Someone pointed out:
IE7 and Firefox (the version I’m using is 2.0.0.11) block opening new windows with the
navigateToURLmethod, while thegetURLmethod in AS2 doesn’t — which is pretty annoying. Since the project chose AS3, we just have to find a way around it.The first thing that comes to mind is
ExternalInterface, of course, but testing showed it still gets blocked. Then I wondered whether adding wmode would help, so I added the wmode attribute set to opaque to the page — and sure enough, it worked.
Here’s the getURL method in AS3:
function getURL(url:String,window:String=”_blank”):void{ var broswer:String=ExternalInterface.call(“function getBrowser(){return navigator.userAgent}”) as String; if(broswer.indexOf(“Firefox”)!=-1 broswer.indexOf(“MSIE 7.0”)!=-1){ ExternalInterface.call(‘window.open(“‘+url+’”,”‘+window+’”)’); }else{ navigateToURL(new URLRequest(url),window); }}
Usage is the same as getURL in AS2. Also, I only tested IE6/7 and Firefox 2 — I didn’t test other browsers like Safari. Last but most importantly, you have to set the flash object’s wmode attribute to opaque or transparent in the HTML. Because the wmode attribute defaults to window, which means the Flash application has no interaction at all with the HTML layer. The idea above is to pop up the window via as calling js, and that requires wmode=’opaque’ or wmode=’transparent’.
But times have changed, the rules of the game have shifted again, and the method above no longer applies. I just tested: Firefox 3.5.3 doesn’t intercept it. IE7 and IE8 both intercept it.
How strange — how can that be! So I went through the handful of cool Flash sites I had bookmarked, one by one, and found that apsou‘s site has _blank content that doesn’t get intercepted~ I looked into the code on its page and found one difference from the many sites that do get intercepted: wmode.
Solution:
I finally found that setting wmode solves the problem: when wmode=’window’ (the default value), IE no longer intercepts. This may have something to do with the ActiveX mechanism under IE. The line quoted above — “Last but most importantly, you have to set the flash object’s wmode attribute to opaque or transparent in the HTML” — isn’t something you need to worry too much about either. When wmode is window, you can still call js.
Even though I have a solution, I’m really reluctant to change wmode to window. Looks like I still have to communicate with js and let the js side handle getting around the interception.
But thinking it over carefully, it’s actually not a big deal, because the situation with domestic netizens is quite amusing. Generally, people using Firefox or IE7+ or Safari or Google Chrome are the trend-chasers, or the ones who’ve played with all kinds of web2.0 products — the more high-end netizens, so to speak. These people all know what blocking means, and well-intentioned features like “block pop-ups” work better for them. These people usually set up whitelists, so there’s no need to worry about them being unable to access content because of browser blocking. And the majority of the remaining users on XP + stock IE6 are largely not all that enthusiastic about the internet — and conveniently, these users’ browsers won’t intercept our flash either, so they don’t have to learn network filtering settings. Heh heh — each stays in its own place, naturally harmonious.
The differences between the various wmode values
Eh, while I’m at it, let me list a few differences between the wmode values. Here’s a summary of how the various wmode values differ and what each is suited for: Window is the default, window mode, and doesn’t hog the CPU too badly. Transparent is transparent, windowless mode. Opaque is opaque, windowless mode. The most efficient is window mode. For transparency, use transparent. And when you need dynamic interaction (like js), or when window mode is unstable, use opaque. Window and transparent produce screen tearing when dragged inside an iframe under IE6 — personal experience. One more thing: windowless mode consumes a lot of resources, but it guarantees the frame rate.