Как подключить текстовый файл в html
Обновлено: 06.07.2024
у меня есть 2 HTML-файла, предположим a.html и b.html . В a.html Я хочу включить b.html .
в JSF я могу сделать это так:
это означает, что внутри a.xhtml файл, я могу включить b.xhtml .
как мы можем сделать его в ?
на мой взгляд лучшее решение использует jQuery:
этот метод является простым и чистым решением моей проблемы.
jQuery .load() документация здесь.
мое решение похоже на решение Лоло выше. Однако я вставляю HTML-код через документ JavaScript.напишите вместо использования jQuery:
a.html:
б.ДШ:
причина для меня против использования jQuery заключается в том, что jQuery.js имеет размер
90kb, и я хочу сохранить объем данных для загрузки как можно меньше.
для того, чтобы получить правильно экранированный файл JavaScript без особого труда, вы можете использовать следующую команду sed:
кредиты Грег Minshall для улучшенной команды sed, которая также избегает обратных косых черт и одинарных кавычек, чего моя исходная команда sed не сделала считать.
расширение ответа Лоло сверху, вот немного больше автоматизации, если вам нужно включить много файлов:
и затем включить что-то в html:
который будет включать представления/заголовок файла.html и представления / нижний колонтитул.HTML-код
например:
бесстыдный плагин библиотеки, которую я написал, решить это.
выше будет принимать содержимое /path/to/include.html и заменить div С ним.
простые серверные директивы include, чтобы включить другой файл в той же папке выглядит так:
на очень старое решение тогда я удовлетворял свои потребности, но вот как это сделать, совместимый со стандартами код:
нет необходимости в скриптах. Нет необходимости делать какие-либо причудливые вещи на стороне сервера (tho, что, вероятно, было бы лучшим вариантом)
имейте в виду, что для браузеров, которые не поддерживают бесшовные, если вы нажмете ссылку в iframe, это сделает рама перейдите по этому url-адресу, а не по всему окну. Способ обойти это, чтобы иметь все ссылки target="_parent" , Тхо браузер поддержка "достаточно хороша".
в качестве альтернативы, если у вас есть доступ к интернет .htaccess файл на вашем сервере, вы можете добавить простую директиву, которая позволит php для интерпретации файлов, заканчивающихся В.расширение html.
теперь вы можете использовать простой скрипт php для включения других файлов, таких как:
следующие работы, если необходимо включить содержимое html из некоторого файла: Например, следующая строка будет содержать содержимое piece_to_include.html в месте, где происходит определение объекта.
это то, что помогло мне. Для добавления блока html-кода из b.html to a.html , это должно пойти в head тег a.html :
затем в теге body контейнер выполнен с уникальным идентификатором и блоком javascript для загрузки b.html в контейнер, следующим образом:
вставить содержимое файла:
например, на странице вы импортируете HTML-блок следующим образом:
блок может иметь собственный импорт:
импортер заменяет директиву загруженным HTML почти так же, как SSI
эти директивы будут обслуживаться автоматически, как только вы загрузите этот небольшой JavaScript:
он будет обрабатывать импорт, когда DOM будет готов автоматически. Кроме того, он предоставляет API, который вы можете использовать для запуска Вручную, для получения журналов и так далее. Наслаждайтесь :)
ответ Atharis (первый!) было слишком убедительно! Очень Хорошо!
но если вы хотите передайте имя страницы, которая будет включена в качестве параметра URL, этот пост имеет очень хорошее решение для использования в сочетании с:
таким образом, это становится чем-то вроде этого:
в a.html код теперь выглядит так:
Он работал очень хорошо для меня! Надеюсь, помогли:)
большинство решений не работает, но у них есть проблема с в jQuery:
Я пишу приведенный ниже код, в моем решении вы можете получить доступ к включенному контенту в :
(ключ загрузки содержания синхронно.)
включить.inc:
в w3.js включает такие работы:
это сделает ссылку (может измениться, чтобы быть желаемым элементом ссылки, если он уже установлен), установите импорт (если он у вас уже есть), а затем добавьте его. Затем он оттуда возьмет это и проанализирует файл в HTML, а затем добавит его к нужному элементу под div. Все это можно изменить в соответствии с вашими потребностями от добавляющего элемента до используемой ссылки. Я надеюсь, что это помогло, теперь это может не иметь значения, если новее, быстрее стороны вышли без использования библиотек и фреймворков, таких как jQuery или В3.js.
обновление: это вызовет ошибку, говорящую о том, что локальный импорт был заблокирован политикой CORS. Может потребоваться доступ к deep web, чтобы иметь возможность использовать это из-за свойств deep web. (Не имея в виду практического применения)
Я знаю, что это очень старый пост, поэтому некоторые методы были недоступны тогда. Но вот мой очень простой взгляд на это (основанный на ответе Лоло).
он полагается на HTML5 data-* attributes и поэтому является очень общим в том, что использует функцию jQuery for-each для получения каждого .класс, соответствующий "load-html" и использует соответствующий атрибут "data-source" для загрузки содержимого:
на данный момент нет прямого решения HTML для этой задачи. Даже импорт HTML (который постоянно в проекте) не будет делать вещь, потому что импорт != Включить и некоторые JS magic будут необходимы в любом случае.
Я недавно написал a VanillaJS скрипт это просто для включения HTML в HTML, без каких-либо осложнений.
просто поместите в свой a.html
Это open-source и может дать идея (я надеюсь)
вы можете сделать это с помощью библиотеки jQuery JavaScript следующим образом:
обратите внимание: banner.html должен находиться под тем же доменом, что и другие ваши страницы, иначе ваши веб-страницы откажутся от из-за Совместное Использование Ресурсов Cross-Origin политика.
кроме того, обратите внимание, что если вы загружаете свой контент с помощью JavaScript, Google не будет индексировать это не совсем хороший метод по причинам SEO.
вот отличная статья, вы можете реализовать общую библиотеку и просто использовать ниже код для импорта любых HTML-файлов в одной строке.
вы также можете попробовать Google Полимер
HTML (index.html)
JS
добавить - > включает содержимое в div
replace - > заменяет div
вы можете легко добавить больше поведения после того же дизайна
Я пришел к этой теме, ища что-то похожее, но немного отличающееся от проблемы, поставленной Лоло. Я хотел создать HTML-страницу, содержащую алфавитное меню ссылок на другие страницы, и каждая из других страниц может существовать или не существовать, а порядок их создания может не быть алфавитным (или даже числовым). Кроме того, как и Тафкадасох, я не хотел раздувать веб-страницу с помощью jQuery. После исследования проблемы и экспериментов в течение нескольких часов, вот что сработало для меня, с соответствующими замечаниями добавил:
Если вы используете некоторые рамки, такие как django/bootle, они часто отправляют некоторый механизм шаблонов. Предположим, вы используете bottle, а механизм шаблонов по умолчанию -Двигатель SimpleTemplate. И ниже приведен чистый html-файл
Вы можете включить нижний колонтитул.tpl в главном файле, например:
кроме того, вы также можете передать параметр в свой dashborard.ТПЛ.
PHP-это язык сценариев на уровне сервера. Он может делать много вещей, но одно популярное использование-включать HTML-документы внутри ваших страниц, почти так же, как SSI. Как и SSI, это технология уровня сервера. Если вы не уверены, есть ли у вас функциональность PHP на вашем сайте, обратитесь к хостинг-провайдеру.
вот простой PHP-скрипт, который вы можете использовать для включения фрагмента HTML на любой веб-странице с поддержкой PHP:
сохраните HTML для общих элементов вашего сайта, чтобы разные файлы. Например, раздел навигации может быть сохранен как навигация.html или навигация.РНР. Используйте следующий PHP-код, чтобы включить этот HTML на каждую страницу.
используйте тот же код на каждой странице, которую вы хотите включить в файл. Обязательно измените имя файла higlighted на имя и путь к включенному файлу.
Ну, если все, что вы хотите сделать, это поместить текст из отдельного файла на вашу страницу (теги в тексте тоже должны работать), вы можете это сделать (ваши стили текста на главной странице- test.html -надо еще работать):
вы всегда можете воссоздать теги HTML, которые вы хотите сами, в конце концов. Существует необходимость в серверных сценариях только для захвата текста из другого файла, если вы не хотите что-то сделать больше.
в любом случае, я начинаю использовать это для того, чтобы сделать это так, если я обновляю описание, распространенное среди множества HTML-файлов, мне нужно обновить только один файл ( .js file) вместо каждого HTML-файла, содержащего текст.
Итак, в общем, вместо импорта .html файл, более простым решением является импорт .js файл с содержимым .html файл в переменной (и записать содержимое на экран, где вы вызываете сценарий.)
Я хотел бы отобразить содержимое текстового файла внутри HTML-страницы ( .rtf , .txt , .log . ) хранится на сервере.
Я пробовал с embed но, похоже, это не работает.
для этого есть "простой" метод (или тег), или я должен сканировать содержимое и печатать его, например, с помощью jQuery?
долл.функция ajax () с a .функция append () внутри вы можете легко захватить содержимое текстового документа и отобразить его на странице. Что-то вроде того, что вы видите внизу. Преформа-это при загрузке страницы, чтобы сразу загрузить файл в с остальной частью страницы.
поиграйте с ним немного, чтобы получить правильный результат, который вы ищете. Вы также можете использовать PHP, но если вам действительно не нужно анализировать данные, PHP немного перебор в этом ситуация.
что-то вроде этого должны сделать это:
только для содержимого плагина (flash и т. д.). Попробуйте получить контент с помощью ajax, а затем напишите его с помощью document.write ; Или используйте include тег на языке back end (PHP, ASP и т. д.)
Примечание: извинения за сходство с ответом кита V и тот факт, что он упомянул get requests - я только заметил его комментарий о get requests после публикации моего ответа.
Я нахожу следующую структуру полезной и позволяет мне стилизовать текст как промежуток, а не использовать объект:
он работает для меня для контента dropbox, но я не вижу, почему он не будет работать для общедоступных текстовых файлов. Как вы можете смотрите в коде, вам нужен jquery.
Я нашел лучший способ вставить код HTML5 на веб-сайт, чтобы сохранить код на новый текстовый документ и внедрить этот документ с помощью . Затем вы можете отформатировать код с помощью css и divs.
просто используйте php. Измените формат html на php и используйте
echo file_get_contents ("name_of_the_file.txt");
просто. Вы должны использовать php, потому что вы должны вывести свой текст на стороне сервера, если информация не будет показана клиенту.
Если Вам нужно просто вставить в страницу целиком содержимое всего txt файла, напишите, как подсказал kein:
Если в txt файле несколько страниц и Вам нужно вывести одну случайную - замечательное решение предложил Вам fantasy4fun.
А вот если выводимая информация должна меняться в ответ на какие-либо действия пользователя - то тогда уже добро пожаловать в Аякс. Подробнее - по запросу. И так пост здоровенный получился.
Удачи!
weabdizain
New Member
Можно сделать проще:
Для документа HTML сделать так:
Dador
Member
nataly
Member
Спасибо, но к сожалению видимо по незнанию я не смогла применить PHP скрипт. А вот как это можно сделать с помщью скриптов JS? Мне кажется нужно смотреть выше и решать проблему глобальнее. Зачем обязательно тхт?Это во первых, а во вторых, если используется php то можно написать echo file_get_contents('myfile.txt');
Если нет то думаю придется использовать JS и подгружать все через скрипты, к сожалению не могу посоветовать другого варианта кроме как jQuery ajax. Но мне кажется это самый простой выход
Отличный скрипт, спасибо, однако я вставила его в свой HTML, выложила на сервер и в
результате - ничего (видимо я плохо знаю РНР) Даже не знаю, на что еще можно подумать.
Если Вам нужно просто вставить в страницу целиком содержимое всего txt файла, напишите, как подсказал kein:
Если в txt файле несколько страниц и Вам нужно вывести одну случайную - замечательное решение предложил Вам fantasy4fun.
А вот если выводимая информация должна меняться в ответ на какие-либо действия пользователя - то тогда уже добро пожаловать в Аякс. Подробнее - по запросу. И так пост здоровенный получился.
Удачи!
tigra60
Спасатель
Может быть у Вас хостинг без РНР? Выложите, пожалуйста ссылки на Вашего хостера (и какой у Вас тарифный план) и на Ваш сайт. Или сами проверьте поддержку РНР следующим образом:1. Создаете в текстовом редакторе файл test.php:
2. Помещаете этот файл в корневую папку Вашего сайта.
3. В адресной строке обозревателя набираете:
Частный случай
tigra60
Спасатель
Итоги двухчасовой борьбы с великим творением дядюшки Билла (оно таки меня победило. ):Тут, собственно, все просто:
После загрузки страницы (body onload) вызывается функция getFile(name), где name - имя файла, который появится в блоке mytext.
Эта функция создает объект для запроса к серверу (посредством функции createRequest()), получает наш текстовый файл и запихивает его в блок с /> Проверено на Денвере: ИЕ, Опера, ФФ, Хром.
Теперь по поводу закомментированой строки, указывающей тип файла.
IE с этой строкой ВООБЩЕ работать не хочет.
Для остальных - если файл просто открыть в браузере, без этой строки вылезают кракозябрики.
В общем, попробуйте залить на сайт этот файл и text.txt с любым текстом - проверьте будет ли работать.
Код, который написал уважаемый kein отлично работает, НО ПРИ ОДНОМ УСЛОВИИ:
все файлы должны иметь кодировку UTF-8. Возможно (даже скорее всего!), jQuery имеет средства для перекодировки, но я еще пока о них не знаю, может кто подскажет. Тогда главный файл может быть в любимой cp-1251, а текстовый все равно нужно будет делать в UTF-8.
Удачи!
Перевод статьи «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 страница с базовым импортом:
Видите, я не врала о том, как все просто; это так же просто, как загрузка таблицы стилей или JavaScript-файла.
Внутри intro.html
Что же внутри импортированной страницы?
Это просто div с текстом внутри. Не нужно body или head или чего-то ещё.
Вставка импортированного HTML
Чтобы отобразить импортированный HTML, нам нужно написать несколько строчек на JavaScript. Этот код должен находиться в главном HTML-файле, в нашем случае, index.html. Данный код должен находиться в том месте, где мы хотим увидеть импортированный html. В нашем примере после ‘Hello from Designmodo.’
В нашем скрипте мы получаем контент и присваиваем его переменной. Потом мы просто добавляем содержимое переменной в HTML.
Переходим на следующий уровень
Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега
Если хотите почитать побольше об атрибуте scoped, посмотрите, что говорит W3C.
Читайте также: