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 <div id="costam">Ta treść ma być widoczna w index.html</div>. Można zrobić jakiś prosty skrypt w js?
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.
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.
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.
Niestety, nie działa.
zrobiłbyś jakieś include
w php i tyle...
O to chodzi, że nie może być w php, tylko w javie. W tym problem.
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...
Rafcik u mnie działa, testowałem ;)
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?
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ą.
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?
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ć.
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