Vreau home.html pentru a încărca într <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>
Aceasta funcționează bine atunci când folosesc Firefox. Când eu folosesc Google Chrome, acesta solicită plug-in. Cum a face I a lua it de lucru în Google Chrome?
În sfârșit am găsit răspunsul la problema mea. Soluția este
function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
Puteți folosi jQuery funcția de încărcare:
<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>
Îmi pare rău. Editate de pe faceți clic pe încărcare.
Aduce 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();
}
bazat pe constrângeri ar trebui să utilizați ajax și asigurați-vă că javascript este încărcat înainte de marcajul care solicită `load_home () funcția
[JSFIDDLE demo]()
Am văzut acest lucru și a părut că arată destul de frumos, așa că am făcut niște teste pe ea.
Poate părea ca un curat abordare, dar în termeni de performanță a rămas cu 50% față de momentul în care a luat pentru a încărca o pagină cu jQuery funcția de încărcare sau folosind vanilie javascript abordare de XMLHttpRequest care au fost aproximativ similare cu fiecare alte.
Îmi imaginez că acest lucru este pentru că sub capota devine pagina în exact același mod, dar, de asemenea, are de a face cu construirea o nouă HTMLElement obiect la fel de bine.
În rezumat, am sugerăm să utilizați jQuery. Sintaxa este la fel de ușor de utilizat, deoarece poate fi și ea are un frumos structurat suna înapoi pentru tine de a utiliza. Este, de asemenea, relativ repede. Vanilie abordare poate fi mai repede de un insesizabil câteva milisecunde, dar sintaxa este confuz. Mi-ar folosi doar acest lucru într-un mediu în care nu am't au acces la jQuery.
Aici este codul ce l-am folosit pentru testare este destul de rudimentar, dar ori s-au întors foarte coerente pe mai multe încearcă deci aș putea spune precis la aproximativ +- 5ms în fiecare caz. Testele au fost rulate în Chrome de la propriul meu server de domiciliu:
<!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>
Această abordare face uz de modern Javascript caracteristici, cum ar fi asincron/așteaptă " și " adu -
API. Descarcă HTML ca text și apoi hraneste-l la innerHTML
de element container.
/**
* @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");
}
Anii așteaptă (așteaptă aduce(url-ul)).text()
poate părea un pic complicat, dar's ușor de explicat. Acesta are două asincron pași și veți putea rescrie funcția de genul asta:
async function fetchHtmlAsText(url) {
const response = await fetch(url);
return await response.text();
}
Vezi i aducă documentația API pentru mai multe detalii.
Atunci când se utilizează
$("#content").load("content.html");
Apoi amintiți-vă că nu se poate "depanare" în google chrome de la nivel local, pentru că XMLHttpRequest nu se poate încărca ... Asta NU înseamnă că nu funcționează, înseamnă doar că aveți nevoie pentru a testa codul de pe același domeniu aka. server-ul dvs.
încercați
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");
});
sau
document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';
Acest lucru este de obicei necesară atunci când doriți să le includeți header.php sau orice pagina.
În Java's ușor mai ales dacă aveți pagină HTML și don't doriți să utilizați php include funcție, dar la toate, ar trebui să scrie funcția php și adăugați-l ca Java funcție în script tag-ul.
În acest caz, ar trebui să scrie fără function urmat de numele Doar. Script furie funcția word și începe includ header.php I. e convert php include funcție pentru funcția Java în script tag-ul și loc de toate dvs. de conținut în care sunt incluse fișier.
Eu nu't folosi cadre sau biblioteci (clientii mei poate dacă doresc cu adevărat să) deși platforma web e't împovărat de excesiv și risipă de lățime de bandă. Funcția de mai jos este ceea ce am scris pentru a adăuga direct XML pentru "după", "înainte", "în interiorul" (devine ultimul element) sau "înlocuiți" și element existent. Nu există nici o încredere nedorite cum ar fi innerHTML
(care, în multe browsere, în căutarea pentru un " id " "adăugat" în acest fel se poate't fi găsit, prin urmare, nu este de încredere). Stand-alone condiție funcții utilizate în exemplele de mai jos sunt în partea de jos a acestui post.
id_('content')
) sau un șir de " id " a unui element.<div xmlns="http://www.w3.org/1999/xhtml"><p>tot aici</p></div>
).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 încărcare prin AJAX la DOM corect necesită spațiu de nume XML (xmlns="http://www.w3.org/1999/xhtml"
) pe elementul rădăcină (poate nu au mai mult de un element rădăcină sau dacă faci asta, va trebui pentru a repeta). Apoi, aveți nevoie pentru a utiliza importNode
. Restul de funcție este doar semantica unde XML (AJAX, de la o altă funcție, etc) este de a fi plasat în raport cu alte elemente din DOM.
element.appendChild(new DOMParser().parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">'+id_('post_body').value+'</div>'),'application/xml'.childNodes[0]);
Adaugă XML "după" un element specific:
xml_add('after', id_(push_current_id()).tag_('footer')[0], '<div class="hidden" id="editor_rich_temp"></div>');
Adaugă XML "înainte" un element specific:
xml_add('before', $('#'+push_current_id()+' section')[0], '<h2 xmlns="http://www.w3.org/1999/xhtml"><span>Compose Message</span></h2>');
Adaugă XML "în interiorul" un element specific (pentru a deveni ultimul copil element):
xml_add('inside', $('body > header > nav')[1], xml);
Acestea sunt funcții folosit pe platforma, pentru a evita pedepsirea utilizatorilor cu cinci copii de cadre/biblioteci și asigurarea de înaltă performanță:
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;}
Dacă doriți curat profesionale JavaScript te're de gând să nevoie pentru a utiliza "prototip" care este uimitor. În exemplu id_('de exemplu').tag_('td')[0].class_('bine')[0]
funcționează mult mai ușor decât să te pui cu $
interiorul bucle.
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;}
Am actualiza codul în rare ocazii (pentru ca's rock solid, nu "versiune" dependente). De programare pură JavaScript-l's ușor pentru a evita masiv low-performanță cadre și biblioteci. 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>
Dacă fișierul html se află la nivel local, apoi du-te pentru iframe în loc de
De ex : <iframe src="home.html" lățime="100" înălțime="100"/>