Laden einer HTML-Datei in ein DIV mit einem link

Gibt es mehrere Themen dazu, aber keine, die vollständig die Beantwortung meiner Frage.

Ich würde gerne in der Lage sein einen link lädt eine gesamte HTML-Datei in ein DIV.

Diese, zum Beispiel, laden Sie einfach den text in meiner "MainBack" DIV. Es funktioniert gut:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<p>1</p>';">Computing</a>

aber ich würde gerne laden Sie eine gesamte Datei in es so:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = 'HTML FILE';">Computing</a>

Irgendwelche Ratschläge? Ich bin ziemlich neu hier!

InformationsquelleAutor Mark Brewerton | 2011-02-13

html javascript

7

Können Sie eine <iframe> genau das zu tun:
```
<iframe src="link.html" width="100%" height="300"></iframe>
```
Live-Demo

Code:
```
<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\' scrolling=\'no\' frameborder=\'0\' width=\'100%\' height=\'600px\'></iframe>'">Computing</a>
```
Oder verwenden Sie lightbox tun es in einer richtig schönen Art und Weise...

Wird es display; Fotos, videos, HTML - ... im Grunde alles, was Sie wollen.
- Wie soll dieser formatiert werden? Sollte ich es innen halten " ? Wenn dem so ist, es scheint nicht zu funktionieren.
- Sind Sie laden eine Externe Datei oder einfach nur ein laden von HTML-code?
- Ein laden von HTML-code, es wirkt einfach aufgeräumter laden einer externen Datei.
- Ja, Sie haben Recht, am besten ist es in einer externen HTML-Datei, und rufen Sie dann die <iframe> mit dem onclick-event, oder verwenden Sie die lightbox, die dann gibt Ihnen eine schöne, transluzent pop-up
- Aus Interesse, wie würde ich laden Sie einfach einige HTML? Ich scheine in der Lage sein, zu laden, so etwas wie <p>1</p> aber nicht Sachen wie YouTube eingebettet.
- und ist es das, was ich tun sollte, als ein iFrame? <a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src="test.html"></iframe>',">Computing</a> Das scheint nicht zu funktionieren. Der link sieht wie folgt aus, wenn ich das Tue: '">Datenverarbeitung
- <a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'test.html\'></iframe>'">Computing</a>
- Wissen Sie, wie man den iFrame füllen Sie das DIV-Element und entfernen Sie die Grenze/scroll-bars?
- Hallo? Bitte helfen Sie. 🙁
- Sicher, mam verwenden: <a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\' scrolling=\'no\' frameborder=\'0\' width=\'100%\' height=\'600px\'></iframe>'">Computing</a> ändern Sie die Höhe auf, was Sie wollen
InformationsquelleAutor Myles Gray
6

Mithilfe der jQuery ajax-API, die Sie ergreifen können, den Inhalt eines bestimmten Tags innerhalb des Dokuments von einigen URL:
```
<a href="#computing" 
   onclick="$('#MainBack').load('/path/file.html body')"
>
    Computing
</a>
```
Wichtig:
1. #MainBack ist die ID der Platzhalter-tag in Ihrem übergeordneten Dokument
2. /path/file.html - id, die URL für das Dokument, das Sie laden möchten, Daten aus
3. body ist der tag hält die Inhalte, die Sie laden möchten.
Was schief gehen kann:
- check #1 oben, sieht Ihr übergeordnetes Dokument ein tag mit der genauen ID, die Sie mit in den ajax-call?
- check #2, können Sie das laden der URL in einem separaten browser-Fenster?
- wenn Sie können, laden Sie die URL, verwenden Sie den "Quelltext anzeigen" - option zum überprüfen der HTML-Quelle, und stellen Sie sicher, dass der Selektor in #3 oben. Vielleicht sind die Inhalte, die Sie wollen, erzeugt wird, die dynamisch aus JavaScript, statt bedient zu werden durch den HTTP-server, in diesem Fall verwenden Sie die iframe - Lösung aus der anderen Antwort.
- überprüfen Sie die JavaScript-Konsole und schauen Sie für einige Nachricht über cross-domain-Probleme, CSRF, CORS, etc. Wenn der Inhalt von einer anderen domain, die Sie vielleicht stolpern die browser-Sicherheit zu Regeln; dies ist eine ganz neue Dose Würmer, und ich werde Sie nicht decken die möglichen Lösungen hier, nehmen Sie die Fehlermeldung aus der Konsole und google für Sie.
- Dies scheint nicht zu funktionieren...
- Haben Sie geladen jQuery in den HTML-header-Bereich? Bitte lies docs und Beispiele hierzu finden Sie im angegebenen link.
- Es sollte funktionieren. Dies ist eine viel sauberere Lösung als das iFrame.
InformationsquelleAutor Paulo Scardine

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\'></iframe>'">Computing</a>

--> Demo <--

InformationsquelleAutor Shaz

0

Können Sie nicht laden Sie eine komplette html-Seite in einem anderen. Damit meine ich, dass Sie nicht über ein markup wie dieses:
```
<html>
  <head></head>
  <body>
    <div>
      <html>
      ...
      </html>
  </body>
</html>
```
Vielleicht, was Sie suchen für ein iframe? Ein kleines "Fenster" in Ihre Seite zu einer anderen Seite?

Wenn iframe nicht zu Ihnen passt, werfen Sie einen Blick auf das Jquery-Funktion, die das laden einer html-von einer anderen Quelle in Ihrer angegebenen Auswahl: http://api.jquery.com/load/
- Wie wäre es, wenn ich nur wollte, zu laden, ein Teil einer HTML-Seite? So etwas wie dieses: <p>In der informatik I, Programmieren zu lernen, zusammen mit der Theorie hinter Computern und Logik.</p><br /><p>Hier ist ein video über das TCP/IP-Stapel, die ich gemacht mit einem Freund:</p><iframe title="YouTube video player" width="640" height="390" src="youtube.com/embed/oeGt3exwqoE" frameborder="0" allowfullscreen></iframe>
InformationsquelleAutor Mārtiņš Briedis

Sie können das laden von HTML-Inhalt aus einer anderen Datei über jQuery ".load ()" - Methode.

Erste im HEAD-Bereich Ihrer html-Datei, müssen Sie diese Zeile, um Zugriff auf die jQuery-Bibliotheken Funktionen:

<script> src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Zweitens fügen Sie diesen code in das HEAD-Bereich laden Sie den Inhalt in das DIV:

<script>
$(document).ready(function() {
    $('#MainBack').load('html-content-file.html');    
});
</script>

Beispiel für den Inhalt html-content-file.html:

  <a class="brand" href="#">240Dots</a>
  <div class="navbar-content">
    <ul class="nav">
      <li>
        <a href="index.html">Inicio</a> 
      </li>
      <li>
        <a href="quienes-somos.html">Quienes Somos</a> 
      </li>
      <li>
        <a href="servicios.html">Servicios</a> 
      </li>
      <li>
        <a href="contactar.html">Contactar</a>
      </li>
    </ul>
  </div>

Mehr info: http://docs.jquery.com/Ajax/load

Es ist ein Fehler in deinem code: <script> src="http://... sollte <script src="http://.... Kleine aber wichtige detail.

InformationsquelleAutor Tony S.

0

Verwenden document.getElementById('element').innerHTML = 'HTML SOURCE' mit einer javascript-event. Das funktioniert völlig ohne Probleme.
- Wie könnte man die Last der "HTML-QUELLTEXT"?
- Über einen AJAX-request
InformationsquelleAutor Pushpendu Ghosh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.