Heim > Web-Frontend > js-Tutorial > Hauptteil

Mehrere Methoden zur Seitenaktualisierung mit Javascript

一个新手
Freigeben: 2017-09-07 15:02:50
Original
1709 Leute haben es durchsucht

Mehrere JavaScript-Methoden zur Seitenaktualisierung

Im Folgenden werden drei Seiten mit den Namen „frame.html“, „top.html“ und „bottom.html“ als Beispiel verwendet darüber, wie es geht.
frame.html besteht aus zwei Seiten: oben (top.html) und unten (bottom.html). Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> 
<HEAD>
 <TITLE> frame </TITLE> 
 </HEAD> 
 <frameset rows="50%,50%"> 
  <frame name=top src="top.html"> 
  <frame name=bottom src="bottom.html"> 
 </frameset> 
</HTML>
Nach dem Login kopieren

Nehmen Sie nun an, dass top.html ( (d. h. die Seite oben) verfügt über sieben Schaltflächen zum Aktualisieren von „bottom.html“ (d. h. die Seite unten). Sie können die folgenden sieben Anweisungen verwenden. Es liegt an Ihnen, welche davon einfacher zu verwenden ist. Der Code der Seite
top.html lautet wie folgt:
Code Der Code lautet wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> 
<HEAD> 
<TITLE> top.html </TITLE> 
</HEAD> 
<BODY> 
<input type=button value="刷新1" onclick="window.parent.frames[1].location.reload()"><br>
<input type=button value="刷新2" onclick="window.parent.frames.bottom.location.reload()"><br>
<input type=button value="刷新3" onclick="window.parent.frames[&#39;bottom&#39;].location.reload()"><br>
<input type=button value="刷新4" onclick="window.parent.frames.item(1).location.reload()"><br>
<input type=button value="刷新5" onclick="window.parent.frames.item(&#39;bottom&#39;).location.reload()"><br>
<input type=button value="刷新6" onclick="window.parent.bottom.location.reload()"><br>
<input type=button value="刷新7" onclick="window.parent[&#39;bottom&#39;].location.reload()"><br>
</BODY> 
</HTML>
Nach dem Login kopieren


Das Folgende ist der Quellcode der Seite „bottom.html“, um zu beweisen, dass die Seite unten tatsächlich vorhanden ist Nachdem die Seite aktualisiert wurde, wird nach dem Laden der Seite ein Dialogfeld angezeigt.

Code kopieren Der Code lautet wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> 
    <HEAD> 
        <TITLE> bottom.html </TITLE> 
    </HEAD> 
<BODY onload="alert(&#39;我被加载了!&#39;)"> 
    <h1>This is the content in bottom.html.</h1> 
</BODY> 
</HTML>
Nach dem Login kopieren

Erklären Sie:
Kopieren Sie den CodeDer Code lautet wie folgt:

1.window bezieht sich auf die aktuelle Seite, in diesem Beispiel bezieht es sich beispielsweise auf die Seite top.html.
2.parent bezieht sich auf die übergeordnete Seite der aktuellen Seite, die die Frame-Seite ist, die sie enthält. In diesem Beispiel bezieht es sich beispielsweise auf „framedemo.html“.
3.frames ist ein Fensterobjekt und ein Array. Stellt alle Unterseiten innerhalb des Frames dar.
4.item ist eine Methode. Gibt die Elemente im Array zurück.
5. Wenn die Unterseite auch eine Frame-Seite mit anderen Unterseiten darin ist, funktionieren einige der oben genannten Methoden möglicherweise nicht.
Anhang:
Mehrere Möglichkeiten, die Seite mit Javascript zu aktualisieren:

1 history.go(0) 
2 location.reload() 
3 location=location 
4 location.assign(location) 
5 document.execCommand(&#39;Refresh&#39;) 
6 window.navigate(location) 
7 location.replace(location) 
8 document.URL=location.href
Nach dem Login kopieren

2. Die Seite automatisch aktualisieren
1. Aktualisieren Sie die Seite automatisch: Fügen Sie den folgenden Code zum -Bereich hinzu:
Die 20 bedeutet, dass die Seite alle 20 Sekunden aktualisiert wird .
2. Die Seite springt automatisch: Fügen Sie den folgenden Code zum Bereich hinzu. net">
Die 20 Finger springen nach 20 Sekunden zur Seite http://www.jb51.net
3. Die Seite aktualisiert automatisch die js-Version


<script language="JavaScript">
function myrefresh() 
{ 
window.location.reload(); 
} 
setTimeout(&#39;myrefresh()&#39;,1000); //指定1秒刷新一次 
</script>
Nach dem Login kopieren

3. Wenn Sie beim Schreiben von Servler-, Action- und anderen Programmen in Java zur Seite zurückkehren möchten (z. B. wenn das Fenster geöffnet wird, nachdem der Vorgang abgeschlossen ist), Schließen Sie die aktuelle Seite und aktualisieren Sie die übergeordnete Seite)

Code kopieren Der Code lautet wie folgt:

1 PrintWriter out = response.getWriter(); 
2 out.write("<script type=\"text/javascript\">"); 
3 ////子窗口刷新父窗口 
4 out.write("self.opener.location.reload();"); 
5 //关闭窗口 
6 out.write("window.opener=null;"); 
7 out.write("window.close();"); 
8 out.write("</script>");
Nach dem Login kopieren

4. JS-Refresh-Frame-Skriptanweisung1. So aktualisieren Sie die Seite, die den Frame enthält 🎜>


Code kopieren Der Code lautet wie folgt:

2. Das untergeordnete Fenster aktualisiert das übergeordnete Fenster
<script language=JavaScript> 
    parent.location.reload(); 
</script>
Nach dem Login kopieren


复制代码 代码如下:

<script language=JavaScript> 
    self.opener.location.reload(); 
</script>
Nach dem Login kopieren


3.如何刷新另一个框架的页面用 (上面的实例以说明了)

复制代码 代码如下:

语句1. window.parent.frames[1].location.reload(); 
语句2. window.parent.frames.bottom.location.reload(); 
语句3. window.parent.frames["bottom"].location.reload(); 
语句4. window.parent.frames.item(1).location.reload(); 
语句5. window.parent.frames.item(&#39;bottom&#39;).location.reload(); 
语句6. window.parent.bottom.location.reload(); 
语句7. window.parent[&#39;bottom&#39;].location.reload();
Nach dem Login kopieren


4.如果想关闭窗口时刷新或者想开窗时刷新的话,在中调用以下语句即可。

<body onload="opener.location.reload()"> 
开窗时刷新 
<body onUnload="opener.location.reload()"> 
关闭时刷新
Nach dem Login kopieren


复制代码 代码如下:

<script language="javascript"> window.opener.document.location.reload() 
</script> 
 
JavaScript 实现页面跳转的几种方法:
window.location.href="new.jsp?msg=&#39;hello";
self.location=&#39;new.jsp?pam=&#39;omg&#39;;
window.navigate("new.jsp") ;
top.location="show.jsp";
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonMehrere Methoden zur Seitenaktualisierung mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage