LinkedText<"/> LinkedText<">
recherche

Maison >interface Web >js tutoriel >Positionner les fenêtres en utilisant JavaScript ou HTML

Positionner les fenêtres en utilisant JavaScript ou HTML

PHPz
PHPzavant
2023-09-04 18:13:021126parcourir

使用 JavaScript 或 HTML 定位窗口

Dans cet article, nous apprendrons comment ouvrir un site Web dans une nouvelle fenêtre à l'aide de l'attribut TARGET HTML et JavaScript

Attribut TARGET du HTML

Utilisez la propriété Target de l'ancre pour spécifier l'ouverture du lien nommée frame ou window Étiquette. La balise de fermeture dans le contenu HTML doit apparaître après chaque balise d'ouverture Parce que les éléments sont appariés. Bien que l'élément href (référence hypertexte) de l'ancre Il existe plusieurs autres options pour la balise, elle est obligatoire car elle contient la page où se trouve la page https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 Le lien disparaîtra une fois cliqué.

Grammaire

<a href="https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561" target="_top"> Linked Text </a>

Valeur de l'attribut - La fenêtre cible de https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 spécifiée par l'attribut href est référencée par ceci propriété. Il peut avoir l'une des valeurs suivantes -

  • _top - Il remplace tout cadre existant pour charger des pages Web dans la fenêtre du navigateur avec le texte intégral.

  • _self - Par défaut, _self est la valeur par défaut de la propriété cible. Il ouvre la page Web dans la même fenêtre ou cadre dans lequel le lien a été ouvert.

  • _blank - Une nouvelle fenêtre de navigateur s'ouvrira après le chargement de la page Web.

  • _parent - Cette méthode charge la page Web dans une fenêtre ou un jeu de cadres parent.

L'élément

de HTML (qui affichera le contenu du site Web lié) doit avoir Fournissez l'attribut NAME si vous souhaitez charger le contenu Web dans un cadre différent. De plus, l'attribut target de l'élément doit être spécifié avec le nom de l'élément. Le cadre dont le contenu sera affiché.

Exemple

Dans cet exemple, comprenons l'utilisation de target="blank" comme indiqué ci-dessous. La page Web s'ouvrira Chaque fois que l'utilisateur clique sur le texte du lien, il sera affiché dans une nouvelle fenêtre. 

<!DOCTYPE html>
<html>
<title>Target a Window Using JavaScript or HTML - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <h2 style="color:rgb(6, 92, 157);">The webpage will launch in a new window after clicking the link below.</h2>
   <a href="https://www.php.cn/link/1a09a1f048354ae7570bf137f30abd21" target="_blank">Welcome to Tutorialspoint website!</a>
</body>
</html>

À l'aide de JavaScript, ouvrez dans un nouvel onglet https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561

La balise Anchor en HTML est un moyen simple et direct d'ouvrir https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 dans un nouvel onglet. Cette section a Plus d'informations sur ce label. Cependant, il existe certains cas où Javascript doit être utilisé pour réaliser Même mission. La méthode window.open() est utile dans ce cas. basé sur un navigateur Valeurs de configuration et de paramètres, la méthode window.open() peut être utilisée pour ouvrir une nouvelle fenêtre Fenêtre du navigateur ou nouvel onglet.

Stratégie

  • Nous devons utiliser _blank dans le deuxième paramètre pour ouvrir un nouvel onglet en utilisant la méthode window.open().

  • La valeur renvoyée par window.open(). La référence renvoyée par window.open() est soit la fenêtre ou l'onglet nouvellement généré, soit null en cas d'échec.

  • Évitez d'ajouter un troisième paramètre à cela, car cela entraînerait l'ouverture d'une nouvelle fenêtre au lieu d'un onglet.

Grammaire

window.open(https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561, '_blank');

Exemple

Dans cet exemple, comprenons comment ouvrir un lien dans un nouvel onglet en utilisant JavaScript (https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561) Méthode window.open(). 

<!DOCTYPE html>
<html>
<title>Target a Window Using JavaScript or HTML - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body style="text-align:center; padding-top: 50px;">
   <p> Once you click the button <strong>tutorialspoint.com</strong> link will launch in a new tab
   </p><br>
   <button button type="button" class="btn btn-success" onclick="openNewTab()">
      <strong>Open TutorialsPoint</strong>
   </button>
   <script>
      function openNewTab() {
         window.open(
            "https://www.php.cn/link/1a09a1f048354ae7570bf137f30abd21", "_blank");
      }
   </script>
</body>
</html>

Exemple

<!DOCTYPE html>
<html>
<title>Target a Window Using JavaScript or HTML - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body style="text-align:center; padding-top: 50px;">
   <p> Click the button to learn <strong>JavaScript</strong> with
      <strong>tutorialspoint.com</strong> link, it will launch in a new tab</p><br>
   <button button type="button" class="btn btn-success" onclick="myNewTab()">
      <strong>Open TutorialsPoint</strong>
   </button>
   <script>
      function myNewTab() {
         window.open(
            "https://www.php.cn/link/1a09a1f048354ae7570bf137f30abd21javascript/index.htm", "_blank");
      }
   </script>
</body>
</html>

Présentation

En HTML, vous devez inclure https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 dans l'attribut href de l'ancre Utilisez cet élément si vous souhaitez diriger les utilisateurs vers un autre site Web. Si vous souhaitez que le lien s'ouvre dans une nouvelle fenêtre Dans la fenêtre du navigateur, vous devez également inclure la cible.

Vous pouvez accomplir la même tâche en JavaScript en utilisant la méthode window.open(). même Bien que nous puissions également le faire en utilisant HTML, l'option JavaScript est avantageuse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Astuce : exploitez la puissance de jQuery pour extraire des données à partir de fichiers XMLArticle suivant：Astuce : exploitez la puissance de jQuery pour extraire des données à partir de fichiers XML

Articles Liés

Voir plus