Wie kann ein bestimmter Frame über einen Hyperlink in JavaScript gezielt angesprochen werden?-js-Tutorial-php.cn

Wie kann ein bestimmter Frame über einen Hyperlink in JavaScript gezielt angesprochen werden?

WBOY

Freigeben： 2023-09-08 14:01:09

nach vorne

894 Leute haben es durchsucht

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

HTML-Frames bieten eine bequeme Möglichkeit, das Browserfenster in mehrere Teile zu unterteilen.

Jeder dieser Abschnitte kann ein separates HTML-Dokument laden. Wir können JavaScript verwenden, um Inhalte in einen bestimmten Frame zu laden, indem wir die Frame-Eigenschaft des Fensterobjekts verwenden. Die Frames-Eigenschaft ist ein Array-ähnliches Objekt, das alle Frames (einschließlich Iframes) auf der aktuellen Seite enthält.

Wir können den Inhalt des Dokuments mithilfe der Eigenschaft window.frames[] auf verschiedene Arten in Frames laden. Schauen wir sie uns einzeln an -

1. Index verwenden

Um auf einen bestimmten Frame abzuzielen, können Sie den Index oder den Namen des Frames verwenden. Um beispielsweise den ersten Frame auf der Seite anzusprechen, können Sie den folgenden Code verwenden:

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

Nach dem Login kopieren

2. Verwenden Sie den Rahmennamen

Um einen Rahmen anhand seines Namens zu finden, können Sie die folgende Methode verwenden. Angenommen, der Name des Frames ist „frame_name“ -

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

Nach dem Login kopieren

3. Verwenden Sie getElementById und getElementByName

Sie können den Rahmen auch mit der Methode getElementById() oder getElementsByName() suchen und dann mit der Methode contentWindow auf das Rahmenfenster zugreifen, wie unten gezeigt -

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

Nach dem Login kopieren

Beispiel

Hier ist das vollständige Arbeitscode-Snippet mit all diesen Methoden -

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ein bestimmter Frame über einen Hyperlink in JavaScript gezielt angesprochen werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!