Flash embedded in HTML Solution for embedding Flash files in HTML web page code (Part 2)

The above article has temporarily concluded my introduction to the use of SWFObject V1.5. Now I will introduce SWFObject V2.1 to you all. If I had known V2.1 earlier, I might not have been bothered by the "waiting for HTML DOM to load" problem.

First, let me briefly introduce the calling example of V2.1 syntax:

Copy code

The code is as follows:

Personally, I prefer the third way of writing above. As will be mentioned below, my final solution for embedding Flash files in HTML code is to use the third style of calling swfobject.embedSWF(). The style of V2.1 is very consistent with the style of modern JS, and the code appears more concise.

The solution adopted in the previous article seems to be able to meet most of the needs, and the compatibility seems to be acceptable. It should be able to meet the needs of most friends, and it is also an acceptable solution. However, I found a more extreme situation:

Copy code

The code is as follows:

new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");

If the address of the Flash file passed in is incorrect, or the Flash file is deleted on the server, you will see a situation that you would not want to see, as shown below:

Copy code

The code is as follows:

<html>
<title>DEMO</title>
<head>
<script type="text/javascript" src="swfobject_source.js"></script>
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="upload/2022/web/get_flash_player.gif" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
<script type="text/javascript">
// Note that I added an f before the Flash file name.
var so = new SWFObject("http://www.pec365.com/Flash/f20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");
so.write("flashcontent");
</script>
</body>
</html>

It is recommended that you execute this code yourself. If you are a novice, you can refer to the steps introduced in the previous article to run this code and truly feel the arrival of the "disaster".

Yes, you will see that the page is blank, and the image that was originally used to replace the image when Flash cannot be displayed is also gone. Where did it go? After debugging, I found that even if the address of the passed-in Flash file is wrong, an erroneous <object [……]></object> tag will be created to replace the content in <div id="flashcontent">[……]</div>, so that what you see is a blank area with a height of 304px and a width of 367px respectively (if you have installed the Flash player, right-click the upper left corner of the screen and you will find it), and the nightmare begins.

In order to solve this nightmare result, I came up with a bad idea. First, check whether the file really exists on the server according to the address of the Flash file passed in. If the returned result is that the Flash file exists, then execute the swfobject.embedSWF() method. The specific idea is to use the XMLHttpRequest object to request the server through the GET/HEAD method, and then judge xmlHttp.status == 200 || xmlHttp.status == 302 as the basis for the existence of the file. However, this method seems to have certain defects. I am not able to improve it yet. Here is an example of my final solution:

Copy code

The code is as follows:

<html>
<title>DEMO</title>
<head>
<script language="javascript" type="text/javascript" src="JavaScript/swfobject.js"></script>
<script type="text/javascript">
(function() {
var xmlHttp,
result,
flashURL = "http://www.pec365.com/Flash/20071113.swf";

var checkFlashURL = function(url) {
xmlHttp = GetXmlHttpObject();
xmlHttp.onreadystatechange = function() {
if ( xmlHttp.readyState == 4 ) {
if ( xmlHttp.status == 200 ||
xmlHttp.status == 302 ) {
return (result = true);
}
}
};
xmlHttp.open("HEAD", url, true);
xmlHttp.send(null);
};
var GetXmlHttpObject = function() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
// Older IE
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// New IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}

return xmlHttp;
};
// is used to check whether the specified Flash file exists on the server
checkFlashURL(flashURL);
window.onload = function() {
if ( result ) {
swfobject.embedSWF(flashURL, "flashcontent", "304", "367", "10.0.0", "expressInstall.swf", {}, { quality:"autohigh", wmode:"transparent" }, {});
}
else {
window.alert("Your Flash address is invalid, please check carefully"); // Just used to check whether the Flash address is correct during debugging
}
}
})();
</script>
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="upload/2022/web/get_flash_player.gif" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
</body>
</html>

Wow, I spent several hours on these two articles. I accidentally stayed in the company until almost 10pm, and the security guard came to kick me out. I want to finish it quickly. I will polish the text when I have time at work tomorrow, haha.

<<: JavaScript Basics: Immediate Execution Function

>>: Notes on MySQL case sensitivity