Galactic Civilizations 3
Lancer un script JavaScript après le chargement de la page

Lancer un script JavaScript après le chargement de la page

Catégorie: Javascript.
Posté par le 18/06/2013.
Dernière mise à jour le 03/10/2013.

Description

Dans ce tutoriel, vous apprendrez comment lancer un script JavaScript après le chargement de la page. Ce tutoriel vous expliquera comment le faire avec ou sans jQuery.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte. Il nécessite des connaissances de base en html et en JavaScript.

Solution sans utiliser jQuery

La page

Pour commencer, nous allons créer un fichier du nom de tutorielsenfolie.html.
Ce fichier contiendra une page vide et permettra d’appeler le script JavaScript qui sera exécuté après le chargement complet de la page.

tutorielsenfolie.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" >
<head>
    <title>Script execute apres le chargement de la page</title>
<!-- On appelle le script qui sera exécuté après le chargement complet de la page -->
   <script language="javascript" src="chargement.js"></script></link>
</head>
<body>

Cette page est vide.
</body>
</html>

Le script

Maintenant que notre page html est créée, nous allons créer notre fonction de test ainsi que le code qui sera l'exécutera lorsque le chargement de la page est complètement terminé.

Pour ce faire crée un fichier du nom de chargement.js:

chargement.js

if(window.addEventListener){
    window.addEventListener('load', maFonctionDeTest, false);
}else{
    window.attachEvent('onload', maFonctionDeTest);
}

function maFonctionDeTest(){
    //on affiche "vive tutoriels en folie"
    alert("vive tutoriels en folie !");
}

La fonction « maFonctionDeTest » sera exécutée uniquement lorsque la page sera totalement chargée.

Solution avec jQuery

Dans cette section, je vais vous expliquer comment lancer un script JavaScript après le chargement de la page à l'aide de jQuery.

La page

Pour pouvoir utiliser les fonctionnalités de jQuery, nous devons l'inclure dans l'entête HTML (balise « <head> » ).

Pour ce faire, nous allons ajouter « <script language="javascript" src="http://code.jquery.com/jquery-latest.js"></script> » en dessous de la balise « title »:

tutorielsenfolie.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" >
<head>
    <title>Script execute apres le chargement de la page</title>      <script language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- On appelle le script qui sera exécuté après le chargement complet de la page -->
   <script language="javascript" src="chargementAvecJQuery.js"></script></link>
</head>
<body>

Cette page est vide.
</body>
</html>

Le script

Le code jquery permettant de lancer un script JavaScript après le chargement de la page est très simple.

Pour ce faire crée un fichier du nom de chargementAvecJQuery.js:

chargementAvecJQuery.js

$(document).ready(maFonctionDeTest());

function maFonctionDeTest(){
    //on affiche "vive tutoriels en folie"
    alert("vive tutoriels en folie !");
}

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: html JavaScript jQuery web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don