Ajax and the new IE7 and "Update" to browsers < IE7

cruzonover · January 6, 2007

Ok, I don't really know where to go from here. I'm getting really, REALLY frustrated here. >:( I have been playing around with AJAX and it seems pretty cool. I had been using inline frames for one of my sites because that seems to truly load an external page instead of just "including" it in the display of the current page. What I'm running into is this:

The "new and improved?" IE7 and the security update for browsers that are older due to this STUPID lawsuit that some guy threw at Microsoft for some patent violation is causing me some major headaches. I try to reuse my stuff rather than have to re-invent the wheel. Well, I have a flash based map of the USA, that we've all seen, that allows you to pick a state to purchase items specific to that state. Using inline frames, I can get the flash object to be displayed and activated already when the page loads. This is done using javascript. Well, when I use an ajax call instead to populate a div with the code of an external page (or data from a database), something about ajax doesn't like to run code inside <script language="javascript"> or text/javascript, etc. and it doesn't even load the flash object, much less activate it. It will load the flash object using the <object> tag just fine, but then visitors to the site will have that annoying message saying they have to "activate" the control by clicking on it or pressing the spacebar, whatever. This just throws the three click rule right out the window doesn't it? I know that I hate it when I go to sites and I have to double click on something to be able to use it. I digress.

To sum up my above war and peace post, does anyone know how to get around this issue of using an ajax call to get the code and actually display the flash object already activated? Or am I just trying to do too many things at once and just stick with the inline frames?

irken · January 6, 2007

Well.

I can kind of understand what you're trying to archive - tho it's bit hard from just reading a description - could you please post some code of what's troubling you, it's much easier to help you out if there's something to look at.

Thank you.

cruzonover · January 6, 2007

Sorry, I usually do that but being that it's late and I've already pulled all my hair out. doh!

I attempted to use one of Microsoft's way of getting around the flash non-active problem. From their site at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/activating_activex.asp.

That code is:
document.write('<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000">');
document.write('<param name="movie" value="flash/usmap.swf">');
document.write('<param name="quality" value="High">');
document.write('<param name="border" value="0">');
document.write('<param name="width" value="648">');
document.write('<param name="height" value="548">');

Also, I didn't quite tell everything that is going on. I am using a flash header as the nav bar. The client wanted something flashy, so I had to be a smart a$$.

Anyway, that code is here:
getURL("javascript:ajaxpage('posters.htm', 'contentarea');");

I am new to AJAX (like 2 days new) and wanted some examples to play around with, so I'm using an example from here: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

The code in my <head> section is the same as what is there. For the other pages, the code in the flash header file works just fine, when it's only html. Once I get further into AJAX, then I will start to write my own stuff and hopefully will have something not as bulky as what's on the dynamic drive site. But, right now I don't know squat about AJAX. I think that I can figure it out, it seems like a server side processing version of dynamic html. I just have to get the concept down. So, below is the full flow of what I'm looking for:

Here is the important piece of what is in my index.html file:
<TD WIDTH=760 HEIGHT=465>
<div id="contentarea"></div>
</TD>

Header flash file calls ajax script using:
getURL("javascript:ajaxpage(usamap.htm', 'contentarea');");

Ajax script that I am using to play around with is at:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Should populate my <div id="contentarea"></div> of my main page with the flash object already activated, using this code (as suggested by Microsoft):
document.write('<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000">');
document.write('<param name="movie" value="flash/usmap.swf">');
document.write('<param name="quality" value="High">');
document.write('<param name="border" value="0">');
document.write('<param name="width" value="648">');
document.write('<param name="height" value="548">');

Which is called from my usamap.htm using the <script.....> line in the below code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
</head>
<body>
<div align="center">
<script src="usamap.js"></script>
</div>
</body>
</html>

Index page has div tag "contentarea", flash nav header in index page calls ajax script to get data from usamap.htm file to populate "contentarea", usamap.htm file calls usamap.js to write usamap flash object already activated.

Wow, now that I look at that, that's UGLY! there has got to be a better way. 4:30 in the morning here now, my brain is oatmeal.

irken · January 6, 2007

Ok.

Not having any experience with flash, using flash or how to write to already activated objects and whatnot, let me see if I got it right.

Flash header calls an AJAX function that requests usamap.html from the server.

usamap.html includes a Javascript file which contains the following:

[code]
document.write('<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000">');
document.write('<param name="movie" value="flash/usmap.swf">');
document.write('<param name="quality" value="High">');
document.write('<param name="border" value="0">');
document.write('<param name="width" value="648">');
document.write('<param name="height" value="548">');
[/code]

You need the above lines to be displayed inside your "contentarea" div? If that's the case, then I don't understand why you are doing it from a javascript file. If the above lines is all it's containing, then just include the lines in usamap.html. I'll try and make an example of it, but I'm stilll not following 100%.. give me a moment or two.

irken · January 6, 2007

Look over this when you get a chance..

http://www.conventia.dk/test/

I'm not entirely sure it's what you want, seems too easy for what you're trying to archieve. But let me know so we can figure it out :D

cruzonover · January 6, 2007

Well, I thank you for the help. I clicked on the link you provided. It does bring the map up now using an ajax call, at least from the link you provided. But, it does a document.writeln. From what I read in the Microsoft page (the link I provided above), document.writeln performs the same way as the <object> tag. Meaning, it doesn't activate it automatically. Plus, for some reason, when I click on the Display Map link in the page you provided, it shows the first document.writeln(' and then the map. I'm wondering if it's not finding the first document.writeln and that is why it's no activated. But, you've done a lot better than I have, at least your ajax call works. Now I just need to figure that one out. What do you think about the activate issue?

irken · January 7, 2007

[quote author=cruzonover link=topic=121227.msg498465#msg498465 date=1168124204]
Well, I thank you for the help. I clicked on the link you provided. It does bring the map up now using an ajax call, at least from the link you provided. But, it does a document.writeln. From what I read in the Microsoft page (the link I provided above), document.writeln performs the same way as the <object> tag. Meaning, it doesn't activate it automatically. Plus, for some reason, when I click on the Display Map link in the page you provided, it shows the first document.writeln(' and then the map. I'm wondering if it's not finding the first document.writeln and that is why it's no activated. But, you've done a lot better than I have, at least your ajax call works. Now I just need to figure that one out. What do you think about the activate issue?
[/quote]

Oh, wasn't sure if there was any difference in the writeln or write functions in this case.

I'm not really getting the activate problem you're talking about, I'll have to see some example of what's going on. We'll figure it out, just reply with some links. - was that you that sent me an email earlier?

cruzonover · January 7, 2007

It wasn't me that sent an e-mail. I actually didn't know you could send an e-mail on here. :) I only registered last night when I couldn't come up with the solution myself. Anyway, the first link that should be read is: http://www.microsoft.com/technet/security/advisory/912945.mspx. This is the Microsoft article that talks about the Active X functionality that IE7 has by default and IE6 can be "updated" using this patch. I don't know the full details, what I can gather is that Microsoft lost some patent lawsuit that some guy put on them. It has to do with Active X controls (Flash, Dynamic HTML, embedded media player, etc). What happens is that when someone visits a site that has certain Active X controls in them, instead of getting to use the functionality that the Active X controls are there for, visitors are instead provided with a message when they place their mouse over the Active X control. For ease of discussion and since it's what I'm using, we'll use a flash (.swf file) object. If you had the update listed in this article, or you have downloaded and installed IE7, then you should notice when you place your mouse over a flash movie in the page, the movie will be highlighted with a border around it and a tag will show up that reads something like "to use this control, click on it or press the space bar to activate it". For lack of a better word, it's damned annoying. In trying to make sure that my clients sites don't drive visitors away because of that annoying little "feature", there is a work around that can be done. From what I can see, it's basically using javascript to place the object in the page instead of just using the <object> tag.

Here are a couple of links that discuss how to do the work around:
http://blog.deconcept.com/swfobject/
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/activating_activex.asp.
http://www.adobe.com/devnet/activecontent/articles/devletter.html

The second link is Microsoft telling how to do the work around. Because I generally only look at example code provided in places like dynamicdrive.com or hotscripts.com to learn how to do something and then write my own code, I decided to start out using the microsoft way of doing things. The first link provides a very cool js file that does the work for you of embedding an <object> in an html page by only passing parameters in a function call. The third link is Adobe's site that also provides a cool js file to do the work for you. I've tried having the solutions from all three links and they seem to work fairly well, if you are only dealing with calling an <object> from an html link in the page (an <a href="blah"></a>). What these solutions offer is getting an object like a flash movie to display in a web page and it is already active. Meaning, there is no annoying border that highlights the movie and gives you a little message telling a visitor to activate the control. It's already active, as it should be and has been up until now. When you go to a site that has a flash movie, if you don't have this "update" and you don't have IE7, when you go to use the flash movie, you can use it right away.

What I'm hoping to accomplish is to get an ajax call to do the same thing when calling the ajax call from another flash movie. You have provided a nice ajax call. But that still doesn't seem to want to handle anything inside of a <script> block. As seen on the page you provided, it displays document.writeln(' right in front of the flash movie. The flash movie isn't sized at all how the parameters in the Test.js file tell it to be. In Test.js, the width is defined as 648 and the height is 648. As you can see on the example page you provided, the flash movie isn't sized to those dimensions. So now I'm wondering if it's an ajax problem that doesn't like to play well with javascript.

Here is an example:
http://homenet.tzo.com/ajax/

this page just has two links.
Link one makes an ajax call to grab the data of an external page that has a flash file embeded in it using the old method of just <object>

Link two makes an ajax call to grab a second external page to display the same flash movie using a work around (link provided above). That second external page uses the AC_RunActiveContent.js (adobe solution) work around to display the flash movie.

The ajax routine that I'm using is from dynamic drive: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

As you can see from my example, the first link displays the map with no problem, but it has the visitor do the "activation" if they have IE7 or the "update" for IE6. The second link doesn't display the map at all.

cruzonover · January 7, 2007

I figured I'd post the code of the pages above as well.

Index.html:

<html>

<head>

<script type="text/javascript">

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

</head>

</body>
<p>
<a href="#" onclick="javascript:ajaxpage('example1.htm', 'contentarea');">Run example 1</a>
<p>
<a href="#" onclick="javascript:ajaxpage('example2.htm', 'contentarea');">Run example 2</a>
<p>
<p>
<div id="contentarea"></div>
</body>
</html>

example1.htm:

<html>
<head>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="648" height="548">
<param name="movie" value="usmap.swf">
<param name="quality" value="High">
<embed src="usmap.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="648" height="548" quality="High">
</object>
</head>

example2.htm:

<html>
<head>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body>
<script language="text/javascript">
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0',
'width', '648',
'height', '548',
'border','0',
'movie', 'usmap',
'quality', 'high',
'src', 'usmap',
'wmode', 'window',
'play', 'true',
'loop', 'true',
'menu', 'false',
'allowScriptAccess','always',
'devicefont', 'false',
'embedmovie','false',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer'
);
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="648" height="548">
<param name="movie" value="usmap.swf">
<param name="quality" value="High">
<embed src="usmap.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="648" height="548" quality="High">
</object>
</noscript>
</body>
</html>

irken · January 7, 2007

Right. Made some progress.. but there's a problem I can't quite figure out. When I evaluate the scripts in the code, it get's displayed on a new page rather than on the same page - and an [Object Error]. I'll continue to try and figure it out tho.

Here's some code.. test version here: http://www.conventia.dk/test/index.html

Actually, let me just rar that up for you instead. There's so much. You get some eclipse project settings too, just ignore those - unless you use eclipse :D.

Download: http://www.conventia.dk/test.rar

It should be pretty easy to understand, but please ask if anything. Gonna try and figure out why it won't display on the same page. I use the sample code from the Adobe site (button flash and html). As you can probably see in the index.html file, I try to evaluate the javascript code - which results in it being displayed as a new page. I've not been doing this for too long, I learn as I go.

cruzonover · January 7, 2007

That is very cool, and at the same time strange. I'm looking at it also, for me, it's not opening a new window, it's just replacing the entire contents of the index page with the contents of the second page.

also, found this article for ya and anyone else that wants to read up on why this is happening and what could have been done to avoid it.

http://sidesh0w.com/weblog/2003/10/06/the_eolas_matter/

irken · January 7, 2007

[quote author=cruzonover link=topic=121227.msg498791#msg498791 date=1168149766]
That is very cool, and at the same time strange. I'm looking at it also, for me, it's not opening a new window, it's just replacing the entire contents of the index page with the contents of the second page.

also, found this article for ya and anyone else that wants to read up on why this is happening and what could have been done to avoid it.

http://sidesh0w.com/weblog/2003/10/06/the_eolas_matter/
[/quote]

Yeah - it's not opening a new window as such, it's overlapping the entire page as you wrote. Might be their script that's causing it - or maybe I'm just not doing it right. Evaluating code inside a div.. I'll have to run through it.

cruzonover · January 9, 2007

I can't figure it out.

cruzonover · January 15, 2007

Ok, I've been going about this wrong I've found out. This isn't about the IE7 and flash problem, this is about AJAX and it's inability to return and execute javascript. AJAX returns just text, nothing else, just text. So, it's no wonder the javascript isn't working. I found another post on this forum:

http://www.phpfreaks.com/forums/index.php/topic,117431.0.html

It talks about using eval().

irken · January 15, 2007

Yeah.. I was using eval() too. I just can't figure it out.. not very experienced in all this yet, slowly catching on. I still got my eyes on it tho, when I get some free time here and there. Let me know how you progress.

mainewoods · January 31, 2007

read my post in this thread:
http://www.phpfreaks.com/forums/index.php/topic,123645.0.html
--it explains how to code for script tags returned from ajax and the eval() 'document.write' problem and how to code for it

Sign In

Ajax and the new IE7 and "Update" to browsers < IE7

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information