Another DOM question concerning IE & Opera createElement

[Tarik Monem]

Why am I having so much trouble with using DOM in IE & Opera to create, then remove an Object & Embedded element?

Here's the code that works in Firefox (Mac/Win/Linux) and Safari, but not on IE or Opera:

    var myfl_div = document.createElement('myfldiv');
    myfl_div.setAttribute('style','position:absolute; left:100px; top:200px; width:960px; height: 560px; background-color: transparent;z-index: 5;');
 
function myFl_obj_emb()
{
 
    var myBgDiv = document.getElementById('autismlogo');
    myBgDiv.innerHTML = '';
    myBgDiv.innerHTML = '<img src="images/bg5.jpg" usemap="#bg" border="0" alt="Autism the Musical">';
 
    var myAutismFlshObj = document.createElement('object');
    myAutismFlshObj.setAttribute('classid','clsid:d27cdb6e-ae6d-11cf-96b8-444553540000');
    myAutismFlshObj.setAttribute('codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0');
    myAutismFlshObj.setAttribute('width','960');
    myAutismFlshObj.setAttribute('height','560');
    myAutismFlshObj.setAttribute('id','autismIntro');
 
    var myAutismFlshObjParam1 = document.createElement('param');
    myAutismFlshObjParam1.setAttribute('name','allowScriptAccess');
    myAutismFlshObjParam1.setAttribute('value','sameDomain');
 
    var myAutismFlshObjParam2 = document.createElement('param');
    myAutismFlshObjParam2.setAttribute('name','movie');
    myAutismFlshObjParam2.setAttribute('value','autism_intro3.swf');
 
    var myAutismFlshObjParam3 = document.createElement('param');
    myAutismFlshObjParam3.setAttribute('name','quality');
    myAutismFlshObjParam3.setAttribute('value','high');
 
    var myAutismFlshObjParam4 = document.createElement('param');
    myAutismFlshObjParam4.setAttribute('name','bgcolor');
    myAutismFlshObjParam4.setAttribute('value','#000000');
 
    var myAutismFlshObjParam6 = document.createElement('param');
    myAutismFlshObjParam6.setAttribute('name','id');
    myAutismFlshObjParam6.setAttribute('value','autismIntro');
 
 
    var myAutismFlshEmbed = document.createElement('embed');
    myAutismFlshEmbed.setAttribute('src','autism_intro3.swf');
    myAutismFlshEmbed.setAttribute('quality','high');
    myAutismFlshEmbed.setAttribute('bgcolor','#000000');
    myAutismFlshEmbed.setAttribute('width','960');
    myAutismFlshEmbed.setAttribute('height','560');
    myAutismFlshEmbed.setAttribute('name','autism_intro3');
    myAutismFlshEmbed.setAttribute('id','autismIntro');
    myAutismFlshEmbed.setAttribute('align','middle');
    myAutismFlshEmbed.setAttribute('allowScriptAccess','sameDomain');
    myAutismFlshEmbed.setAttribute('type','application/x-shockwave-flash');
    myAutismFlshEmbed.setAttribute('pluginspage','http://www.macromedia.com/go/getflashplayer');
 
    document.body.appendChild(myfl_div);
    myfl_div.appendChild(myAutismFlshObj);
    myAutismFlshObj.appendChild(myAutismFlshObjParam1);
    myAutismFlshObj.appendChild(myAutismFlshObjParam2);
    myAutismFlshObj.appendChild(myAutismFlshObjParam3);
    myAutismFlshObj.appendChild(myAutismFlshObjParam4);
    myAutismFlshObj.appendChild(myAutismFlshObjParam6);
    myAutismFlshObj.appendChild(myAutismFlshEmbed);
}
 
function myfl_obj_emb_remove()
{
    document.body.removeChild(myfl_div);
}
 

Any help is always appreciated and thanks in advance

[acoder]

IE doesn't support creating object elements via the createElement method properly. In fact, input elements can't be created properly either. You have to use the whole HTML string. I'm not sure about Opera.

On your first line, you're creating an invalid element.

[Tarik Monem]

Thanks for the reply.

I thought that might be the case, but I was hoping that maybe there was a chance of a little different syntax for IE. What do you mean by "write it as one string?"

If I can not create an Element using the DOM, then how do I go about removing an embedded flash object from IE?

That was the whole point of using the DOM, was so that I could call removeChild()

Once more, any help is appreciated and thanks in advance.

You guys are the greatest :-)

[Tarik Monem]

OK, this is what I've tried to do, which gives me no errors and the DOM inspector for both Opera and IE show that the nodes are there.

So, what am I doing wrong?

function myFl_obj_emb_ms()
{
    var myBgDiv = document.getElementById('autismlogo');
    myBgDiv.innerHTML = '';
    myBgDiv.innerHTML = '<img src="images/bg5.jpg" usemap="#bg" border="0" alt="Autism the Musical">';
 
    var myAutismFlshObj = document.createElement('object');
    myAutismFlshObj.classid = 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000';
    myAutismFlshObj.codebase = 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0';
    myAutismFlshObj.width = '640';
    myAutismFlshObj.height = '560';
    myAutismFlshObj.id = 'autismIntro';
    myAutismFlshObj.movie = 'autism_intro3.swf';
 
    var myAutismFlshObjParam1 = document.createElement('param');
    myAutismFlshObjParam1.name = 'allowScriptAccess';
    myAutismFlshObjParam1.value = 'sameDomain';
 
    var myAutismFlshObjParam2 = document.createElement('param');
    myAutismFlshObjParam2.name = 'movie';
    myAutismFlshObjParam2.value = 'autism_intro3.swf';
 
    var myAutismFlshObjParam3 = document.createElement('param');
    myAutismFlshObjParam3.name = 'quality';
    myAutismFlshObjParam3.value = 'high';
 
    var myAutismFlshObjParam4 = document.createElement('param');
    myAutismFlshObjParam4.name = 'bgcolor';
    myAutismFlshObjParam4.value = '#000000';
 
    var myAutismFlshObjParam5 = document.createElement('param');
    myAutismFlshObjParam5.name = 'play';
    myAutismFlshObjParam5.value = 'true';
 
    var myAutismFlshObjParam6 = document.createElement('param');
    myAutismFlshObjParam6.name = 'id';
    myAutismFlshObjParam6.value = 'autismIntro';
 
 
    var myAutismFlshEmbed = document.createElement('embed');
    myAutismFlshEmbed.src = 'autism_intro3.swf';
    myAutismFlshEmbed.quality = 'high';
    myAutismFlshEmbed.play = 'true';
    myAutismFlshEmbed.bgcolor = '#000000';
    myAutismFlshEmbed.width = '640';
    myAutismFlshEmbed.height = '560';
    myAutismFlshEmbed.name = 'autism_intro3';
    myAutismFlshEmbed.id = 'autismIntro';
    myAutismFlshEmbed.align = 'middle';
    myAutismFlshEmbed.allowScriptAccess = 'sameDomain';
    myAutismFlshEmbed.type = 'application/x-shockwave-flash';
    /*myAutismFlshEmbed.pluginspage = 'http://www.macromedia.com/go/getflashplayer';*/
 
    document.body.appendChild(myfl_div);
    document.body.appendChild(myAutismFlshObj);
    document.body.appendChild(myAutismFlshObjParam1);
    document.body.appendChild(myAutismFlshObjParam2);
    document.body.appendChild(myAutismFlshObjParam3);
    document.body.appendChild(myAutismFlshObjParam4);
    document.body.appendChild(myAutismFlshObjParam5);
    document.body.appendChild(myAutismFlshObjParam6);
    document.body.appendChild(myAutismFlshEmbed);
}
 
function myfl_obj_emb_remove()
{
    document.body.removeChild(myfl_div);
}
 

The remove function is called after the swf file has completed.

Once more, any help is appreciated and thanks in advance.

[acoder]

I thought that might be the case, but I was hoping that maybe there was a chance of a little different syntax for IE. What do you mean by "write it as one string?"

Instead of

document.createElement("object");

you have to write out the whole HTML string (see documentation).
So you would probably write something like:

document.createElement("<object id=\"...\" width=\"...\" ...>...</object>");

This is incorrect syntax, so won't work in standards-compliant browsers so you could check for the existence of the object and then try this code.

[Tarik Monem]

OK, with some digging around on the internet and help from the last response, here's the solution:

First, I had to use PHP to detect what browser because I found that javascript can not tell between Opera and Internet Explorer and thereafter direct the browser to the proper Javascript code:

<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== FALSE)
{
echo  '
    </head>
    <body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_obj_emb_opera();">
    ';
}
else if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
{
echo  '
    </head>
    <body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_detect_func();">
<div id="myfldiv">
<span>
</span>
</div>    
    ';
}
else
{
echo'</head><body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_detect_func();">';
}
?>
 

The above code also creates a div called "myfldiv" which I did not want to be created with any other browser other than IE.

The following Javascript code, with respects to Opera, creates an element by writing the entire HTML string exactly as the response above suggested.

function myFl_obj_emb_opera()
{
    var myfl_div = document.createElement('myfldiv');
    myfl_div.setAttribute('style','position:absolute; left:100px; top:200px; width:640px; height: 560px; background-color: transparent;z-index: 5;');
 
            var myBgDiv = document.getElementById('autismlogo');
            myBgDiv.innerHTML = '';
            myBgDiv.innerHTML = '<img src="images/bg5.jpg" usemap="#bg" border="0" alt="Autism the Musical">';
 
            myfl_div.innerHTML = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase ="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="640" height="560" id="autismIntro" movie="autism_intro3.swf" src="autism_intro3.swf">';
 
            myfl_div.innerHTML += '<param name=\'allowScriptAccess\' value =\'sameDomain\'>';
 
            myfl_div.innerHTML += '<param name=\'movie\' value =\'autism_intro3.swf\'>';
 
            myfl_div.innerHTML += '<param name=\'quality\' value =\'high\'>';
 
            myfl_div.innerHTML += '<param name=\'bgcolor\' value =\'#000000\'>';
 
            myfl_div.innerHTML += '<param name=\'play\' value =\'true\'>';
 
            myfl_div.innerHTML += '<param name=\'id\' value =\'autismIntro\'>';
 
            myfl_div.innerHTML += '<embed src=\'autism_intro3.swf\' quality=\'high\' bgcolor=\'#000000\' width=\'640\' height=\'560\' name=\'autism_intro3\' id=\'autismIntro\' align=\'middle\' allowScriptAccess=\'sameDomain\' type=\'application/x-shockwave-flash\' pluginspage=\'http://www.macromedia.com/go/getflashplayer\'>';
 
            document.body.appendChild(myfl_div);
}
 

However, I could not get this to work with IE, until I did some digging around adobe's web site and found that IE handles flash differently, so the people at macromedia/abode came up with a solution by way of a JavaScript file of their own that you attach to your html/php page, like so:

<script src="js_files/AC_RunActiveContent.js" type="text/javascript"></script>
 

From there, that allows the "AC_FL_RunConte nt" function to be called, which makes it possible for flash to be played in any version of IE.

function myFl_obj_emb_ms()
{
    var myfl_div = document.getElementById('myfldiv');
    myfl_div.setAttribute('style','position:absolute; left:100px; top:200px; width:640px; height: 560px; background-color: #000000; z-index: 5;');
 
myfl_div.innerHTML = '<script type="text/javascript">AC_FL_RunContent(\'codebase\',\'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0\',\'width\',\'640\',\'height\',\'560\',\'id\',\'autism_intro3\',\'align\',\'middle\',\'src\',\'autism_intro3\',\'quality\',\'high\',\'bgcolor\',\'#000000\',\'name\',\'autism_intro3\',\'allowscriptaccess\',\'sameDomain\',\'pluginspage\',\'http://www.macromedia.com/go/getflashplayer\',\'movie\',\'autism_intro3\' );</script><noscript><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase ="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="640" height="560" id="autismIntro" movie="autism_intro3.swf" bgcolor="#000000" src="autism_intro3.swf">';
 
myfl_div.innerHTML += '<param name=\'movie\' value =\'autism_intro3.swf\'>';
 
myfl_div.innerHTML += '<param name=\'quality\' value =\'high\'>';
 
myfl_div.innerHTML += '<param name=\'bgcolor\' value =\'#000000\'>';
 
myfl_div.innerHTML += '<param name=\'play\' value =\'true\'>';
 
myfl_div.innerHTML += '<param name=\'id\' value =\'autismIntro\'>';
 
myfl_div.innerHTML += '<embed src=\'autism_intro3.swf\' quality=\'high\' bgcolor=\'#000000\' width=\'640\' height=\'560\' name=\'autism_intro3\' id=\'autismIntro\' align=\'middle\' allowScriptAccess=\'sameDomain\' type=\'application/x-shockwave-flash\' pluginspage=\'http://www.macromedia.com/go/getflashplayer\'>';
 
    document.body.appendChild(myfl_div);
}
 

Once the flash file completes it's animation, then it calls a two Javascript functions, one to remove the newly created div and the second to load the home page -- "myhomepage ();"

Here's the remove div function, which (once again) IE did not create the div via createElement function, so I had to use getElementById to select the node to remove it:

function myfl_obj_emb_remove()
{
    if(navigator.appName == "Microsoft Internet Explorer")
    {
        document.body.removeChild(document.getElementById('myfldiv'));        
    }
    else
    {
        document.body.removeChild(myfl_div);
    }
}
 

[Tarik Monem]

One update, the latest version of Opera on Mac requires the same technique used with IE for removing the child node.

Which also required that I use PHP to detect Opera and create the div manually as I did with IE.

<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== FALSE)
{
echo  '
    </head>
    <body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_obj_emb_opera();">
<div id="myfldiv">
<span>
</span>
</div>    
    ';
}
else if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
{
echo  '
    </head>
    <body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_detect_func();">
<div id="myfldiv">
<span>
</span>
</div>    
    ';
}
else
{
echo'</head><body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_detect_func();">';
}
?>
 
 
function myfl_obj_emb_remove()
{
    if(navigator.appName == "Microsoft Internet Explorer")
    {
        document.body.removeChild(document.getElementById('myfldiv'));        
    }
    else if(navigator.appName == "Opera")
    {
        document.body.removeChild(document.getElementById('myfldiv'));
    }
    else
    {
        document.body.removeChild(myfl_div);
    }
}
 

[acoder]

Thanks for posting your working solutions.

You've used browser detection which is prone to error. Wherever possible, you should try feature/object detection. I'm not sure if it is possible in this case, but I haven't tested.