Heim > Artikel > Web-Frontend > So laden Sie externe HTML-Dateien mit der Lademethode von jQuery

So laden Sie externe HTML-Dateien mit der Lademethode von jQuery

不言Original: 2018-12-12 17:03:248790Durchsuche

So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery ist eine JavaScript-Bibliothek, die zum Laden externer HTML-Dateien verwendet werden kann. In diesem Artikel werfen wir einen Blick darauf, wie die Load-Methode in So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery externe HTML-Dateien lädt.

So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery

Werfen wir zunächst einen Blick auf Was ist Last?

load kann beim Lesen von Inhalten verwendet werden, die in einem anderen HTML geschrieben sind.

Wenn beispielsweise einige Menüleisten gemeinsam genutzt werden, ist es schwierig, auf jeder Seite eine Menüleiste zu schreiben. In diesem Fall können Sie die Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery verwenden, um die Menüs auf anderen Seiten zu lesen , damit der implementierte Code nicht redundant ist.

Dann schauen wir uns an: Wie verwende ich die Lademethode, um eine externe HTML-Datei zu laden?

Angenommen, Sie haben einen Header in der Datei header.html geschrieben, und wenn Sie „sample.html“ als externe Datei lesen, benötigen Sie das folgende Skript.

$(function(){
  $("#cover").load("header.html");
});

Außerdem wird der obige HTML-Code in den „id“-Speicherort geladen, der in „sample.html“ festgelegt ist. Bitte beachten Sie, dass es sich bei „header.html“ und „sample.html“ derzeit um unterschiedliche Dateien handelt.

In „sample.html“ funktioniert So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery möglicherweise nicht, selbst wenn „header.html“ angegeben ist.

Daher ist die Beschreibung zu „Hader.html“ nicht „sample.html“, sondern direkt in „Hample.html“.

Sehen wir uns ein konkretes Beispiel an

Der Code lautet wie folgt

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.3.1.min.js">
      
    </script>
    <script src="sample.js" type="text/javascript"></script>
    <title>So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery</title>
  </head>
  <body>
    <div id="cover">
      <div id="section1"></div>
      <div id="section2"></div>
    </div>
  </body>
</html>

HTML

<h1>header.html的标题</h1>

JavaScript

$(function(){
  $("#cover").load("header.html");
});

Der Operationseffekt ist wie folgt

Der Inhalt von „header.html“ kann in „sample.html“ widergespiegelt werden.

So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery

Das obige ist der detaillierte Inhalt vonSo laden Sie externe HTML-Dateien mit der Lademethode von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Einführung in die Unterschiede zwischen let, var und const in JavaScript und seinen AnwendungsszenarienNächster Artikel：Einführung in die Unterschiede zwischen let, var und const in JavaScript und seinen Anwendungsszenarien

In Verbindung stehende Artikel

Mehr sehen