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

33 ice and snow fonts recommended for download (personal and commercial)

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

33 ice and snow fonts recommended for download (personal and commercial)

Solution to the problem that the configuration file my.cnf in MySQL cannot be started due to permission issues

A simple way to implement Vue's drag screenshot function

WeChat applet uses canvas to draw clocks

Use of nginx custom variables and built-in predefined variables

Detailed tutorial on using the Prettier Code plugin in vscode

MySQL 5.7.10 installation and configuration tutorial under Windows

Summary of common docker commands (recommended)

MySQL column to row conversion, method of merging fields (must read)

Analysis of the differences between Iframe and FRAME

Recommend

Solve the pitfall of storing boolean type values in localstorage

Analysis of GTK treeview principle and usage

Two examples of using icons in Vue3

Linux installation steps for Jenkins and various problem solving (page access initialization password)

How to get the maximum or minimum value of a row in sql

Vue globally introduces scss (mixin)

Tutorial on using prepare, execute and deallocate statements in MySQL

How InnoDB cleverly implements transaction isolation levels

JavaScript implements a box that follows the mouse movement

Use MySQL master-slave configuration to achieve read-write separation and reduce database pressure

Comparative Analysis of High Availability Solutions of Oracle and MySQL

MySQL helps you understand index pushdown in seconds

Detailed explanation of the binlog log analysis tool for monitoring MySQL: Canal

Simple steps to write custom instructions in Vue3.0

MySQL 8.0.13 installation and configuration tutorial under CentOS7.3