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で動作するようになりますか?
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>
すみません。 オンロードではなくオンクリックに編集しました。
Fetch 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のデモ]()。