Импортировать HTML код из другого файла в код
Вам придется сделать запрос по url и результат запроса вставить в html.
var xhr= new XMLHttpRequest(); xhr.open('GET', 'x.html', true); xhr.onreadystatechange= function() < if (this.readyState!==4) return; if (this.status!==200) return; // or whatever error handling you want document.getElementById('y').innerHTML= this.responseText; >; xhr.send(); $(function() < $('#loadContent').load('page1.html'); >); Отслеживать
ответ дан 16 ноя 2017 в 12:19
1,917 13 13 серебряных знаков 22 22 бронзовых знака
- javascript
- html
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.26.3951
как вызвать функцию из другого файла js
Для вызова функции из другого файла js необходимо сначала загрузить этот файл в текущий скрипт. Это можно сделать с помощью тега в html файле, где вы хотите вызвать функцию. Например, если у вас есть файл functions.js , который содержит функцию myFunction , то вам нужно добавить следующий тег в html файл:
src="functions.js"> После этого вы можете вызвать функцию myFunction в текущем скрипте. Например:
myFunction(); Если вы хотите вызвать функцию из другого файла js внутри модуля (ES6 и выше), вы можете использовать ключевое слово import . Например, если у вас есть файл functions.js со следующим содержимым:
export const myFunction = () => console.log('Hello world!'); >; Тогда вы можете импортировать функцию myFunction в другом файле js следующим образом:
import myFunction > from './functions.js'; myFunction(); Важно отметить, что для использования import и export вам нужно использовать модульный формат файла js (ES6 и выше), а также ваш файл js должен быть загружен в браузер с помощью тега .
Как загрузить html код из файла?
iframe подойдет?
Если нет, то какими-то другими языками или инструментами пользоваться можно? SSI, например?
Решения вопроса 0
Ответы на вопрос 6
Иван @LiguidCool
Ответ написан более трёх лет назад
Нравится 1 2 комментария
Stalker_RED @Stalker_RED
Хотя этим импортам больше двух лет, как стандарт они не приняты и работают только в хроме и опере.
Придумают же.
xmoonlight @xmoonlight
https://sitecoder.blogspot.com
2.Anywhere use includeHTML as HTML tag:
Ответ написан более трёх лет назад
Нравится 1 8 комментариев
Сергей delphinpro @delphinpro Куратор тега HTML
Без использования php и javascrip.
xmoonlight @xmoonlight
Сергей: ну как я понял: без доп. кодирования на JS.
Иначе — пока никак. Родной include от W3C — вроде в драфте только.
xmoonlight: а подключенные этим способом странички не могут использовать сторонний js или jquery ??
xmoonlight @xmoonlight
. Shadow: могут, но это нужно указывать сразу в корневом файле. а не в загружаемых HTML. В загружаемых — только разметка, а все обработчики — должны находиться в корневом файле и быть загружены заранее.
xmoonlight: а если все файлы в одной директории что и сам штмл ? Я могу образец скинуть — подскажете что я сделал не так ?
Что такое HTML импорт и как это работает?
Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.
Вы когда-нибудь замечали, что включение одной HTML страницы в другую, это какая-то инородная концепция? Это то, что должно быть просто, но не это не часто происходит. Это не невозможно, но трудно. К счастью есть HTML импорт, который позволяет запросто помещать HTML страницы, а также CSS и JavaScript файлы, внутрь других HTML страниц.
Введение в HTML импорт
HTML импорт, это простая для понимания вещь; это способ вставки на страницу других HTML страниц. Вы можете сказать, что в этом нет ничего особенного, так вот есть; раньше вы не могли это так просто сделать.
Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)
Обходные пути
Раньше, одним из обходных путей было подключение при помощи iFrame; это тяжелые HTML элементы, загружаемые отдельным окном внутри текущего документа. Это немного не то, что нам нужно и при этом с ними, не очень то легко взаимодействовать. iFram’ы могут быть удивительно разочаровывающими, когда с ними приходится работать. Следующим вариантом был AJAX, это когда вы загружали страницу при помощи JavaScript и включали её контент. Это, на самом деле, довольно неудобный и утомительный способ.
Начнём
Базовый синтаксис
Прежде чем смотреть примеры, давайте глянем на синтаксис подгрузки файла через тег импорта. Импорт, это новый тип link тега, так что должно быть нетрудно понять следующую строчку:
Такие строки помещаются в шапке, как вы уже привыкли поступать с JavaScript или CSS файлами.
Базовый пример
Чтобы импорт сработал, страницы должны находиться на одном и том же сервере. Начнем с файла index.html. Это простая HTML страница с базовым импортом:
What are HTML imports and how do they work Hello from Designmodo
Видите, я не врала о том, как все просто; это так же просто, как загрузка таблицы стилей или JavaScript-файла.
Внутри intro.html
Что же внутри импортированной страницы?
We're an awesome blog about web design
Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.
Это просто div с текстом внутри. Не нужно body или head или чего-то ещё.
Вставка импортированного HTML
Чтобы отобразить импортированный HTML, нам нужно написать несколько строчек на JavaScript. Этот код должен находиться в главном HTML-файле, в нашем случае, index.html. Данный код должен находиться в том месте, где мы хотим увидеть импортированный html. В нашем примере после ‘Hello from Designmodo.’
В нашем скрипте мы получаем контент и присваиваем его переменной. Потом мы просто добавляем содержимое переменной в HTML.
What are HTML imports and how do they work Hello from Designmodo
Переходим на следующий уровень
Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега
внутри элемента. Хорошо то, что scoped стили действуют только внутри элемента, в котором они заданы, а не во всем документе. Посмотрим, как атрибут scoped может помочь при работе с импортированными HTML-файлами.
Добавим h1 в импортированный документ, чтобы увидеть разницу между стилями импортированного файла и стилями index.html. Потом добавим стиль элементам импортированного HTML документа. Как видите находится внутри импортированной разметки, а не в head теге. Благодаря scoped, стили применятся только к h1 внутри импортированной разметки.
h1 < color: red; >p About us We're an awesome blog about web design
Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.
Если хотите почитать побольше об атрибуте scoped, посмотрите, что говорит W3C.
Это немного похоже на Bootstrap
Bootstrap, это набор отдельных файлов, как bootstrap.css, boostrap.js и тд. Для плагинов, используется jQuery; Bootstrap предоставляет примеры верстки. Он очень гибок и прост в использовании. Суть Bootstrap в том, что вы можете использовать только необходимые для вашего проекта файлы. Большинство людей загружают все файлы сразу, и это тоже нормально. Идея HTML импорта та же, вы подключаете файлы по мере надобности. Эта логика становится популярной, из-за ускорения загрузки и упрощения организации.
Заключение
Благодаря HTML импорту, вы можете выносить HTML, как и CSS или JavaScript, в отдельные файлы. Это, на самом деле, очень круто. Включение HTML-файлов друг в друга не было простым, до появления HTML импорта. Теперь мы можем создавать повторно-используемый контент, подключаемый одной строкой кода. Это очень мощная вещь — и это круто!