Zusammenfassung mehrerer Methoden zur teilweisen Aktualisierung von Iframes in JavaScript_Javascript-Kenntnissen-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:21:33

Original

1685 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Anmerkungen:

hat auch ein Zielattribut, das die gleiche Wirkung hat wie , wenn 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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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','')">

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!