Rumah > Artikel > hujung hadapan web > Ringkasan beberapa kaedah untuk mencapai penyegaran separa iframe dalam kemahiran JavaScript_javascript

Ringkasan beberapa kaedah untuk mencapai penyegaran separa iframe dalam kemahiran JavaScript_javascript

WBOYasal: 2016-05-16 15:21:331600semak imbas

Iframe ialah satu bentuk bingkai yang dibenamkan dalam halaman web. Halaman web boleh menyegarkan sebahagian kandungan dengan menukar bahagian yang dibenamkan.

Penggunaan Iframe adalah serupa dengan elemen teg biasa DIV Anda boleh menentukan kedudukan, warna, reka letak antara muka, dll. untuk dibenamkan dalam halaman

1 Kaedah 1 untuk melaksanakan penyegaran separa iframe

<script type="text/javascript">
 $(function(){
 $("#a1").click(function(){
  var name= $(this).attr("name");
  $("#iframe").attr("src",name).ready();
 })
 $("#a2").click(function(){
  var name= $(this).attr("name");
  $("#iframe").attr("src",name).ready();
 })
})
</script>
<a href="#" id="a1" name="a1.html">1</a>
<a href="#" id="a2" name="a2.html">2</a>
<iframe src="" id="iframe"></iframe>

Apabila anda mengklik a1, kandungan a1.html akan dipaparkan dalam iframe Apabila anda mengklik a2, kandungan a2.html akan dipaparkan dalam iframe

2. Kaedah 2 melaksanakan penyegaran separa iframe

<a href="a1.html" id="a1" name="a1.html" target="i">1</a>
<a href="a2.html" id="a2" name="a2.html" target="i">2</a>
<iframe src="" id="iframe" name="i"></iframe>

Catatan: ff9c23ada1bcecdd1a0fb5d5a0f18437 juga mempunyai atribut sasaran, yang mempunyai kesan yang sama seperti 3499910bf9dac5ae3c52d5ede7383485 jika 66fd2ada9ebb04d4250c850dc1e3737e ke a1.html Jika terdapat req.set atau session.set dalam Tindakan, ia juga boleh dipaparkan dalam iframe.

Tiga: Kaedah tiga untuk iframe mencapai muat semula separa:

<iframe src="1.htm" name="ifrmname" 
id="ifrmid"></iframe>

Pilihan 1: Gunakan atribut nama iframe untuk mencari

<input type="button" name="Button" value="Button" onclick="document.frames('ifrmname').location.reload()">

atau

<input type="button" name="Button" value="Button" onclick="document.all.ifrmname.document.location.reload()">

Pilihan 2: Gunakan atribut id iframe untuk mencari

<input type="button" name="Button" value="Button" onclick="ifrmid.window.location.reload()">

Pilihan 3: Apabila src iframe ialah alamat tapak web lain (semasa mengendalikan domain silang)

<input type="button" name="Button" value="Button" onclick="window.open(document.all.ifrmname.src,'ifrmname','')">

Pilihan 4: Dapatkan muat semula separa dengan menggantikan src iframe dengan

Anda boleh menggunakan document.getElementById("iframname").src="" untuk mengubah hala iframe

Kod sampel adalah seperti berikut: test.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script type="text/javascript">
  function partRefresh() {
   document.getElementById("iframe1Id").src = "a2.html"; // 方法一: 通过和替换iframe的src来实现局部刷新
  }
 </script>
 </head>
 <body>
  <table border="1" width="90%" align="center">
   <tr
    style="background: #F0F0E4"><td>方格1</td><td>方格2</td> <td>方格3</td>
   </tr>
   <tr>
    <td>
     <iframe src="a1.html" id="iframe1Id" name="iframe1Name" width="100%"></iframe>
    </td>
    <td>
     <iframe src="a2.html" id="iframe2Id" name="iframe2Name" width="100%"></iframe>
    </td>
    <td>
     <iframe src="a3.html" id="iframe3Id" name="iframe3Name" width="100%"></iframe>
    </td>
   </tr>
  </table>
  <br>
  <br>
  <input type="button" value="IFRAME局部刷新" style="margin-left: 70px;" onclick="partRefresh();">
 </body>
</html>

Kandungan di atas memperkenalkan kepada anda ringkasan beberapa kaedah untuk mencapai penyegaran separa iframe dalam JavaScript Saya harap anda boleh memilih yang sesuai dengan keperluan anda Jika anda mempunyai sebarang pertanyaan, sila tinggalkan saya mesej. terima kasih!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：ini, ini, bincangkan ini dalam javascript sekali lagi, kemahiran javascript yang sangat komprehensif (klasik).Artikel seterusnya：ini, ini, bincangkan ini dalam javascript sekali lagi, kemahiran javascript yang sangat komprehensif (klasik).

Artikel berkaitan

Lihat lagi