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

According to Chinese custom, we are still celebrating the New Year before the fifteenth day of the first lunar month. Here I would like to wish your friends in the garden a happy new year.
It happened that the company's website homepage needed to be revised these days. After the company's "staff downsizing" at the end of last year, one person had to do the work of multiple people, and suddenly I found the burden heavy. Well, this was not originally within my job scope, but unfortunately I was involved in it. The good thing about this misfortune is that the task assigned to me by my boss this time is exactly the front-end development task that I have always been passionate about. Previously, I had been engaged in the development of backend management programs for the company's website, mainly processing business logic on the server side, and had never had the opportunity to display my skills in the front-end development that I was passionate about. Practice is the best way to test true knowledge, and solving the practical tasks assigned to me is a rare test. I have learned a lot of scattered knowledge through books and various materials, but I have not had the opportunity to combine them together for a "comprehensive test", haha. There are so many words written above, it’s all because of being suppressed for too long, haha.

Let me first describe the task requirements: There is a JPG picture consisting of five balls on the homepage of the company's website. Its function is to navigate. Clicking the text on each ball will open the secondary page of corresponding information. There is an almost identical Flash version corresponding to the picture. One of the tasks assigned to me by my boss is to display the Flash version of the navigation when the client browser has a Flash file player installed, otherwise display the JPG image navigation. After getting the task, I thought about it for a moment. Since it is front-end development, of course I have to consider browser compatibility. The best way to cross the gap between browsers is to use one or more mature JavaScript frameworks. Fortunately, there happens to be a very mature and sophisticated JS framework called: SWFObject.js.

The first time I came into contact with SWFObject.js was its V1.5, and this time I used V2.1 to solve the problem. There are still some differences in the use of the two. Overall, I feel that V2.1 is a great leap forward compared to V1.5. V2.1 is more in line with the object-oriented JavaScript programming style, both in terms of the source code of the framework and the usage process.

I will take you on this "tough" journey from the perspective of a learner who has just explored JavaScript. Whether you are a novice like me, or a veteran who can already skillfully write various JS codes, I hope you will be lenient and point out the short-sightedness in my thinking and the mistakes in my writing in a civilized manner.

The following code is an example of usage that I adapted from a description document of SWFObject V1.5 (click this link if you want to learn more about V1.5):

Copy code

The code is as follows:

<html>
<title>DEMO</title>
<head>
<script type="text/javascript" src="swfobject_source.js"></script>
<script type="text/javascript">
var so = new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");
so.write("flashcontent");
</script>
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
</body>
</html>

If you want to briefly understand the meaning of each parameter in SWFObject(), please refer to the documentation. I will not repeat it here.
I strongly recommend that you copy the code in "V1.5 Usage Example" into Notepad, and click SWFObject V1.5 to download the required source file of the V1.5 framework. After decompression, find the swfobject_source.js (uncompressed version, the compressed version file name is swfobject.js) file, rename the Notepad file to demo.html and put it in the same folder as the swfobject_source.js file, and then run it in any browser such as IE6/IE7, fox, opera, safari, navigator, chrome, etc. to see the results.
If you followed my advice, you should see this image on the page.

, rather than a Flash file, why? If you happen to have IE series installed on your PC, please follow the steps below: click the IE browser icon, find the "Tools" menu on the toolbar, select "Internet Options", click "Advanced" in the window that opens, find the "Disable script debugging (Internet Explorer)" option, uncheck the box in front of it, and click "OK". After completing the above operations, browse the demo.html page again. You will find an error prompt box popping up with the following error message: "A runtime error occurred. Do you need to debug? Line: 117 Error: 'null' is empty or not an object."

If you happen to be using VS 2003/2005/2008 series IDE for development, then I think there is no need to teach you how to debug JavaScript code. You can put a debugger above var so = ..., and then debug and trace in. Keep pressing F11 until you trace to the inside of the swfobject_source.js file through the so.write() method. You will find that the actual parameter "flashcontent" passed to so.write(elementId) is always null when document.getElementById("flashcontent") is used. Why is this? Did you find the problem?

Haha, if you are still a novice who doesn't know much about JavaScript, you will be confused like I was at that time. After many times of debugging and code modification, I firmly believe that there is no error in the JS code I wrote. Could it be that there is a problem with the externally loaded swfobject_source.js file? If there is a problem, then what is the problem? At that time, I tried to find a solution to the error. I modified the above code into the following example:

Copy code

The code is as follows:

<html>
<title>DEMO</title>
<head>
<script type="text/javascript">
// Executing an anonymous function is no different from executing a normal function
(function() {
var flash = document.getElementById("flashcontent");
var msg = null;
window.onload = function() {
if ( flash ) {
msg = 'The element does exist.';
flash.innerHTML = msg;
} else {
msg = 'The element does not exist';
window.alert( msg );
}
};
})();
</script>
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" _fcksavedurl=""http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
</body>
</html>

If you execute the above code, you will find that the picture is still displayed on the page.

, and a warning box pops up containing "The element does not exist". It seems that the problem does not come from the externally loaded swfobject_source.js file.

If you read this, you will definitely experience my frustration at that time. After a short rest, I cleared my mind and looked back, and found that the essence of the problem lies in the "loading of HTML DOM". In a page, the JS scripts in the page head (between <head></head>) and the JS files loaded from external files will be executed before the HTML DOM is actually constructed. Therefore, scripts executed in these two places cannot access the DOM that does not exist yet. You should know the real reason. That is, during the execution of the JS code in Example 1.1, <div id="flashcontent">……</div> was accessed before it was constructed.

Well, there is one last step that you need to do yourself, which is to simply modify the above code and take an inelegant method to solve the problem of "HTML DOM loading". Which method is it? I think you may have guessed it. Yes, it is the following method:

Copy code

The code is as follows:

<html>
<title>DEMO</title>
<head>
<script type="text/javascript" src="swfobject_source.js"></script> _fcksavedurl=""swfobject_source.js"></script>"
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
<script type="text/javascript">
var so = new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");
so.write("flashcontent");
</script>
</body>
</html>

The thousands of words above are just describing how many detours I took, the troubles I encountered in the process of solving problems, how I got out of the troubles, used the knowledge I learned, and learned again. Although it is a bit cumbersome, have you gained something like me?

<<: Implementation of CSS border length control function

>>: React Router 5.1.0 uses useHistory to implement page jump navigation