Как загрузить страницу HTML в с помощью JavaScript?
Это отлично работает, когда я использую Firefox. Когда я использую Google Chrome, он запрашивает плагин. Как мне заставить его работать в Google Chrome?
17 ответов
Я наконец нашел ответ на мою проблему. Решение
ИСПОЛЬЗОВАНИЕ ОБЕЩАНИЯ (получить A PI)
function fetch_text (url) < return fetch(url).then((response) =>(response.text())); > Тогда вы могли бы цепляться к результатам, например, так:
function load_home (event) < (event || window.event).preventDefault(); fetch_text("http://www.yoursite.com/home.html").then((html) =>< document.getElementById("content").innerHTML = html; >).catch((error) => < console.warn(error); >); > СТАРЫЙ ОТВЕТ
Так как вы хотите загрузить html-содержимое, вы должны попытаться использовать iframe и убедиться, что ваш javascript загружен перед разметкой, которая вызывает load_home() функция
РЕДАКТИРОВАТЬ: исходя из ваших ограничений, я отредактировал javascript, чтобы использовать ajax вместо iframe. попробуй это
function load_home (e) < (e || window.event).preventDefault(); var con = document.getElementById('content') , xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (e) < if (xhr.readyState == 4 && xhr.status == 200) < con.innerHTML = xhr.responseText; >> xhr.open("GET", "http://www.yoursite.com/home.html", true); xhr.setRequestHeader('Content-type', 'text/html'); xhr.send(); > Вы можете использовать функцию загрузки jQuery:
Сожалею. Отредактировано для клика, а не для загрузки.
Извлечение HTML современным способом Javascript
Этот подход использует современные функции Javascript, такие как async/await и fetch API. Он загружает HTML как текст, а затем передает его innerHTML вашего элемента контейнера.
/** * @param url - address for the HTML to fetch * @return the resulting HTML string fragment */ async function fetchHtmlAsText(url) < return await (await fetch(url)).text(); >// this is your `load_home() function` async loadHome()
await (await fetch(url)).text() может показаться немного сложным, но это легко объяснить. Он имеет два асинхронных шага, и вы можете переписать эту функцию следующим образом:
async function fetchHtmlAsText(url)
См. Документацию по fetch API для более подробной информации.
Я видел это и думал, что это выглядит довольно хорошо, поэтому я провел несколько тестов на нем.
Это может показаться чистым подходом, но с точки зрения производительности он отстает на 50% по сравнению со временем, которое потребовалось для загрузки страницы с помощью функции загрузки jQuery или с использованием ванильного JavaScript-подхода XMLHttpRequest, которые были примерно похожи друг на друга.
Я предполагаю, что это потому, что под капотом он получает страницу точно таким же образом, но он также должен иметь дело с созданием целого нового объекта HTMLElement.
В заключение я предлагаю использовать jQuery. Синтаксис настолько прост в использовании, насколько это возможно, и имеет хорошо структурированный обратный вызов для вас. Это также относительно быстро. Ванильный подход может быть быстрее за незаметные несколько миллисекунд, но синтаксис сбивает с толку. Я бы использовал это только в среде, где у меня не было доступа к jQuery.
Вот код, который я использовал для тестирования — он довольно элементарный, но времена возвращались очень согласованно для нескольких попыток, поэтому я бы сказал, что с точностью до +- 5 мс в каждом случае. Тесты запускались в Chrome с моего собственного домашнего сервера:
Как загрузить страницу HTML в с помощью JavaScript?
Это отлично работает, когда я использую Firefox. Когда я использую Google Chrome, он запрашивает подключаемый модуль. Как заставить его работать в Google Chrome?
Не слишком легко без библиотек. Может быть лучше загрузиться в iFrame. Проверьте это сообщение: stackoverflow.com/questions/14470135/…
И вы пытаетесь загрузить все на этой странице в элемент контента или просто поместить ссылку на страницу в элемент контента?
13 ответов
Я наконец нашел ответ на свою проблему. Решение
Несмотря на то, что это элегантно и чисто, я думаю, было бы лучше, если бы вы на самом деле создали элемент object через API DOM.
Это медленно и небезопасно для атаки — см. Мой ответ ниже (было слишком долго, чтобы уместиться в комментарии)
Хотя это может быть небезопасно, если вы выполняете простую разработку «локально в папке на рабочем столе», это нормально — не все используют веб-сайт банка, где клиенты обрабатывают информацию о банковском счете и подвергаются атаке XSS. Спасибо за решение, для моих нужд мне пришлось пойти другим путем и потребовать сервер Python и использовать обычную функцию Jquery load () для внешнего динамически загружаемого HTML. Но это было полезно для меня в моем вопросе
В чем разница между кодом в этом ответе и кодом, о котором идет речь (потому что, похоже, он идентичен)?
Этот ответ не работает для меня, я получаю эту ошибку: отказался отображать ‘url’ в кадре, потому что он установил ‘X-Frame-Options’ в ‘SAMEORIGIN’.
Вы можете использовать функцию загрузки jQuery:
К сожалению. Отредактировано для on-click вместо загрузки.
Привет, я пытался использовать этот метод, но я не могу заставить его работать. Я могу открыть новый вопрос, если хотите. Благодарю. Моя скрипка здесь: jsfiddle.net/ekareem/aq9Laaew/288345
Получить API
function load_home (e) < (e || window.event).preventDefault(); fetch("http://www.yoursite.com/home.html" /*, options */) .then((response) =>response.text()) .then((html) => < document.getElementById("content").innerHTML = html; >) .catch((error) => < console.warn(error); >); > function load_home (e) < (e || window.event).preventDefault(); var con = document.getElementById('content') , xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (e) < if (xhr.readyState == 4 && xhr.status == 200) < con.innerHTML = xhr.responseText; >> xhr.open("GET", "http://www.yoursite.com/home.html", true); xhr.setRequestHeader('Content-type', 'text/html'); xhr.send(); > основываясь на ваших ограничениях, вы должны использовать ajax и убедиться, что ваш javascript загружен перед разметкой, которая вызывает load_home()
Благодарю. но мой код относится к части проекта. и извините, что я не предполагаю использовать iframe в работе над проектом. Я редактировал вопрос. посмотри @jay Джей Харрис
@ArunRaj вы не можете загрузить страницу, которая приходит с другого сайта в javascript, т.к. это проблема безопасности. но вы можете загрузить скрипт с вашего сервера, который, в свою очередь, загрузит эту другую страницу и вернет ее обратно в javascript через ajax.
Добавление заголовка Content-Type к GET запросу не имеет смысла — я думаю, что вы имели в виду setRequestHeader(«Accept», «text/html») ?
Я увидел это и подумал, что это выглядит неплохо, поэтому я провел несколько тестов.
Это может показаться чистым подходом, но с точки зрения производительности он отстает на 50% по сравнению со временем, затрачиваемым на загрузку страницы с помощью функции загрузки jQuery, или с использованием ванильного javascript-подхода XMLHttpRequest, которые были примерно похожи на каждый Другие.
Я предполагаю, что это связано с тем, что под капотом он получает страницу точно так же, но также имеет дело с конструированием целого нового объекта HTMLElement.
В заключение я предлагаю использовать jQuery. Синтаксис примерно так же прост в использовании, как и может быть, и у него есть хорошо структурированный обратный звонок для вас. Это также относительно быстро. Ванильный подход может быть быстрее за незаметные несколько миллисекунд, но синтаксис запутан. Я бы использовал это только в среде, где у меня не было доступа к jQuery.
Вот код, который я использовал для тестирования — он довольно рудиментарный, но время получилось очень последовательным в нескольких попытках, поэтому я бы сказал, что с точностью до + 5 мс в каждом случае. Тесты выполнялись в Chrome с моего собственного домашнего сервера:
Как загрузить HTML-страницу в с помощью JavaScript?
Это работает нормально, когда я использую Firefox. Когда я использую Google Chrome, он запрашивает плагин. Как заставить его работать в Google Chrome?
Наконец-то я нашел ответ на свою проблему. Решение следующее
Вы можете использовать функцию jQuery load:
Извините. Отредактировал для клика вместо загрузки.
Получение API
function load_home (e) < (e || window.event).preventDefault(); fetch("http://www.yoursite.com/home.html" /*, options */) .then((response) =>response.text()) .then((html) => < document.getElementById("content").innerHTML = html; >) .catch((error) => < console.warn(error); >); > function load_home (e) < (e || window.event).preventDefault(); var con = document.getElementById('content') , xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (e) < if (xhr.readyState == 4 && xhr.status == 200) < con.innerHTML = xhr.responseText; >> xhr.open("GET", "http://www.yoursite.com/home.html", true); xhr.setRequestHeader('Content-type', 'text/html'); xhr.send(); >исходя из ваших ограничений, вы должны использовать ajax и убедиться, что ваш javascript загружается до разметки, которая вызывает функцию load_home() .
The new fetch API uses promises and a new syntax for making AJAX requests. fetch is much cleaner than XMLHttpRequest.
Я видел это и думал, что это выглядело довольно хорошим, так что я побежал некоторые тесты на нем.
Может показаться, что это чистый подход, но в плане производительности она отстает на 50% по сравнению со временем, которое потребовалось, чтобы загрузить страницу с функцией загрузки jQuery или используя обычный JavaScript подход от объекта XMLHttpRequest, которые были примерно похожи друг на друга.
Я представляю это потому, что под капот он получает страницу точно так же, но он также имеет дело со строительством совершенно нового объекта объекта HTMLElement, а также.
В резюме я предлагаю с помощью jQuery. Синтаксис примерно так же легко использовать, как это может быть и структурировано перезвонит для вас для использования. Это тоже относительно быстро. Ванильный подход может быть быстрее, незаметно несколько миллисекунд, но синтаксис сбивает с толку. Я бы только использовать это в среде, где я не’т иметь доступ к jQuery.
Вот код, который я использовал для тестирования — это довольно элементарным, но раз вернулся очень последовательно через несколько попыток, так что я бы сказал точнее примерно +- 5 мс в каждом конкретном случае. Тесты проводились в хроме с моего собственного домашнего сервера: