News

Search

Top Results

Result

Bookmark

Share

Poll

Tag Cloud

Links

Redirect If Flash Is Not Installed

03rd October, 2009


Hello, have been really busy lately so as a result, the blog on here has become a bit out dated, don't worry though as I am planning to start up the blogging again!

I noticed recently that there is no simple answer to redirecting someone to a non-flash version of a website, or to replace flash content with something more compatible.

In this short post I will show you a very basic script that will allow you to redirect your visitors who have an old or even no version of flash player installed.

A quick example of what the script will do:

The user without flash (or an old version) visits part of your site with flash content on.

The script will detect this and redirect them to a completely different page set up to work with no flash, or to tell them to upgrade Smile.

First things first though, you will need to grab a copy of swfobject.js, (Google it) and include it in the header of your page.

if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash
} else {
// User does not have flash
window.location="noFlash.php";
}

The 7.0.0 part of the script is the lowest version number of flash that is allow to run without a redirect.

But what if I want to redirect to the same page but add a URL parameter?

Read on... Smile

You could always wrap the Javascript with some php code to prevent a never ending loop of redirects if you want to redirect visitors back to the same page, but with a new URL parameter.

e.g.

if($_GET['flash'] == "no") {
//don't do anything
} else {
//Redirect Javascript code goes here
}


This would then redirect a visitor to:
http://example.com/flashContent.php?flash=no

(providing the Javascript is set to redirect to flashContent.php?flash=no if there is no flash or it is out dated.)

Hope that helps out someone Smile

As always drop me a comment if you want to ask a question, or say hi Big Grin


Comments

austin smith

02nd February, 2010 at 1:29 pm

Hi there, I'm a bit of a novice but on our site I want to add a redirect to a URL and have followed the instructions above but I still cannot get it working. Any Ideas?
Ross

02nd February, 2010 at 11:14 pm

Hi

First off make sure that you have included the swfobject.js in your page, e.g.

<script type="text/javascript" src="PathTo/swfobject.js"></script>

You could then do the following to redirect to a non-flash page


<?php if($_GET['flash'] == "no") { } else { ?>


<script type="text/javascript">
//<![CDATA[


if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash
} else {
// User does not have flash
window.location="non-Flash-Page-Name.php?flash=no";
}


//]]>
</script>

<?php } ?>



The above code simply says that if the parameter flash equals no, then do nothing, else, redirect them to a non-flash page with the flash parameter equal to no e.g. non-Flash-Page-Name.php?flash=no

Hopefully that helps, if not, post me your code so far in a comment, or tell me whats not working Smile :)

Thanks for checking out the blog


Ross
Rob Kinnear

18th February, 2010 at 3:45 pm

Hi

I have a Flash site at the moment and am building an html site for SEO purposes. I'd like the new html site to start as the index page but wondered if I could redirect anyone with the Flash plugin to another URL. This will hopefully sort out my SEO problems - as Google and others will index my entire html site but people with Flash get redirected to the nicer styled pages...

Thanks in advance...
Ross

26th February, 2010 at 12:24 pm

Hi

You can simply use the code below to do that, for example..

First include the Javascript file in the head of your document like so. (Google swfobject to downlaod the Javascript file)

<script type="text/javascript" src="PathTo/swfobject.js"></script>

Then paste in the rest of the code below

<script type="text/javascript">
//<![CDATA[


if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash so redirect them window.location="Flash-Page-Name.html";
} else {
// User does not have flash, do nothing
}


//]]>
</script>



Thanks Smile :)
AJ

05th March, 2010 at 12:22 pm

Hi Ross,

Thanks for the tutorial, just what i was looking for, but i think imust be doing something wrong. I have a flash site, and i would like that users on mobiles/pda's and non flash users to be directed to antohername.html when they visit the index page.
I entered the first script at the beginning of my index.html and added the php script after the head and edited the location, and still not working, can you advise anything?

Kind Regards

AJ
Ross

05th March, 2010 at 2:48 pm

Hi AJ

First off, make sure that you have the correct file path for the Javascript include file, sometimes all it takes is an extra / to mess things up Smile :)

Providing that's correct, If you want to redirect users to a completely different page that is built for non-flash visitors then the php side of the script is not needed.

You can simply include the non-php script right after you have included the swfobject file, so that both sections are in the head of the page.

The code below should work fine for you.

<script type="text/javascript" src="PathTo/swfobject.js"></script>

<script type="text/javascript">
//<![CDATA[

if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash so do nothing
} else {
// User does not have flash, so redirect them
window.location="antohername.html";
}

//]]>
</script>


That should fix the problem, If you are still stuck, feel free to leave me another comment.

Thanks for visiting Big Grin :D
AJ

08th March, 2010 at 8:26 am

Hi Ross, thanks, it worked ok. but i also have another question, when i visit the site from an iTouch i get directed to the non flash site, but when i use my pda which has Windows Mobile 6 installed, it doesnt get directed. any ideas?

Thanks for your help so far Smile :)

AJ
Ross

08th March, 2010 at 10:12 pm

Hi AJ, good to here its working Smile :)

I have not got a Windows Mobile 6 OS to test on but I think that your PDA most likely has flash player 7 installed therefore causing the script to not redirect.

Try lowering the .hasFlashPlayerVersion("7.0.0") version to a lower one.

See if that works, if not post back and I will have a closer look at the problem Big Grin :D

Thanks
Otter

09th April, 2010 at 7:29 am

very well written blog i enjoy reading this site
meeyop

27th April, 2010 at 4:41 pm

Thanks for this useful article.
PA

07th May, 2010 at 8:20 pm

great share, great article, very usefull for me...thank you
sunmani

22nd May, 2010 at 1:08 am

Really good sharing this.
SC

02nd June, 2010 at 2:53 pm

Hey Thanks for the article!
I have a working script that I don't want to mess with
Except
I want to have a redirect page if user does not have flash
(for all the iUsers) where would I put that in this code?
I read the comments above but this "set up" I have is a bit different.
any help would be appreciated.
thanks

<!DOCTYPE html PUBLIC "<//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>version 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {
bgcolor : "#000000",
allowFullScreen : "true",
scale :"noscale",
allowScriptAccess : "always",
swLiveConnect : "true"
};
var attributes = {};
swfobject.embedSWF("preview.swf", "myContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<style type="text/css">
html, body, div {
height: 100%;
overflow: hidden;
}
body {
background: #000000;
font: 86% Arial, sans-serif;
margin: 0;
}
#main {
height: 100%;
}
</style>
</head>
<body bgcolor="#000000">
<div id="myContent">
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
Ross

05th June, 2010 at 3:41 pm

Hey, thanks for the comment and sorry about the late reply

I will take a look @ your problem in a bit and see if I can give you a solution Big Grin :D
Ross

05th June, 2010 at 5:43 pm

Ok SC, the following code is your original with the flash detect code from my blog added in.

The page will run as normal on browsers with flash, but when they don't have it, i.e. iPad's iPhone's etc it will redirect to a page called noFlash.html which can easily be changed, and is defined near the top of the script.

Thanks for visiting



<!DOCTYPE html PUBLIC "<//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>version 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash so setup parameters etc as normal

var flashvars = {}; var params = {
bgcolor : "#000000",
allowFullScreen : "true",
scale :"noscale",
allowScriptAccess : "always",
swLiveConnect : "true"
};
var attributes = {};
swfobject.embedSWF("preview.swf", "myContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

} else {
// User does not have flash so redirect to a different URL
window.location="noFlash.html";
}


</script> <style type="text/css">
html, body, div {
height: 100%;
overflow: hidden;
}
body {
background: #000000;
font: 86% Arial, sans-serif;
margin: 0;
}
#main {
height: 100%;
}
</style>
</head>
<body bgcolor="#000000">
<div id="myContent">
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
CR

10th July, 2010 at 6:13 am

Awesome thanks!
SE

24th September, 2010 at 2:36 pm

Your article is simple great, Especially for beginners!
Alex

21st January, 2011 at 3:20 am

On the second option that you gave: XSS injection would be very easy if they could guess the flash parameter.
Ross

27th January, 2011 at 6:15 pm

Hey Alex, thanks for the comment

Actually, I believe that the second PHP example code that I gave is not susceptible to XSS attacks. This is because XSS (Cross Site Scripting) can only occur if you actually output something user-generated on the page.

As long as the $_GET['flash'] parameter is only used in that one IF statement, and its result not output to the user on the page then you should be fine Smile :)

Of course the code I have displayed above, and in any other posts on my site are only examples and should not necessarily just be copied directly, although I always try my best to make sure its as safe as can be Smile :)

Thanks
Mark N

25th February, 2011 at 9:49 am

Great blog and I feel I am on the edge of a breakthrough. However, I could really do with your help.

[Hidden Link]

Would you have a look at the code for me? I have confirmed the location of the .Js file and this seems to be ok.

Thanks again.

Mark
Ross

27th February, 2011 at 12:18 pm

Hi Mark, thanks for visiting Smile :)

I've had quick look at your code and you have two problems. The first is that swfobject is undefined, basically to fix this you need to download and use the latest copy of swfobject (2.2 at time of writing) from the link below.

http://code.google.com/p/swfobject/

then you need to update your current version of swfobject to the new one.

The second issue is that you have included the PHP code, and for what your trying to do, this is not needed (plus your can't run PHP from inside a HTML file anyway)

So you need to remove the following lines from your code

<?php if($_GET['flash'] == "no") { } else { ?>

and

<?php } ?>

and that's it! Your site should now be redirecting non-flash users to your noflash page!

Thanks for the comment, and if you have any further problems feel free to leave another Smile :)
Nib

27th February, 2011 at 7:14 pm

hi, new to the site, thanks.
Mark

13th March, 2011 at 1:59 pm

Thanks Ross!

I really appreciate your help Ross. I made the changes and now the visitor goes in an infinite loop where the site thinks its not got flash and reloads.

I will put it live for you to have a look at if thats ok?

Thanks Ross,

Mark
Ross

18th March, 2011 at 5:35 pm

Hi Mark, no prob Smile :)

Sorry about the late reply, could not find the live version of the site but if its redirecting in an infinite loop you could be linking back to the same page.

For example, if your page is index.html and your redirecting to index.html?noflash=true this would cause an infinite loop.

Basically to fix this you need to redirect to a completely different page that does not include the flash detecting script, this way a redirect will only occur once

Hope that helps, if not feel free to leave another comment and I'll keep an eye out for any reply's!
Mark Ninnim

18th March, 2011 at 6:08 pm

Of course...

I dont think I had set the page as index but I use a SEO program that allows me to copy tags and code across my pages. I think I may of copied the code onto my redirect page.

So, user with no flash gets redirected to my noflash.html page which in turn would redirect the user back again... what an idiot!

However, I did manage to get 1800 page views in 3 hours which was pretty impressive!

Thanks Ross, I will try again.

Mark
Jethran

12th June, 2011 at 1:32 pm

Works perfectly. Thanks!
Jonathan

08th July, 2011 at 12:53 am

I have a website that was created by another web developer that is all flash. My boss has created a html site that mirrors the flash site, but would work on an ipad, iphone, etc. He used dreamweaver to create the site. Where we are currently stuck is that we do not know where to upload the new site onto server. When we have done that what code could detect no flash and then have the user redirected to the mobile version. Any help or a point int he right direction would be helpful. Thank you.
jenn

08th July, 2011 at 8:08 pm

I am having major codeing problems with the redirection coding. I was wondering if you could help me please. I am pulling my hair out. This is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>test me please</title>
The code below should work fine for you.
<br />
<script type="text/javascript" src="file:///Macintosh HD/work/test me please/hold/swfobject.js"></script>
<script type="text/javascript">
//<![CDATA[
if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash so do nothing
} else {
// User does not have flash, so redirect them
window.location="http://www.my site.com/please.html";
}

//]]>
</script>

</head>

<body>
<p>blah blah blah blah
</p>
<br />
<div id="flash_content">
<embed id="mainFlashObj" width="100%" height="100%" wmode="transparent" quality="high" bgcolor="#000000" name="mainFlashObj" src="PATH_TO_FILE_WITH_NO_SPACES/flashtest.swf" type="application/x-shockwave-flash"></embed>
</div>
<div id='footer'></div>
<p>&nbsp;</p>
</body>
</html>

thank you so much.
jenn
Ross

11th July, 2011 at 1:08 pm

Hi Jenn

Your code looked alright to me, I think it's likely you had a small syntax error or file path error somewhere.

The code below is a checked (and testedSmile :)) version of you code which should work fine for you as long as you make sure you are including the swfobject.js file correctly (and have the latest version from http://code.google.com/p/swfobject/). Also just a note, it's best to never have spaces within any URL paths!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>test me please</title>
The code below should work fine for you.
<br />
<script type="text/javascript" src="PATH_TO_FILE_WITH_NO_SPACES/swfobject.js"></script>
<script type="text/javascript">
//<![CDATA[
if (swfobject.hasFlashPlayerVersion("7.0.0")) {
// User has flash so do nothing
} else {
// User does not have flash, so redirect them
window.location="http://www.my site.com/please.html";
}

//]]>
</script>

</head>

<body>
<p>blah blah blah blah
</p>
<br />
<div id="flash_content">
<embed id="mainFlashObj" width="100%" height="100%" wmode="transparent" quality="high" bgcolor="#000000" name="mainFlashObj" src="PATH_TO_FILE_WITH_NO_SPACES/flashtest.swf" type="application/x-shockwave-flash"></embed>
</div>
<div id='footer'></div>
<p>&nbsp;</p>
</body>
</html>

Thanks for the comment
Ross

14th July, 2011 at 1:10 pm

Hi Jonathan

If it was me, I would create an alternate URL such as ipad.example.com or noflash.example.com or if you are unsure how to create sub-domains you could always place your site into a directory and direct non-flash users to that such as example.com/ipad etc

Then to redirect non-flash users just follow the blog post above. The comments also feature some useful tips and code examples to suit different situations!

Thanks for the comment Smile :)
Hugo

14th October, 2011 at 3:07 am

Just to say THANK YOU!! Smile :)
Karen

01st May, 2012 at 3:56 pm

This seems so straightforward, yet I can't get it to work on my ipad. I downloaded the latest swfobject file but it still isn't working. Any ideas?
rob

12th May, 2012 at 1:19 pm

I don't have a clue if this works as I haven't had chance to try it yet but i'm sure it does. I have skills in flash but built my latest portfolio site by using the template which works great apart from issues with chrome hardware acceleration. I can now build a quick site in flash and use this redirection until chrome issues are fixed. Thank you very much!
Ross

27th May, 2012 at 5:44 pm

Hi Karen

It looks as though your setup is not working on indextmp.html because the version of swfobject you have included needs to be upgraded to the latest one.

(Also I noticed your currently detecting the iPhone/iPad/iPod user agent for redirects and I'd recommend switching it over to this setup once your have it working as it's a more reliable way of doing things Smile :))

So to get this working just visit http://code.google.com/p/swfobject and select the downloads tab, then download the latest .zip (currently swfobject_2_2.zip). Once you have that update your current swfbject .js file with the latest minified one (swfobject.js) and your'll have a working redirect!

Thanks
Anderson

02nd June, 2013 at 8:28 am

Wao! I know it has been over a year that this posted was written but I'm a testimony of the fact that even after several years this post is still having a positive impact on people. Thanks so much, I found the Flash redirect for non-compatible devices very useful. Cheers!
chris

20th November, 2013 at 9:03 pm

Hi, thanks for this clear peace of code explanation. Your post on 05th March, 2010 at 2:48 pm did the big trick!
Pat

01st November, 2014 at 5:12 pm

Thanks.

Name Required

(Not Displayed)

Invalid Email
Message Required

CAPTCHA Image Reload the captcha image

Recent Comments

» Pat

Thanks.

» chris

Hi, thanks for this...

» Anderson

Wao! I know it has been...