Maison > Article > interface Web > Comment cibler un frame spécifique via un lien hypertexte en JavaScript ?

Comment cibler un frame spécifique via un lien hypertexte en JavaScript ?

WBOYavant: 2023-09-08 14:01:09818parcourir

如何在 JavaScript 中通过超链接定位特定框架？

Les cadres HTML offrent un moyen pratique de diviser la fenêtre du navigateur en plusieurs parties.

Chacune de ces sections peut charger un document HTML distinct. Nous pouvons utiliser JavaScript pour charger du contenu dans un cadre spécifique, en utilisant la propriété frame de l'objet window. La propriété Frames est un objet de type tableau qui contient tous les cadres (y compris les iframes) de la page actuelle.

Nous pouvons charger le contenu du document dans des frames en utilisant la propriété window.frames[] de différentes manières. Jetons-les un par un -

1. Utilisation de l'index

Pour cibler un cadre spécifique, vous pouvez utiliser l'index ou le nom du cadre. Par exemple, pour cibler le premier cadre de la page, vous pouvez utiliser le code suivant -

window.frames[0].document.location.href = "http://www.example.com"

2. Utiliser le nom du cadre

Pour localiser un cadre à l'aide de son nom, vous pouvez utiliser la méthode suivante. En supposant que le nom du cadre est "frame_name" -

window.frames["frame_name"].document.location.href = "http://www.example.com";

3. Utilisez getElementById et getElementByName

Vous pouvez également localiser le cadre à l'aide de la méthode getElementById() ou getElementsByName(), puis accéder à la fenêtre du cadre à l'aide de la méthode contentWindow comme indiqué ci-dessous -

document.getElementById("frame_id").contentWindow.location.href = "http://www.example.com";
document.getElementsByName("frame_name")[0].contentWindow.location.href = "http://www.example.com";

Exemple

Voici l'extrait de code complet de travail avec toutes ces méthodes -

<!DOCTYPE html>
<html>
<head>
   <title>Target a frame</title>
</head>
<body>
   <button onclick="indexMethod()">Using Index</button>
   <button onclick="nameMethod()">Using Frame Name</button>
   <button onclick="queryMethod()">Using Query Methods</button>
   <iframe src=""
      height="150px"
      width="100%"
      name="frame_name"
      id="frame_id" srcdoc="<html>
         <body style='background-color:#ccc;'>
         <h1>Testing iframe</h1>
         </body>
         </html>">
   </iframe>
   </body>
   <script>
      const indexMethod = () => {
         const child = document.createElement('p');
         child.innerText = 'added inside frame';
         window.frames[0].document.body.appendChild(child);
     };
      const nameMethod = () => {
         const child = document.createElement('p');
         child.innerText = 'added inside frame';
         window.frames["frame_name"].document.body.appendChild(child);
     };
     const queryMethod = () => {
         const child = document.createElement('p');
         child.innerText = 'added inside frame';
         document.getElementById("frame_id").contentWindow.document.body.appendChild(child);
     };
   </script>
</html>

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!

JavaScript html 对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment identifier le type d'instance Image à l'aide de FabricJS ?Article suivant：Comment identifier le type d'instance Image à l'aide de FabricJS ?

Articles Liés

Voir plus