In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in HTML-Webseitencode (Teil 1) _HTML/Xhtml_Webseitenproduktion

WBOY
Freigeben: 2016-05-16 16:40:34
Original
1551 Leute haben es durchsucht

Es ist Brauch des chinesischen Volkes, das neue Jahr vor dem fünfzehnten Tag des ersten Mondmonats zu feiern. Hier möchte ich Ihren Freunden im Garten ein frohes neues Jahr wünschen.
In den letzten Tagen musste die Homepage des Unternehmens überarbeitet werden. Nach dem „Personalabbau“ des Unternehmens Ende letzten Jahres muss eine Person die Arbeit mehrerer Personen erledigen, und plötzlich spürt sie die Belastung ist schwer. Nein, das fällt nicht in meinen Aufgabenbereich. Leider war die mir von BOSS zugewiesene Aufgabe dieses Mal genau die Front-End-Entwicklungsaufgabe, die mir schon immer am Herzen lag . Ich habe mich zuvor mit der Entwicklung von Back-End-Managementprogrammen für die Website des Unternehmens beschäftigt und dabei hauptsächlich Geschäftslogik auf der Serverseite verarbeitet. Ich hatte noch nie die Gelegenheit, meine Fähigkeiten in der Front-End-Entwicklung einzusetzen, wofür ich eine Leidenschaft habe um. Übung ist der beste Weg, um wahres Wissen zu testen. Die Lösung der mir gestellten praktischen Aufgaben ist ein seltener Test. Ich habe viel verstreutes Wissen durch Bücher und verschiedene Materialien gelernt, hatte aber keine Gelegenheit, sie miteinander zu kombinieren. Haha. Es gibt so viele Tintenflecken auf der Vorderseite, die durch langes Unterdrücken entstehen, haha.

Lassen Sie mich zunächst die Aufgabenanforderungen beschreiben: Auf der Homepage des Unternehmens befindet sich ein JPG-Bild, das zur Navigation verwendet wird. Auf der Sekundärseite gibt es eine fast identische Flash-Version, die dem Bild entspricht. Eine der Aufgaben, die mir mein Chef zugewiesen hat, ist: Wenn im Client-Browser ein Flash-Dateiplayer installiert ist, wird die Flash-Version der Navigation angezeigt und umgekehrt wird die JPG-Bildnavigation angezeigt. Nachdem Sie die Aufgabe erhalten haben, denken Sie einen Moment darüber nach. Als Front-End-Entwicklung müssen Sie natürlich Probleme mit der Browserkompatibilität berücksichtigen. Der beste Weg, die Lücke zwischen Browsern zu schließen, ist die Verwendung eines oder mehrerer ausgereifter JavaScript-Frameworks. Es gibt zufällig ein sehr ausgereiftes und ausgefeiltes JS-Framework mit dem Namen: SWFObject.js.

Das erste Mal, dass ich mit SWFObject.js in Kontakt kam, war Version 1.5, und dieses Mal habe ich V2.1 verwendet, um das Problem zu lösen. Es gibt immer noch einige Unterschiede in der Verwendung der beiden. Insgesamt bin ich der Meinung, dass V2.1 im Vergleich zu V1.5 einen großen Fortschritt darstellt und hinsichtlich des Quellcodes des Frameworks und des Nutzungsprozesses eher dem objektorientierten JavaScript-Programmierstil entspricht.

Ich werde Sie auf diese „mühsame“ Reise aus der Perspektive eines Forschers mitnehmen, der gerade JavaScript erforscht hat, unabhängig davon, ob Sie ein Anfänger wie ich sind oder sich bereits mit dem Schreiben verschiedener JS auskennen. Als erfahrener Programmierer Seien Sie bitte gnädig und hoffen Sie, dass jeder auf zivilisierte Weise auf die Kurzsichtigkeit meines Denkens und die Fehler in meinem Schreiben hinweisen kann.

Der folgende Code ist ein Anwendungsbeispiel, das ich aus einer Dokumentation von SWFObject V1.5 übernommen habe (wenn Sie mehr über V1.5 erfahren möchten, klicken Sie bitte auf diesen Link):

Code kopieren
Der Code lautet wie folgt:

DEMO< /title> ; <br /><head> <br><script type="text/javascript" src="swfobject_source.js"></script> > <br>var so = new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF") ; <br>so.write("flashcontent"); <br></head> 🎜> <div id="flashcontent"><a href="http://www.adobe.com/go/getflashplayer"> www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" border="0" /> <br></a> <br></div> <br>< ;/form> <br></body><br>Wenn Sie die Bedeutung der einzelnen Parameter in SWFObject() kurz verstehen möchten, lesen Sie bitte die Dokumentation, die ich hier nicht wiederholen werde. <br>Ich empfehle dringend, dass Sie den Code in „V1.5-Verwendungsbeispiel“ in Notepad kopieren und auf SWFObject V1.5 klicken, um die Quelldatei des erforderlichen V1.5-Frameworks herunterzuladen. Entpacken Sie und suchen Sie swfobject_source.js (unkomprimierte Version). , der Dateiname der komprimierten Version ist swfobject.js), benennen Sie die Notepad-Datei in demo.html um und platzieren Sie sie im selben Ordner wie die Datei swfobject_source.js. Installieren Sie sie dann bitte in IE6/IE7 bzw. fox Laden Sie es in einem beliebigen Browser wie Opera, Safari, Navigator, Chrome usw. herunter und sehen Sie, was das Ergebnis ist. <br>Wenn Sie meinen Vorschlägen folgen, sollten Sie feststellen, dass dieses Bild <img style="max-width:90%" alt="" style="max-width:90%" border="0" src="http://files.jb51.net/file_images/article/201301/2013010416185572.gif"> auf der Seite angezeigt wird, und nicht in einer Flash-Datei. Warum ist das so? Wenn Sie zufällig die IE-Serie auf Ihrem PC installiert haben, befolgen Sie bitte die folgenden Schritte: Klicken Sie auf das IE-Browsersymbol, suchen Sie das Menü „Extras“ in der Symbolleiste, wählen Sie „Internetoptionen“ und klicken Sie im Fenster darauf auf „Erweitert“. öffnet sich, suchen Sie die Option „Skript-Debugging deaktivieren (Internet Explorer)“, deaktivieren Sie das Kontrollkästchen davor und klicken Sie auf „OK“. Nachdem Sie die oben genannten Vorgänge abgeschlossen haben, durchsuchen Sie bitte die Seite „demo.html“ erneut. Wird eine Fehlermeldung mit der folgenden Fehlermeldung angezeigt: „Ein Laufzeitfehler ist aufgetreten. Müssen Sie debuggen? Zeile: 117 Fehler: ‚null‘ „ist leer oder kein Objekt.“ <br><br>Wenn Sie die IDEs der VS 2003/2005/2008-Serie für die Entwicklung verwenden, muss ich Ihnen nicht beibringen, wie Sie JavaScript-Code debuggen can var so = oben... Öffnen Sie einen Debugger und drücken Sie dann so lange F11, bis Sie das Innere der Datei swfobject_source.js über die Methode so.write() verfolgen. Sie werden feststellen, dass der tatsächliche Parameter „. „flashcontent“, der an so.write(elementId) übergeben wird, befindet sich im Dokument. Der Wert von .getElementById(„flashcontent“) ist immer null. Warum ist das so? Haben Sie das Problem gefunden? <br><br>Haha, wenn Sie noch ein Anfänger sind, der nicht viel über JavaScript weiß, werden Sie genauso verwirrt sein wie ich damals. Nach vielen Debugging- und Änderungsversuchen am Code bin ich fest davon überzeugt, dass das so ist Ich habe geschrieben: Es liegt kein Fehler im JS-Code selbst vor. Gibt es ein Problem mit der extern geladenen Datei swfobject_source.js? Damals suchte ich nach einer Möglichkeit, den Fehler zu beheben. Ich habe den obigen Code in das folgende Beispiel geändert: <br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode34'));"><u>Code kopieren</u></span></div>Code wie folgt: </div> <div class="msgborder" id="phpcode34"> <br><html> <br><title>DEMO
/javascript">
// Das Ausführen einer anonymen Funktion unterscheidet sich nicht vom Ausführen einer gewöhnlichen Funktion
(function() {
var flash = document.getElementById("flashcontent");
var msg = null;
window.onload = function() {
if ( flash ) {
msg = 'Das Element existiert.';
msg = 'Das Element existiert nicht';
window.alert( msg );
})(); >

Adobe Flash Player herunterladen
< /form>

Wenn Sie den obigen Code ausführen, werden Sie feststellen, dass dieses Bild immer noch auf der Seite angezeigt wird und ein Warnfeld mit der Meldung „Das Element existiert nicht“ wird angezeigt. Es scheint, dass das Problem nicht verursacht wird durch externes Laden.

Wenn Sie das sehen, werden Sie auf jeden Fall meinen damaligen Ärger spüren. Nachdem ich mich kurz ausgeruht hatte, klärte ich meinen Kopf und stellte fest, dass der Kern des Problems im „HTML-DOM-Laden“ liegt ". Auf einer Seite werden JS-Skripte im Kopf der Seite (d. h. zwischen ) und aus externen Dateien geladene JS-Dateien ausgeführt, bevor das HTML-DOM tatsächlich erstellt wird. Daher können die an diesen beiden Orten ausgeführten Skripte nicht auf das noch nicht vorhandene DOM zugreifen. Sie sollten den wahren Grund kennen, nämlich dass während der Ausführung des JS-Codes in Beispiel 1.1 auf das noch nicht erstellte
...
zugegriffen wird.

Okay, nachdem Sie das gesehen haben, müssen Sie noch einen letzten Schritt selbst tun, nämlich einfach den obigen Code ändern und eine unelegante Methode anwenden, um das Problem zu lösen
Über „HTML DOM“ „Laden“. " Problem, um welche Methode handelt es sich? Ich denke, Sie haben es vielleicht erraten. Ja, es ist genau die folgende Methode:

Code kopieren
Der Code lautet wie folgt:

"text/javascript" src="swfobject_source.js"> _fcksavedurl=""swfobject_source.js">"


Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage