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

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:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
//1. Use Json to initialize variables, parameters, and properties
var flashvars = {
name1: "hello",
name2: "world",
name3: "foobar"
};
var params = {
menu: "false"
};
var attributes = {
id: "dynamicContent2",
name: "dynamicContent2"
};
swfobject.embedSWF("test6_flashvars.swf", "content2", "300", "120", "6.0.0", "expressInstall.swf", flashvars, params, attributes);
//2. Traditional initialization settings, the effect is the same
var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";
var params = {};
params.menu = "false";
var attributes = {};
attributes.id = "dynamicContent3";
attributes.name = "dynamicContent3";
swfobject.embedSWF("test6_flashvars.swf", "content3", "300", "120", "6.0.0",
"expressInstall.swf", flashvars, params, attributes);
//3. Write it directly at the end, just one sentence, concise and powerful, without any procrastination
swfobject.embedSWF("test6_flashvars.swf", "content5", "300", "120",
"6.0.0", "expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"dynamicContent5",name:"dynamicContent5"});
</script>

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

Recommend

...

VMware vSAN Getting Started Summary

1. Background 1. Briefly introduce the shared sto...

The correct way to migrate MySQL data to Oracle

There is a table student in the mysql database, i...

MySQL time types and modes details

Table of contents 1. MySQL time type 2. Check the...

Summary of knowledge points on using calculated properties in Vue

Computed properties Sometimes we put too much log...

Docker image management common operation code examples

Mirroring is also one of the core components of D...

JS+Canvas draws a lucky draw wheel

This article shares the specific code of JS+Canva...

CSS border half or partially visible implementation code

1. Use pseudo-classes to display half of the Bord...

Instructions for deploying projects to remote machines using the Publish Over SSH plugin in Jenkins

Publish Over SSH Plugin Usage Before using Publis...

Detailed tutorial on installing MySQL 5.7.20 on RedHat 6.5/CentOS 6.5

Download the rpm installation package MySQL offic...

Characteristics of JavaScript arrow functions and differences from ordinary functions

Table of contents 1. Use of arrow functions 1. Fr...

Detailed explanation of .bash_profile file in Linux system

Table of contents 1. Environment variable $PATH: ...

MySQL 5.7.18 zip version installation and configuration method graphic tutorial (win7)

The installation of mysql5.7.18zip version on Win...

How to install Docker on Windows 10 Home Edition

I recently used Docker to upgrade a project. I ha...

Detailed graphic explanation of MySql5.7.18 character set configuration

Background: A long time ago (2017.6.5, the articl...