Everyone knows there is a problem in having a valid XHTML 1.0 strict page when you want to use some flash on it. In another post I described how this can be done but unfortunately that thing wasn't complying with the XHTML 1.0 strict instead was fine for the pages validating using the Transitional Standard of W3C XHTML specifications.
Now I came back on this subject with a solution that fix the "Strict" problem, for this I appealed to a little help from Javascript using the getElemementById method.
To insert a flash code in a web page according to the adobe specification you have to use a code almost similar with this one:

  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="590" height="400">
  2.     <param name="movie" value="swf/flash.swf">
  3.     <param name="quality" value="high">
  4.     <embed src="swf/flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="590" height="400"></embed>
  5.   </object>

Above code will insert an flash movie with the width of 590 and the height of 400, the flash movie is called flash.swf and it is situated in the swf directory. This code will cause some errors (I will not tell you here which) and the page fails to validate.
My method is to remove all the flash code from the page and to insert it using a small external javascript file.
The javascript file we will call it flash.js and place it in the /js directory inside the site root and should have the following content:

  1. function flash(){
  2. document.getElementById('flash').innerHTML = "<object width=\"590\" height=\"400\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"><param value=\"swf/flash.swf\" name=\"movie\"/><param value=\"high\" name=\"quality\"/><embed width=\"590\" height=\"400\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" quality=\"high\" src=\"swf/flash.swf\"/></object>";
  3. }

Be careful to write all this code on a single line because it is a string and a string in javascript can't be stretched on multiple lines. As you see we are using the document.getElementById('flash').innerHTML method to write some content on a div with the id flash. The page should have the following code:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. <head>
  5. <title>Insert valid Flash in XHML 1.0 Strict</title>
  6. <script type="text/javascript" src="js/flash.js">   
  7. </script>
  8. <style type="text/css">
  9. #flash {
  10. width: 590px;
  11. height: 400px;
  12. background-color: #777;
  13. }
  14. </style>
  15. </head>
  16. <body onload="flash()">
  17. <h1>Insert flash animation using javascript</h1>
  18. <div id="flash"></div>
  19. </body>
  20. </html>

The result will display a valid page with a flash on it. As you see we include the javascript external file and we load the flash() function from it using the body event onload. The flash code is not displayed and everything we have at View source is the empty div.
That's all.