Я хочу, чтобы home.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?
Я наконец нашел ответ на свою проблему. Решение
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 вместо загрузки.
Получить 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);
});
}
XHR API
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()
Я увидел это и подумал, что это выглядит неплохо, поэтому я провел несколько тестов.
Это может показаться чистым подходом, но с точки зрения производительности он отстает на 50% по сравнению со временем, затрачиваемым на загрузку страницы с помощью функции загрузки jQuery, или с использованием ванильного javascript-подхода XMLHttpRequest, которые были примерно похожи на каждый Другие.
Я предполагаю, что это связано с тем, что под капотом он получает страницу точно так же, но также имеет дело с конструированием целого нового объекта HTMLElement.
В заключение я предлагаю использовать jQuery. Синтаксис примерно так же прост в использовании, как и может быть, и у него есть хорошо структурированный обратный звонок для вас. Это также относительно быстро. Ванильный подход может быть быстрее за незаметные несколько миллисекунд, но синтаксис запутан. Я бы использовал это только в среде, где у меня не было доступа к jQuery.
Вот код, который я использовал для тестирования - он довольно рудиментарный, но время получилось очень последовательным в нескольких попытках, поэтому я бы сказал, что с точностью до + 5 мс в каждом случае. Тесты выполнялись в 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 не может загрузить. Это НЕ означает, что он не работает, это просто означает, что вам нужно проверить свой код на том же домене. ваш сервер
Вы можете использовать jQuery:
$("#topBar").on("click",function(){
$("#content").load("content.html");
});
Этот подход использует современные функции Javascript, такие как async/await и API fetch. Он загружает 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");
}
await (await fetch(url)).text() может показаться немного сложным, но это легко объяснить. Он имеет два асинхронных шага, и вы можете переписать эту функцию следующим образом:
async function fetchHtmlAsText(url) {
const response = await fetch(url);
return await response.text();
}
См. Документацию по fetch API для более подробной информации.
Существует такой плагин на github, который загружает содержимое в элемент. Вот репо
$("button").click(function() {
$("#target_div").load("requesting_page_url.html");
});
или же
document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';
Это обычно требуется, когда вы хотите включить header.php или любую другую страницу.
В Java это легко, особенно если у вас есть HTML-страница и вы не хотите использовать функцию php include, но вам вообще следует написать функцию php и добавить ее как функцию Java в теге script.
В этом случае вы должны написать это без функции с именем Just. Скрипт вызывает функциональное слово и запускает include header.php Т.е. преобразует функцию php include в функцию Java в теге script и помещает весь ваш контент в этот включаемый файл.
Предполагая, что я правильно понимаю ваш вопрос, и вы хотите загрузить содержимое home.html в div без использования внешней библиотеки, такой как jQuery, тогда вам может быть лучше использовать iFrame.
Вы должны уметь стилизовать iFrame, как Div, и загрузить src в событие click. Или, если вы хотите получить хитрость, используйте скрытый iFrame и передайте результаты src обратно в javascript - это можно сделать, только если вы находитесь в том же домене.
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
Для ex: <iframe src="home.html" width="100" height="100"/>