Я хочу, чтобы 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 load:
<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>
Извините. Отредактировал для клика вместо загрузки.
Получение 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()
.
[Демонстрация JSFIDDLE]()
Я видел это и думал, что это выглядело довольно хорошим, так что я побежал некоторые тесты на нем.
Может показаться, что это чистый подход, но в плане производительности она отстает на 50% по сравнению со временем, которое потребовалось, чтобы загрузить страницу с функцией загрузки jQuery или используя обычный JavaScript подход от объекта XMLHttpRequest, которые были примерно похожи друг на друга.
Я представляю это потому, что под капот он получает страницу точно так же, но он также имеет дело со строительством совершенно нового объекта объекта HTMLElement, а также.
В резюме я предлагаю с помощью jQuery. Синтаксис примерно так же легко использовать, как это может быть и структурировано перезвонит для вас для использования. Это тоже относительно быстро. Ванильный подход может быть быстрее, незаметно несколько миллисекунд, но синтаксис сбивает с толку. Я бы только использовать это в среде, где я не'т иметь доступ к jQuery.
Вот код, который я использовал для тестирования - это довольно элементарным, но раз вернулся очень последовательно через несколько попыток, так что я бы сказал точнее примерно +- 5 мс в каждом конкретном случае. Тесты проводились в хроме с моего собственного домашнего сервера:
<!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>
Этот подход использует современные функции JavaScript, такие как асинхронный/ждут
и загрузить
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");
}
В ждут (ожидают получить(URL-адрес)).текст()
может показаться немного сложно, но это's легко объяснить. Он имеет два асинхронных шагов, и вы могли бы переписать эту функцию так:
async function fetchHtmlAsText(url) {
const response = await fetch(url);
return await response.text();
}
Смотрите извлечение документации API для более подробной информации.
При использовании
$("#content").load("content.html");
Помните, что вы не можете и"отладка" в хроме локально, потому что запросы XMLHttpRequest не может загрузить ... это не значит, что он не работает, это просто означает, что вы должны проверить ваш код на тот же домен ака. ваш сервер
Вы можете использовать jQuery с :
$("#topBar").on("click",function(){
$("#content").load("content.html");
});
попробовать
async function load_home(){
content.innerHTML = await (await fetch('home.html')).text();
}
в
async function load_home() {
let url = 'https://kamil-kielczewski.github.io/fractals/mandelbulb.html'
content.innerHTML = await (await fetch(url)).text();
}
<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div>
<div id="content"> </div>
в
$("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>';
Есть этот плагин на GitHub, что загрузка содержимого в элемент. Вот РЕПО
Обычно это необходимо, когда вы хотите включить header.php или на любой странице.
В Java это's особенно легко, если у вас есть HTML-страницу, и Дон'т хотите использовать PHP включает функции, но вообще вам надо написать функцию PHP и добавить его в качестве Java функции в теге script.
В этом случае вы должны написать его без функции с именем просто. Скрипт ярость функция Word и начать включать header.php Т. е. преобразовать в PHP включить функцию Java функции в тег script и поместить все ваше содержание в том, что включаемый файл.
Я не'т использовать фреймворки или библиотеки (мои клиенты может если очень хочется) хотя моем веб-платформы-это'т отягощенные излишней и расточительной пропускной способности. Ниже функция, что я написал для непосредственного добавления XML к После
, перед
, внутри
(становится последним элементом) или "заменить" и существующего элемента. Нет ненадежное барахло вроде innerHTML будет (что во многих браузерах искали
идентификатор` "и добавил, что" так можно'т быть найдены, таким образом, не надежный). Автономные функции предпосылкой использованы в приведенных ниже примерах в нижней части этого поста.
после
, перед
, внутри
и заменить
).id_('содержание')
) или строковое значение идентификатор
элемента.<div с префиксом xmlns="и http://www.w3.org/1999/xhtml"><п>все сюда</п></див>
).function xml_add(pos, e, xml)
{
e = (typeof e == 'string' && id_(e)) ? id_(e) : e;
if (e.nodeName)
{
if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
//Add fragment and have it returned.
}
}
Загрузка XML-данных через AJAX в дом правильно не требует пространства имен XML (префиксом xmlns="и http://www.w3.org/1999/xhtml"
) на корневой элемент (возможно, не имеют более чем один корневой элемент или если вы делаете вы будете иметь, чтобы выполнить итерации). Затем вы должны использовать этого importnode
. Остальные функции-это просто семантика , где XML-код (Аякс, из другой функции и т. д.) размещается относительно других элементов в DOM.
element.appendChild(new DOMParser().parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">'+id_('post_body').value+'</div>'),'application/xml'.childNodes[0]);
Добавить XML "после" конкретного элемента:
xml_add('after', id_(push_current_id()).tag_('footer')[0], '<div class="hidden" id="editor_rich_temp"></div>');
Добавить XML " до " определенного элемента:
xml_add('before', $('#'+push_current_id()+' section')[0], '<h2 xmlns="http://www.w3.org/1999/xhtml"><span>Compose Message</span></h2>');
Добавьте XML-код "внутри" конкретного элемента (в качестве последнего дочернего элемента):
xml_add('inside', $('body > header > nav')[1], xml);
Эти функции я использую на моей платформе, чтобы избежать наказания пользователей с пять копий фреймворков/библиотек и обеспечение высокой эффективности:
function $(o) {var r = false; if (document.querySelectorAll) {r = document.querySelectorAll(o);} return r;}
function class_(c) {return (document.getElementsByClassName(c)) ? document.getElementsByClassName(c) : false;}
function tag_(t) {return (document.getElementsByTagName(t)) ? document.getElementsByTagName(t) : false;}
Если вы хотите чистый профессиональный JavaScript, вы'вновь придется использовать "прототип", который является удивительным. В Примере id_('примеру').tag_('тд')[0].class_('хороший')[0]
строительство гораздо проще, чем возиться с $
внутри петель.
Object.prototype.$ = function(c) {return (this.querySelectorAll && this.querySelectorAll(c) && this.querySelectorAll(c).length > 0) ? this.querySelectorAll(c) : false;}
Object.prototype.class_ = function(c) {return (this.getElementsByClassName && this.getElementsByClassName(c) && this.getElementsByClassName(c).length > 0) ? this.getElementsByClassName(c) : false;}
Object.prototype.tag_ = function(t) {return (this.getElementsByTagName && this.getElementsByTagName(t) && this.getElementsByTagName(t).length > 0) ? this.getElementsByTagName(t) : false;}
Я Обновить код в редких случаях (потому что он'ы скала, а не на "Версия" и зависимые). Программирования на чистом JavaScript это's легкий для того чтобы избежать массовых низкой производительности фреймворков и библиотек. https://www.jabcreations.com/docs/javascript/#functions
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, а не в <Объект> В теге. в <Объект> теги не работают кросс-браузер, и в основном используются для вспышки
Например : <элемент iframe в src="и домой.HTML-код как" ширина"и 100&;" Высота=то"100" и/>