Идея состоит в том, что если у меня есть две HTML-страницы, я могу соединить их и вызвать их методы и DOM между обеими страницами без использования контроллера, такого какPHP
Пример:
страница1.html
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<script>
function FuncionPagina1(){
return "mundo";
}
</script>
</head>
<body>
<h1 id="mundo" class="mundoClass">MUNDO!!!</h1>
</body>
</html>
страница2.html
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<script>
function FuncionPagina1(){
return "hola";
}
</script>
</head>
<body>
<h1 id="hola" class="holaClass">Hola</h1>
</body>
</html>
Как я могу соединить page1 и page2 и иметь возможность вызывать их с простым доступом, как если бы я был на той же странице ?, могу вызывать ваши собственные и , и, если возможно, даже ваши функции JavaScript.id="mundo"
class="mundoClass"
id
class
Примечание : Следует отметить, что идея состоит в том, чтобы это было безiframe
Это вполне возможно с использованием
load
jQuery , вам просто нужно быть осторожным, чтобы не включать страницу 1 внутри страницы 2, которая, в свою очередь, содержит страницу 1, это будет бесконечный цикл, и я действительно не знаю, как он себя ведет. Наконец, вернемся к теме:Вы даже можете быть более конкретным и определить, какой раздел страницы вы хотите загрузить:
и определить какое-либо действие, когда загрузка документа завершится:
В HTML вы можете использовать
link
и импортировать файлы. Вы, вероятно, уже используете его с файлами CSS для добавления стилей на свою страницу, но вы также можете использовать его для импорта других HTML-страниц.Этот метод позволит вам использовать JS-функции другой страницы напрямую (
script
они выполняются в моментimport
), а для доступа к переменным импортированной страницы вам понадобится пара строк (переместите импортированную страницу в переменную , ищите элементы в этой переменной, а не в самой DOM). Ничего сложного.Итак, чтобы импортировать одну страницу в другую, вам просто нужно сделать это:
Если на импортированной странице есть JS-функции, их можно вызвать напрямую, а для чтения переменных будет примерно так:
Следует отметить одну важную вещь:
import
могут поддерживаться не всеми браузерами и регулируются правилами CORS, т. е. они должны иметь одно и то же происхождение или разрешать импорт каждой страницы из других источников.Вот пример:
страница1.html
страница2.html
Не берите весь текст и не прикрепляйте его, потому что есть теги, которые нужно использовать только один раз на странице, вместо этого берите контент по частям.
Во-первых, используйте Fetch API на странице, где вы хотите получить внешние ресурсы, в данном случае на HTML-странице.
Хотя вышеизложенное возможно, я не считаю это «универсальной хорошей практикой». Что касается функций, то в определенных случаях их лучше всего поместить в файл, то есть создать библиотеку, и загружать ее на каждой странице, на которой требуются содержащиеся в ней функции.
Что касается HTML-тегов, в некоторых случаях идеалом является размещение структуры на странице и с помощью классов и/или JavaScript управление логикой, то есть контроль, когда они должны отображаться.
Библиография