jQuery.laden zum laden der HTML-Datei

Habe ich nie verwendet jQuery, bevor Sie diese, aber ich werde erklären, was ich versuche zu tun.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome Website</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <link rel="shortcut icon" href="/favicon.ico" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>

<!--    <iframe width="100%" height="175" frameborder="0" scrolling="no" src="navbar.html"></iframe> I used to use this - but i cant have dropdown menus. -->
            <!-- This is my problem -->
        <script>
                $('#navbar').load('./navbar.html');
        </script>
        <noscript>
            <h1>Please enable Javascript!</h1>
        </noscript>

        <div id="container">
                <!-- Content Here -->
        </div>

    </body>
</html>

navbar.html

<div id="navbar">
        <li><object width="64" height="64" data="favicon.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/tech.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/games.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/contact.svg" type="image/svg+xml"></object></li>
</div>

Also, was ich versuche zu tun, ist haben viele HTML-Seiten, die alle link, um eine Navigationsleiste html-Seite, also wenn ich die navbar.html ich habe nicht zu ändern, jede Seite.

Ich habe bereits eine andere Frage hier. Davor Milnaric vorgeschlagen, "wenn Sie mit jquery, können Sie versuchen, mit '.load () " - Funktion. api.jquery.com/load" aber ich kann nicht ankommen es zu wirken. Was mache ich falsch? Wie kann ich es beheben? Jede Hilfe wäre sehr geschätzt werden.

InformationsquelleAutor Yharooer | 2013-05-26

  1. 8

    Müssen Sie 2 Sachen zu machen:

    1. Verwenden Sie $(document).ready() - Lesen hier; Alle jQuery-code muss gewickelt werden wie diese:

      $(document).ready(function(){

    //jquery code goes here....        

});

    2. Ändern

      $('#navbar').load('./navbar.html');

    zu

    $('#container').load('./navbar.html');

    .. Sie haben nicht ein element mit id="navbar"
    und nach diese:

    Wenn kein element abgestimmt ist, die von der Auswahl — in diesem Fall, wenn das Dokument nicht enthalten ein element mit id="Ergebnis" (in unserem Fall "navbar") — die Ajax-Anfrage wird nicht gesendet.

    InformationsquelleAutor Yotam Omer

  2. 3

    Es ist auch möglich, dass müssen Sie warten, bis das DOM geladen ist.

        <script>
        $(document).ready(function() {
            $('#result').load('navbar.html #navbar', function() {
                alert("loaded");
            });
        });
    </script>

    <div id="result">
    </div>
    Hallo, vielen Dank für Sie Antwort. 🙂 Wenn ich versuche diese, ändert sich nichts, die navbar immer noch nicht laden... Irgendwelche Ideen?
    wenn Sie öffnen dev tools für den browser, werden Sie sehen, die Fehler, die könnte es werden " Cross-origin-requests werden nur für die unterstützten Protokoll-Schemata: http, data...'

    InformationsquelleAutor eklhad

Schreibe einen Kommentar