Ouvrir un fichier dans un navigateur web
Dans article, nous verrons comment ouvrir un fichier avec un navigateur web.
Prérequis : | Vous devez au préalable avoir mis en place un environnement de travail. |
---|---|
Objectifs : | Apprendre les différentes façons d'ouvrir un fichier, ce qu'est un protocole et comment un protocole peut affecter le résultat obtenu. |
Pour ouvrir un fichier dans votre navigateur web, il existe deux méthode :
- Le protocol HTTP : c'est-à-dire utiliser le navigateur pour accéder au fichier de votre serveur web local.
- Le protocole
file
: celui-ci permet d'accéder directement aux fichiers de votre ordinateur via le système de fichiers (pour cela, on passe par le menuFichier
>Ouvrir un fichier…
).
Dans cet article, nous verrons les différences entre ces deux approches et pourquoi celles-ci sont importantes.
Pédagogie active
Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer.
Aller plus loin
Un fichier d'exemple
Prenons un fichier index.html
très simple qui utilise une image (nous verrons plus en détails comment utiliser des images dans les articles suivants) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coucou</title>
</head>
<body>
<h1>Bonjour !</h1>
<p>Je suis une page web toute simple avec :</p>
<img src="/images/licorne.png" alt="une licorne !"/>
</body>
</html>
Ouvrir un fichier depuis le serveur local
Si vous placez ce fichier HTML et l'image associée sous la racine du répertoire du serveur web puis que vous ouvrez le site à l'adresse http://localhost dans votre navigateur, vous devriez obtenir un résultat semblable à celui-ci :
Maintenant, que se passe-t-il si index.html
est déplacé autre part sur le serveur (ce qui arrive plus souvent qu'on le croit à première vue) mais que nos autres ressources (par exemple images
) sont toujours sitées à la racine ?
Lorsqu'on fait référence au fichier image, cette référence commence par une barre oblique (/
) ce qui signifie que l'URL est relative au nom de domaine. Autrement dit, pour accéder à l'image, on remonte à la racine du domaine (en l'occurence localhost
) puis à partir de ce point, on suit le chemin spécifié peu importe où est située la ressource à partir de laquelle on souhaite accéder à l'image (le fichier index.html
de cet exemple pourrait être placé n'importe où sur le serveur localhost
).
Quel que soit le nouvel emplacement de index.html
, tant que le chemin utilisé pour l'image est /images/licorne.png
, le navigateur servira http://localhost/images/licorn.png.
Par exemple, si le fichier est déplacé sous http://localhost/toto
, on pourra toujours voir la licorne :
Ouvrir un fichier local
Maintenant, ouvrons un fichier présent sur l'ordinateur. Il existe trois méthodes :
- Dans le navigateur, cliquer sur
Fichier
⯈Ouvrir un fichier…
- Glisser-déposer un fichier dans le navigateur
- Sélectionner un fichier HTML en double-cliquant dessus (sous réserve que le logiciel associé aux fichiers
.html
soit bien votre navigateur)
Le navigateur interprètera toujours le fichier HTML mais n'affichera pas l'image :
Les liens absolus relatifs à un nom de domaine
Nous ne voyons plus l'image car nous avons utilisé un chemin relatif à un nom de domaine. En effet, nous avons indiqué au navigateur d'afficher une image situé au chemin suivant /images/licorne.png
. Le navigateur va donc à la racine du système de fichiers de votre ordinateur et se déplace dans le répertoire images
qui n'existe probablement pas. Le navigateur ne parvient pas à trouver l'image, il se résigne à utiliser l'attribut alt
(et affiche donc "une licorne !
").
AJAX et JavaScript
Attention, JavaScript ne fonctionne pas bien avec le protocole file
. Ainsi, lorsque vous voudrez lancer une requête AJAX, cela déclenchera cette procédure :
- Chargement du code JavaScript qui remplacera une partie de la page web avec une autre partie.
- Récupération de cette « autre partie » à l'adresse
http://localhost/ajax/remplacement.html
. - Remplacement de la première partie avec la seconde.
Pour que la deuxième étapes fonctionne, AJAX a besoin d'utiliser le protocole HTTP. Or, le protocole pour accéder à un fichier local n'est pas http://
mais file://
. CQFD : on ne peut pas accéder à un fichier local avec une requête AJAX. Cette restriction s'applique également à de nombreuses autres API JavaScript qui ne fonctionnent qu'avec le protocole HTTP. Cela est dû au modèle de sécurité utilisé pour le Web, que nous aborderons dans un autre article.
Ce que nous avons appris
Pour résumer, il est utile de repérer comment un fichier est ouvert dans un navigateur afin de déterminer le contexte dans lequel on se place et pour comprendre les restrictions qui s'appliquent (notamment pour un fichier ouvert en local avec file://
). Cela permet parfois d'éviter de penser que le site ne fonctionne pas correctement alors qu'il s'agit uniquement d'une ouverture de fichier malencontreuse.
- Lorsqu'on utilise le protocole
file
pour visualiser une page web, il est nécessaire d'utiliser des URL absolues avec des noms de domaine. - Le protocole
file
est restreint quant à l'utilisation de JavaScript.
À l'opposé, le protocole file
protocol est une méthode simple et efficace pour :
- Vérifier l'allure d'un document sans sa mise en forme.
- Vérifier l'accessibilité du site lorsque les images ne sont pas disponibles (les images sont alors remplacées par le texte contenu dans l'attribut
alt
).
Prochaines étapes
Maintenant que nous avons vu les différences entre le protocole http
et le protcole file
, vous pouvez continuer :