Comment cibler un frame spécifique via un lien hypertexte en JavaScript ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-09-08 14:01:09

avant

913 Les gens l'ont consulté

如何在 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"

Copier après la connexion

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";

Copier après la connexion

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";

Copier après la connexion

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>

Copier après la connexion

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!