Z uwagi na dużą liczbę wpisów stworzonych bez wątpienia wyłącznie w celu pozycjonowania stron na określone frazy, dodaliśmy do wszystkich linków (w postach i podpisach) atrybut rel="nofollow". Z tego względu wszystkie dodane linki straciły swoją moc pozycjonerską. Forum jest dla Was, dlatego prosimy o zamieszczanie wyłącznie "prawdziwych" tematów i odpowiedzi.

ładowanie zewnętrznego pliku w JS

Dreamweaver, XHTML, CSS, JavaScript, jQuery
  • Wiadomości
Offline

krzykwiat

  • Posty: 54
  • Rejestracja: 5 lip 2013, o 17:19

ładowanie zewnętrznego pliku w JS

Post15 lut 2017, o 14:06

Mam oto taki temat do rozpracowania ale w czystym JS.

Mam prosty szkielet strony index.html a nim taki oto element:

Kod: Zaznacz cały
<nav id="menu"></nav>


chciałbym w tym elemencie umieścić menu wczytywane skryptem js z pliku menu.html

Kod: Zaznacz cały
<ul>
   <li><a href="">Pozycja Nr w menu</a></li>
   <li><a href="">Pozycja Nr w menu</a></li>
   <li><a href="">Pozycja Nr w menu</a></li>
   <li><a href="">Pozycja Nr w menu</a></li>
   <li><a href="">Pozycja Nr w menu</a></li>
</ul>


wiem jak to zrobić w jQuery bo to prościzna.

Kod: Zaznacz cały
$("#menu").load("menu.html");


jednak jak osiągnąć w js?

Chcę testowo zrobić taki projekt dzięki, któremu tworzę różne podstrony a zawartość menu i linki edytuje tylko w jednym pliku. Wiem że można to zrobić z użyciem php, ale tego nie chcę robić, chcę zrobić stronę tylko w html.
Offline
Awatar użytkownika

Piotr Palarz

Ekspert

Ekspert

  • Posty: 684
  • Rejestracja: 24 kwie 2012, o 00:37

Re: ładowanie zewnętrznego pliku w JS

Post17 lut 2017, o 13:14

Tak na szybko to zrobiłbym to w ten sposób:
Kod: Zaznacz cały
function loadHTML(fragment, insertTo) {

    var xhr = new XMLHttpRequest();

    xhr.open("GET", fragment, true);

    xhr.onreadystatechange = function(e) {
        if (xhr.readyState == 4) {
            if(xhr.status == 200) {
                document.querySelector(insertTo).innerHTML = xhr.responseText;
            } else {
                console.log("Wystąpił błąd");         
            }
        }
    };

    xhr.send(null);

}

loadHTML("menu.html", "#menu");
Obrazek

Wróć do Projektowanie w XHTML i CSS

Kto jest online

Użytkownicy przeglądający to forum: Bing [Bot] i 1 gość

cron