suchen

Heim >Web-Frontend >js-Tutorial >Zusammenfassung mehrerer Methoden zur teilweisen Aktualisierung von Iframes in JavaScript_Javascript-Kenntnissen

Zusammenfassung mehrerer Methoden zur teilweisen Aktualisierung von Iframes in JavaScript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:21:331646Durchsuche

Iframe ist eine Art Frame, der in eine Webseite eingebettet ist. Die Webseite kann einen Teil des Inhalts aktualisieren, indem der eingebettete Teil geändert wird.

Die Verwendung von Iframe ähnelt der des gewöhnlichen Tag-Elements DIV. Sie können die Position, Farbe, das Schnittstellenlayout usw. angeben, die in die Seite eingebettet werden sollen

1. Methode 1 zur Implementierung einer teilweisen Aktualisierung des Iframes 

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

Wenn Sie auf a1 klicken, wird der Inhalt von a1.html im Iframe angezeigt. Wenn Sie auf a2 klicken, wird der Inhalt von a2.html im Iframe angezeigt

2. Methode 2 zur Implementierung einer teilweisen Aktualisierung des Iframes 

<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>
Anmerkungen: ff9c23ada1bcecdd1a0fb5d5a0f18437 hat auch ein Zielattribut, das die gleiche Wirkung hat wie 3499910bf9dac5ae3c52d5ede7383485, wenn 66fd2ada9ebb04d4250c850dc1e3737e an eine Aktion übergeben wird zu a1.html. Wenn req.set oder session.set in Action vorhanden ist, kann es auch im iframe angezeigt werden.

Drei: Methode drei für Iframe, um eine teilweise Aktualisierung zu erreichen: 

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

Option 1: Verwenden Sie das Namensattribut des Iframes, um zu finden 

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

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

Option 2: Verwenden Sie das ID-Attribut von iframe, um zu finden 

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

Option 3: Wenn die Quelle des Iframes eine andere Website-Adresse ist (bei domänenübergreifendem Betrieb) 

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

Option 4: Erzielen Sie eine teilweise Aktualisierung, indem Sie den src von iframe durch ersetzen

Sie können document.getElementById("iframname").src="" verwenden, um iframe umzuleiten;


Der Beispielcode lautet wie folgt: 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>
Der obige Inhalt stellt Ihnen eine Zusammenfassung mehrerer Methoden vor, um eine teilweise Aktualisierung des Iframes in JavaScript zu erreichen. Ich hoffe, Sie können die für Sie passende auswählen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Danke schön!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Dies, dies, besprechen Sie dies noch einmal in Javascript, super umfassende (klassische)_Javascript-KenntnisseNächster Artikel：Dies, dies, besprechen Sie dies noch einmal in Javascript, super umfassende (klassische)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen