Pobieranie tekstu z konkretnego diva

0

Chciałbym, aby na stronie index.html wyświetlana była treść z konkretnego diva z pliku pomoc.html. Chodzi o to, aby po załadowaniu strony index.html widoczna była od razu treść, którą zapisałem w pliku pomoc.html w &#60div id="costam"&#62Ta treść ma być widoczna w index.html&#60/div&#62. Można zrobić jakiś prosty skrypt w js?

0

treść z diva można pobrać przez właściwość innerText.

Ale tak, jak to opisałeś to mam wrażenie, że ty bardziej szukasz jakiegoś systemu szablonów do sklejania wielu plików HTML w jeden duży (chyba, że się mylę. Możez podać większy kontekst tego, co robisz?)

Mógłbyś użyć generatora stron statycznych
https://github.com/myles/awesome-static-generators
z tych używałem tylko Jekyll, Hyde i Gatsby.

0

A w jaki sposób wykorzystać innerText?
Najprościej mówiąc: w DIV-ie "a" w pliku index.html ma być wyświetlany automatycznie tekst z DIV-a "b", znajdującego się w pliku pomoc.html.

0

Jeżeli bardzo chcesz użyć JS'a, to można to zrobić tak:

Plik index.html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        Hello World

        <div data-include="pomoc.html"></div>

        <script>
            document.querySelectorAll('[data-include]').forEach(element => {
                const page = element.dataset.include;

                fetch(page)
                    .then(resp => resp.text())
                    .then(html => element.innerHTML = html);
            });
        </script>
    </body>
</html>

Plik pomoc.html, który jest w tym samym katalogu, co index.html:

<h2>Pomoc</h2>
<ul>
    <li>Pomoc 1</li>
    <li>Pomoc 2</li>
    <li>Pomoc 3</li>
</ul>

Ale polecam użyć jakiegoś gotowego systemu szablonów.

0

Niestety, nie działa.

1

zrobiłbyś jakieś include w php i tyle...

0

O to chodzi, że nie może być w php, tylko w javie. W tym problem.

0
Rafcik napisał(a):

O to chodzi, że nie może być w php, tylko w javie. W tym problem.

Oczywiście, chodzi o javascript :) Nikt nie potrafi pomóc? Wydawało się, że importowanie tekstu z jednego pliku html do drugiego będzie proste...

0

Rafcik u mnie działa, testowałem ;)

0
Desu napisał(a):

Rafcik u mnie działa, testowałem ;)

Sprawdzałem. Na Google Chrome nie działa, na Microsoft Edge - działa. Od czego to zależy?

0

Nikt nie potrafi pomóc? Wydawało się, że importowanie tekstu z jednego pliku html do drugiego będzie proste...

Bo jest proste, to ty po prostu nie umiesz powiedzieć ludziom klarownie, co masz na myśli, co dokładnie robisz (szerszy kontekst) i co chcesz osiągnąć (a kilka osób mimo to dało ci gotowe rozwiązania na tacy). Nie mówiąc już o tym, że w jednym poście na siłę próbujesz zrobić coś w JavaScripcie, a w drugim mylisz go z Javą.

0

Przepraszam, faktycznie, pewnie źle się wyraziłem. Na usprawiedliwienie podam, że jestem zielony z javascript, a potrzebuję to wykorzystać. To, co napisał Desu, faktycznie działa (choć u mnie nie na Google Chrome). A co należałoby dodać do skryptu stworzonego przez Desu, żeby pobierać nie całą treść strony pomoc.html, a tylko treść zawartego na tej stronie jednego konkretnego diva?

0

U mnie na chrome to działa, więc u Ciebie też powinno. Może masz jakąś archaiczną wersję, albo zrobiłeś coś źle. Modyfikacja skryptu:

<div data-include="pomoc.html" data-selector="#foo"></div>

<script>
// Dla wszystkich elementów, które mają atrybut data-include
document.querySelectorAll('[data-include]').forEach(element => {
  // Wyciągamy wartości atrybutów.
  // Używając dobrodziejstw ES6 pobieramy atrybut data-include i wrzucamy do stałej page.
  // Pobieramy również data-selector do stałej selector.
  const { include: page, selector } = element.dataset;
  
  // Używając fetch API pobieramy zawartość pliku, którego nazwa pochodzi z atrybutu data-include
  fetch(page)
    .then(resp => resp.text()) // przerabiamy to na text
    .then(html => {
      // ponieważ teraz nasz HTML to text, to nie mozemy z niego w łatwy sposób wybrać interesującego nas elementu
      // najpierw musimy nasz text przerobić na element drzewa DOM
      // tworzymy jakiś element, obojętne czy div czy coś, nie dołączamy go do naszej strony, to tylko zmienna tymczasowa
      // potrzebna do użycia funkcji querySelector
      const div = document.createElement('div'); 
      div.innerHTML = html; // ładujemy do niego nasz HTML
 
      // teraz mozemy użyć querySelector, zeby wyciągnąć tylko interesujący nas fragment
      const pageSlice = div.querySelector(selector); 
      // wrzucamy do diva i voila
      element.appendChild(pageSlice);
    })
});
</script>

W atrybucie data-include podajesz plik html, z którego chcesz coś tam wybrać. W atrybucie data-selector podajesz selektor CSS, który jednoznacznie identyfikuje tego div'a, którego chcesz tam wlepić.

0

Użycie jquery i metody load() jest banalnie proste nawet dla kogoś kto nie zna javascript. Chociaż zachęcam do uczenia się od podstaw a nie zaczynanie od biblioteki.

$( "#result" ).load( "pomoc.html #container" );

div id = 'result' to miejsce gdzie załaduje się div id = 'container' z pliku pomoc.html

1 użytkowników online, w tym zalogowanych: 0, gości: 1