From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/fr/webapi/browser/index.html | 209 ------------------------------------- 1 file changed, 209 deletions(-) delete mode 100644 files/fr/webapi/browser/index.html (limited to 'files/fr/webapi/browser/index.html') diff --git a/files/fr/webapi/browser/index.html b/files/fr/webapi/browser/index.html deleted file mode 100644 index 776952894f..0000000000 --- a/files/fr/webapi/browser/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: Using the Browser API -slug: WebAPI/Browser -tags: - - WebAPI -translation_of: Mozilla/Gecko/Chrome/API/Browser_API/Using ---- -

{{ non-standard_header() }}

- -

{{ B2GOnlyHeader2('privileged') }}

- -

Résumé

- -

L'API HTML Browser (Navigateur HTML) est une extension de l'élément {{HTMLElement("iframe")}} qui permet aux applications d'implémenter des navigateurs ou des applications de navigations. Cela implique deux choses principales :

- - - -

Il est également possible de communiquer sur le fait que le contenu intégré soit une application web. Dans ce cas, le contenu sera chargé avec le contexte pertinent (comme les permissions).

- -

Utilisation

- -

Un élément {{HTMLElement("iframe")}} est transformé en fenêtre de navigateur en utilisant l'attribut {{htmlattrxref("mozbrowser","iframe")}} :

- -
<iframe src="http://hostname.tld" mozbrowser>
- -

Afin d'intégrer une application web, il faut également renseigner l'attribut {{htmlattrxref("mozapp","iframe")}}, la valeur sera le chemin vers le manifeste de l'application :

- -
<iframe src="http://hostname.tld" mozapp='http://chemin/du/manifeste.webapp' mozbrowser>
- -

Enfin, en utilisant l'attribut {{htmlattrxref("remote","iframe")}} le contenu de l'élément{{HTMLElement("iframe")}} peut être chargé en utilisant uniquement un processus fils qui sera séparé de celui de la page qui contient l'élément {{HTMLElement("iframe")}}.

- -
<iframe src="http://hostname.tld" mozbrowser remote>
- -
-

Warning : Ce dernier attribut est indispensable pour des raisons de sécurité lors du chargement de contenu provenant d'une origine inconnue. Si vous ne l'utilisez pas, cela rendra votre application vulnérable aux attaques d'un site web malveillant.

-
- -

Permissions de l'application

- -

Chaque application qui souhaite intégrer une fenêtre de navigateur devra avoir la permission browser au sein du manifeste d'application.

- -
{
-  "permissions": {
-    "browser": {}
-  }
-}
- -

Si elle souhaite intégrer une application web, l'application hôte devra disposer de la permission embed-apps.

- -
{
-  "permissions": {
-    "browser": {},
-    "embed-apps": {}
-  }
-}
- -

Méthodes supplémentaires

- -

Afin d'être conforme aux spécifications d'un navigateur  {{HTMLElement("iframe")}}, Firefox OS étend l'interface DOM {{domxref("HTMLIFrameElement")}}. Ces nouvelles méthodes permettent d'augmenter les capacités de l'élément  {{HTMLElement("iframe")}} :

- -

Les méthodes de navigation

- -

Ces méthodes permettent de naviguer au sein de l'historique de l'élément {{HTMLElement("iframe")}}. Elles sont nécessaires afin d'implémenter les boutons de pages précédentes, suivantes ou le bouton d'actualisation de la page.

- - - -

Les méthodes liées aux performances

- -

Ces méthodes sont utilisées pour gérer les ressources utilisées par un navigateur contenu dans un élément {{HTMLElement("iframe")}}. Cela est particulièrement utile lorsqu'il s'agit d'un navigateur utilisant des onglets.

- - - -

Méthodes liées aux événements

- -

Afin de gérer le contenu du navigateur {{HTMLElement("iframe")}} il est nécessaire d'introduire de nouveaux événements (voir ci-après). Les méthodes suivantes peuvent être utilisées pour manipuler ces événements :

- - - -

Méthodes diverses

- -

Ces méthodes sont des utilitaires destinés aux applications qui conteiennent un navigateur {{HTMLElement("iframe")}}.

- - - -

Événements

- -

Afin de permettre à une application de manipuler le navigateur {{HTMLElement("iframe")}}, l'application peut écouter, surveiller les nouveaux événements qui se passent au sein du navigateur  {{HTMLElement("iframe")}}. Il est possible de surveiller les événements suivant :

- - - -

Exemple

- -

Dans cet exemple, nous verrons comment implémenter un navigateur intégré de manière simplifiée.

- -

HTML

- -

Dans le code HTML, il faut juste ajouter une barre pour la saisie de l'URL, un bouton « Aller à », un bouton « Arrêter » et un élément  {{HTMLElement("iframe")}} pour le navigateur.

- -
<header>
-  <input id="url">
-  <button id="go">Aller à</button>
-  <button id="stop">Arrêter</button>
-</header>
-
-<iframe src="about:blank" mozbrowser remote></iframe>
-
- -

CSS

- -

Il est possible de passer du bouton « Aller à » au bouton « Arrêter »  (et vice versa) en utilisant ce fragment de code CSS :

- -
button:disabled {
-  display: none;
-}
- -

JavaScript

- -

Et maintenant, il faut ajouter les fonctionnalités nécessaires au navigateur :

- -
document.addEventListener("DOMContentLoaded", function () {
-  var url  = document.getElementById("url");
-  var go   = document.getElementById("go");
-  var stop = document.getElementById("stop");
-
-  var browser = document.getElementsByTagName("iframe")[0];
-
-  // Cette fonction permet de passer entre le bouton "Aller" au bouton "Arreter"
-  // (et vice versa). Si le navigateur charge, le bouton "Aller" est désactivé
-  // et le bouton "Arrêter" est activé. Sinon, on a l'état inverse.
-  function uiLoading(isLoading) {
-      go.disabled =  isLoading;
-    stop.disabled = !isLoading;
-  }
-
-  go.addEventListener("touchend", function () {
-    browser.setAttribute("src", url.value);
-  });
-
-  stop.addEventListener("touchend", function () {
-    browser.stop();
-  });
-
-  // Quand le navigateur charge, on change l'état des boutons "Aller" et "Arrêter"
-  browser.addEventListener('mozbrowserloadstart', function () {
-    uiLoading(true);
-  });
-
-  // Quand le navigateur a fini de charger du contenu,
-  // on change l'état des boutons "Aller" et "Arrêter"
-  browser.addEventListener('mozbrowserloadend', function () {
-    uiLoading(false);
-  });
-
-  // Si jamais il y a une erreur il faut également
-  // changer l'état des boutons "Aller" et "Arrêter"
-  browser.addEventListener('mozbrowsererror', function (event) {
-    uiLoading(false);
-    alert("Erreur de chargement : " + event.detail);
-  });
-
-  // Lorsqu'un utilisateur suit un lien il faut s'assurer que
-  // l'emplacement de la nouvelle page apparaît dans la barre d'URL
-  browser.addEventListener('mozbrowserlocationchange', function (event) {
-    url.value = event.detail;
-  });
-});
- -

Voir aussi

- - -- cgit v1.2.3-54-g00ecf