Как загрузить HTML-страницу в JavaScript?
Я хочу домой.HTML для загрузки в <div id="content">
.
<div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div>
<div id ="content"> </div>
<script>
function load_home(){
document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>';
}
</script>
это отлично работает, когда я использую Firefox. Когда я использую Google Chrome, он запрашивает плагин. Как заставить его работать в Google Chrome?
10 ответов
Я, наконец, нашел ответ на мою проблему. Решение
function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
вы можете использовать функцию загрузки jQuery:
<div id="topBar">
<a href ="#" id="load_home"> HOME </a>
</div>
<div id ="content">
</div>
<script>
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("content.html");
});
});
</script>
извините. Отредактировано для on click вместо on load.
использование PROMISE (fetch API)
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()
функция
EDIT: на основе ваших ограничений я отредактировал 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();
}
я увидел это и подумал, что это выглядит довольно хорошо, поэтому я провел несколько тестов на нем.
это может показаться чистым подходом, но с точки зрения производительности он отстает на 50% по сравнению со временем загрузки страницы с функцией загрузки jQuery или использованием подхода JavaScript vanilla XMLHttpRequest, которые были примерно похожи друг на друга.
Я предполагаю, что это потому, что под капотом он получает страницу точно так же, но он также должен иметь дело с построением совершенно новый объект объект HTMLElement, а также.
в резюме я предлагаю использовать jQuery. Синтаксис настолько прост в использовании, насколько это возможно, и имеет хорошо структурированный обратный вызов для вас. Это также относительно быстро. Ванильный подход может быть быстрее на незаметные несколько миллисекунд, но синтаксис запутан. Я бы использовал это только в среде, где у меня не было доступа к jQuery.
вот код, который я использовал для тестирования-он довольно рудиментарный, но пришло время назад очень последовательно через несколько попыток, поэтому я бы сказал, что точно около + - 5ms в каждом случае. Тесты были запущены в Chrome с моего собственного домашнего сервера:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
/**
* Test harness to find out the best method for dynamically loading a
* html page into your app.
*/
var test_times = {};
var test_page = 'testpage.htm';
var content_div = document.getElementById('content');
// TEST 1 = use jQuery to load in testpage.htm and time it.
/*
function test_()
{
var start = new Date().getTime();
$(content_div).load(test_page, function() {
alert(new Date().getTime() - start);
});
}
// 1044
*/
// TEST 2 = use <object> to load in testpage.htm and time it.
/*
function test_()
{
start = new Date().getTime();
content_div.innerHTML = '<object type="text/html" data="' + test_page +
'" onload="alert(new Date().getTime() - start)"></object>'
}
//1579
*/
// TEST 3 = use httpObject to load in testpage.htm and time it.
function test_()
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
content_div.innerHTML = xmlHttp.responseText;
alert(new Date().getTime() - start);
}
};
start = new Date().getTime();
xmlHttp.open("GET", test_page, true); // true for asynchronous
xmlHttp.send(null);
// 1039
}
// Main - run tests
test_();
</script>
</body>
</html>
при использовании
$("#content").load("content.html");
тогда помните, что вы не можете "отлаживать" в chrome локально, потому что XMLHttpRequest не может загрузить-это не значит, что он не работает, это просто означает, что вам нужно проверить свой код на том же домене aka. ваш сервер
вы можете использовать jQuery:
$("#topBar").on("click",function(){
$("#content").load("content.html");
});
извлечение HTML современным способом Javascript
этот подход использует современные функции JavaScript, такие как async/await
и fetch
API-интерфейс. Он загружает HTML в виде текста, а затем подает его в innerHTML
вашего элемента контейнера.
/**
* @param {String} url - address for the HTML to fetch
* @return {String} the resulting HTML string fragment
*/
async function fetchHtmlAsText(url) {
return await (await fetch(url)).text();
}
// this is your `load_home() function`
async loadHome() {
const contentDiv = document.getElementById("content");
contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}
The await (await fetch(url)).text()
может показаться немного сложным, но это легко объяснить. Он имеет два асинхронных шага, и вы можете переписать эту функцию следующим образом:
async function fetchHtmlAsText(url) {
const response = await fetch(url);
return await response.text();
}
посмотреть fetch API documentation дополнительные подробности.
showhide.HTML-код
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showHide(switchTextDiv, showHideDiv)
{
var std = document.getElementById(switchTextDiv);
var shd = document.getElementById(showHideDiv);
if (shd.style.display == "block")
{
shd.style.display = "none";
std.innerHTML = "<span style=\"display: block; background-color: yellow\">Show</span>";
}
else
{
if (shd.innerHTML.length <= 0)
{
shd.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"showhide_embedded.html\"></object>";
}
shd.style.display = "block";
std.innerHTML = "<span style=\"display: block; background-color: yellow\">Hide</span>";
}
}
</script>
</head>
<body>
<a id="switchTextDiv1" href="javascript:showHide('switchTextDiv1', 'showHideDiv1')">
<span style="display: block; background-color: yellow">Show</span>
</a>
<div id="showHideDiv1" style="display: none; width: 100%; height: 300px"></div>
</body>
</html>
showhide_embedded.HTML-код
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function load()
{
var ts = document.getElementById("theString");
ts.scrollIntoView(true);
}
</script>
</head>
<body onload="load()">
<pre>
some text 1
some text 2
some text 3
some text 4
some text 5
<span id="theString" style="background-color: yellow">some text 6 highlight</span>
some text 7
some text 8
some text 9
</pre>
</body>
</html>
Если ваш html-файл находится локально, перейдите к iframe вместо тега. теги не работают в кросс-браузере и в основном используются для Flash
например : <iframe src="home.html" width="100" height="100"/>