JavaScript kullanarak bir HTML sayfasını <div> içine nasıl yükleyebilirim?

home.html dosyasının <div id="content"> içine yüklenmesini istiyorum. 

<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 kullandığımda bu sorunsuz çalışıyor. Google Chrome kullandığımda eklenti istiyor. Google Chrome'da çalışmasını nasıl sağlayabilirim?

TylerH
Edited question 2014ösp41ös20 Ağustos 2014 в 8:41
Programlama
google-chrome javascript html
2013ööp30öö4 Temmuz 2013 в 4:30
24 görünümler
Çözüm

Sonunda sorunumun cevabını buldum. Çözüm şu

function load_home() {
     document.getElementById("content").innerHTML='';
}
Neuron
Edited answer 2019ösp14ös13 Ocak 2019 в 1:14
Yorumlar (8)

jQuery yükleme işlevini kullanabilirsiniz:

<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>

Özür dilerim. Yüklendiğinde yerine tıklandığında için düzenlendi.

Aaron Liske
Edited answer 2013ööp41öö4 Temmuz 2013 в 4:41
Yorumlar (1)

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();
}

kısıtlamalarınıza bağlı olarak ajax kullanmalı ve javascript'inizin load_home() işlevini çağıran işaretlemeden önce yüklendiğinden emin olmalısınız

Referans - davidwalsh

MDN - Fetch Kullanımı

[JSFIDDLE demo](http://jsfiddle.net/jpmCz/)

Jay Harris
Edited answer 2019ööp7öö2 Ocak 2019 в 2:07
Yorumlar (4)