Flash intégré dans le HTML Solution pour intégrer des fichiers Flash dans le code d'une page Web HTML (Partie 1) _HTML/Xhtml_Production de pages Web-tutoriel HTML-php.cn

C'est la coutume du peuple chinois de célébrer le Nouvel An avant le quinzième jour du premier mois lunaire. Ici, je voudrais souhaiter une bonne année à vos amis du jardin.
Ces derniers jours, la page d'accueil du site Web de l'entreprise a dû être révisée. Après la « réduction des effectifs » de l'entreprise à la fin de l'année dernière, une personne doit faire le travail de plusieurs personnes, et tout à coup, il se sent comme un fardeau. est lourd. Non, ce n'est pas quelque chose qui entre dans le cadre de mon travail. Malheureusement, j'y ai été impliqué. Heureusement parmi les malheurs, la tâche qui m'a été confiée par BOSS cette fois est exactement la tâche de développement front-end qui m'a toujours passionné. . J'ai déjà participé au développement de programmes de gestion back-end pour le site Web de l'entreprise, traitant principalement la logique métier côté serveur. Je n'ai jamais eu l'occasion de mettre à profit mes compétences dans le développement front-end, ce qui me passionne. à propos de. La pratique est le meilleur moyen de tester les vraies connaissances. Résoudre les tâches pratiques qui m'ont été assignées est un test rare. J'ai appris beaucoup de connaissances dispersées à travers des livres et divers matériaux, mais je n'ai pas eu l'occasion de les combiner ensemble. haha. Il y a tellement de taches d'encre sur le devant, qui sont causées par une longue suppression, haha.

Permettez-moi d'abord de décrire les exigences de la tâche : Il y a une image JPG composée de cinq balles sur la page d'accueil du site Web de l'entreprise. Elle est utilisée pour la navigation. Cliquer sur le texte de chaque balle ouvrira les informations correspondantes. Sur la page secondaire, on retrouve une version Flash quasiment identique correspondant à l'image. Une des tâches qui m'est assignée par mon patron est la suivante : lorsque le navigateur client a un lecteur de fichiers Flash installé, la version Flash de la navigation s'affiche, et vice versa, la navigation des images JPG s'affiche. Après avoir terminé la tâche, réfléchissez-y un instant. En tant que développement front-end, vous devez bien sûr prendre en compte les problèmes de compatibilité des navigateurs. Heureusement, la meilleure façon de combler l'écart entre les navigateurs est d'utiliser un ou plusieurs frameworks JavaScript matures. il se trouve qu'il existe un framework JS très mature et sophistiqué, nommé : SWFObject.js.

La première fois que je suis entré en contact avec SWFObject.js, c'était sa V1.5, et cette fois j'ai utilisé la V2.1 pour résoudre le problème. Il existe encore quelques différences dans l'utilisation des deux. Dans l'ensemble, je pense que la V2.1 est un grand pas en avant par rapport à la V1.5 et est plus conforme au style de programmation JavaScript orienté objet en termes de code source du framework et de processus d'utilisation.

Je vais vous emmener dans ce voyage "difficile" du point de vue d'un chercheur qui vient d'explorer JavaScript, que vous soyez novice comme moi ou que vous maîtrisiez déjà l'écriture de divers JS. En tant que vétéran du codage, s'il vous plaît, soyez miséricordieux et espérez que tout le monde pourra souligner la myopie de ma pensée et les erreurs dans mes écrits de manière civilisée.

Le code suivant est un exemple d'utilisation que j'ai adapté d'une documentation de SWFObject V1.5 (si vous souhaitez en savoir plus sur la V1.5, veuillez cliquer sur ce lien) :

Copier le code

Le code est le suivant :

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", "monfilm", "304", "367", "7", "#FFFFFF") ; <br>so.write("flashcontent"); <br></script> <br><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> 🎜> <div id="flashcontent"> <br><a href="http://www.adobe.com/go/getflashplayer"> <br><img src="http:// www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir Adobe Flash Player" border="0" /> <br></a> <br></div> <br></form> <br></corps> <br></html><br>Si vous souhaitez comprendre brièvement la signification de chaque paramètre dans SWFObject(), veuillez vous référer à la documentation, que je ne répéterai pas ici. <br>Je vous recommande fortement de copier le code de "Exemple d'utilisation V1.5" dans le Bloc-notes et de cliquer sur SWFObject V1.5 pour télécharger le fichier source du framework V1.5 requis. Décompressez et recherchez swfobject_source.js (version non compressée). , le nom de fichier de la version compressée est le fichier swfobject.js), renommez le fichier du bloc-notes en demo.html et placez-le dans le même dossier que le fichier swfobject_source.js. Veuillez ensuite l'installer dans IE6/IE7 et fox Run respectivement. dans n'importe quel navigateur tel que Opera, Safari, Navigator, Chrome, etc. et voyez quel est le résultat. <br>Si vous suivez mes suggestions, vous devriez constater que cette image <img style="max-width:90%" alt="" style="max-width:90%" border="0" src="http://files.jb51.net/file_images/article/201301/2013010416185572.gif"> est affichée sur la page au lieu d'un fichier Flash. Pourquoi ? Si la série IE est installée sur votre PC, veuillez suivre les étapes ci-dessous : Cliquez sur l'icône du navigateur IE, recherchez le menu "Outils" dans la barre d'outils, sélectionnez "Options Internet" et cliquez sur "Avancé" dans la fenêtre qui s'ouvre, recherchez l'option "Désactiver le débogage de script (Internet Explorer)", décochez la case en face et cliquez sur "OK". Après avoir terminé les opérations ci-dessus, veuillez parcourir à nouveau la page demo.html. Une boîte de dialogue d'erreur apparaîtra avec le message d'erreur suivant : « Une erreur d'exécution s'est produite. Avez-vous besoin de déboguer ? Ligne : 117 Erreur : 'null. ' est vide ou n'est pas un objet. » <br><br>Si vous utilisez la série d'IDE VS 2003/2005/2008 pour le développement, je n'ai pas besoin de vous apprendre à déboguer le code JavaScript. can var so = Above... Ouvrez un débogueur, puis déboguez et tracez-le. Continuez à appuyer sur F11 jusqu'à ce que vous traciez l'intérieur du fichier swfobject_source.js via la méthode so.write(). Vous constaterez que le paramètre réel ". flashcontent" transmis à so.write(elementId) se trouve dans le document. La valeur de .getElementById("flashcontent") est toujours nulle. Pourquoi ? Vous avez trouvé le problème ? <br><br>Haha, si vous êtes encore un novice qui ne connaît pas grand-chose en JavaScript, vous serez aussi confus que moi à l'époque. Après de nombreuses fois de débogage et de modification du code, je crois fermement que quoi. J'ai écrit Il n'y a pas d'erreur dans le code JS lui-même. Y a-t-il un problème avec le fichier swfobject_source.js chargé en externe S'il y a un problème, où est le problème ? À ce moment-là, je cherchais un moyen de résoudre l'erreur. J'ai modifié le code ci-dessus dans l'exemple suivant : <br><br><div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode34'));"><u>Copier le code</u></span>Code comme suit : </div></div> <div class="msgborder" id="phpcode34"><html> <br><title>DEMO /javascript">
// L'exécution d'une fonction anonyme n'est pas différente de l'exécution d'une fonction ordinaire
(function() {
var flash = document.getElementById("flashcontent");
var msg = null;
window.onload = function() {
if ( flash ) {
msg = 'L'élément existe.'
flash.innerHTML = msg
} else {
msg = 'L'élément n'existe pas';
window.alert( msg );
}
})(); >

//www.adobe .com/go/getflashplayer">
Obtenir Adobe Flash Player

< /form>

Si vous exécutez le code ci-dessus, vous constaterez que cette image est toujours affichée sur la page

, et une boîte d'avertissement contenant "L'élément n'existe pas" apparaîtra. Il semble que le problème ne soit pas causé. par chargement externe.

Si vous voyez cela, vous ressentirez certainement mon agacement à ce moment-là. Après avoir pris un court repos, j'ai vidé mon esprit et regardé en arrière, pour découvrir que l'essence du problème réside dans le "Chargement HTML DOM". ". Dans une page, les scripts JS situés en en-tête de la page (c'est-à-dire entre

) et les fichiers JS chargés à partir de fichiers externes seront exécutés avant que le DOM HTML ne soit réellement construit. Les scripts exécutés à ces deux endroits ne peuvent donc pas accéder au DOM qui n'existe pas encore. Vous devez connaître la vraie raison, c'est-à-dire que lors de l'exécution du code JS dans l'exemple 1.1, le

...

qui n'a pas encore été construit est accédé.

D'accord, après avoir vu cela, il y a une dernière étape que vous devez faire vous-même, qui consiste simplement à modifier le code ci-dessus et à adopter une méthode inélégante pour le résoudre
À propos de "HTML DOM" "Chargement " problème, de quelle méthode s'agit-il ? Je pense que vous l'avez peut-être deviné. Oui, c'est exactement la méthode suivante :

Copier le code

Le code est le suivant :

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

;

;/a>

Derniers articles par auteur