Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyasarkan bingkai tertentu melalui hiperpautan dalam JavaScript?

Bagaimana untuk menyasarkan bingkai tertentu melalui hiperpautan dalam JavaScript?

WBOYke hadapan: 2023-09-08 14:01:09817semak imbas

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

Bingkai HTML menyediakan cara yang mudah untuk membahagikan tetingkap penyemak imbas kepada beberapa bahagian.

Setiap bahagian ini boleh memuatkan dokumen HTML yang berasingan. Kami boleh menggunakan JavaScript untuk memuatkan kandungan ke dalam bingkai tertentu, menggunakan sifat bingkai objek tetingkap. Sifat Frames ialah objek seperti tatasusunan yang mengandungi semua bingkai (termasuk iframe) pada halaman semasa.

Kami boleh memuatkan kandungan dokumen ke dalam bingkai menggunakan harta window.frames[] dalam pelbagai cara. Mari lihat satu persatu -

1. Menggunakan indeks

Untuk menyasarkan bingkai tertentu, anda boleh menggunakan indeks atau nama bingkai tersebut. Contohnya, untuk menyasarkan bingkai pertama pada halaman, anda boleh menggunakan kod berikut -

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

2. Gunakan nama bingkai

Untuk mencari bingkai menggunakan namanya, anda boleh menggunakan kaedah berikut. Andaikan nama bingkai ialah "frame_name" -

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

3. Gunakan getElementById dan getElementByName

Anda juga boleh mencari bingkai menggunakan kaedah getElementById() atau getElementsByName() dan kemudian mengakses tetingkap bingkai menggunakan kaedah contentWindow seperti yang ditunjukkan di bawah -

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

Contoh

Berikut ialah coretan kod kerja lengkap dengan semua kaedah ini -

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

Atas ialah kandungan terperinci Bagaimana untuk menyasarkan bingkai tertentu melalui hiperpautan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html 对象

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk mengenal pasti jenis contoh Imej menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mengenal pasti jenis contoh Imej menggunakan FabricJS?

Artikel berkaitan

Lihat lagi