161

Home.html dosyasının yüklenmesini istiyorum <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 kullandığımda bu iyi çalışıyor. Google Chrome'u kullandığımda eklenti istiyor. Google Chrome'da nasıl çalıştırabilirim?

javascript html google-chrome

— Giliweed
kaynak

1

Ve olduğu gibi yanlış döndürmeyi unutmayınload_home(); return false

— mplungjan

2

Kütüphaneler olmadan çok kolay değil. Bir iFrame'e yüklenirken daha iyi olabilir. Bu

— yazıyı

1

home.html basit bir web sayfası, ben sadece ev adını verdim. @jayharris

— Giliweed

Ve o sayfadaki her şeyi içerik öğesine yüklemeye mi çalışıyorsunuz, yoksa yalnızca içerik öğesinde sayfaya bir bağlantı mı yerleştirmeye çalışıyorsunuz?

— adeneo

Bu sayfadaki her şeyi içerik öğesine yüklemeye çalışıyorum. Soruyu düzenledim. @adeneo

— Giliweed

213

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

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}

— Giliweed
kaynak

3

Her ne kadar bu zarif ve temiz olsa da, nesne öğesini DOM api üzerinden gerçekten oluştursaydınız daha iyi olurdu.

— David

3

Bu yavaş ve saldırıya güvensiz - aşağıdaki cevabımı görün (yorumda sığmayacak kadar uzundu)

— Sam Redway

1

@DavidMaes ne önerirsiniz? bir örnek gösterebilir?

— Xsmael

2

Bu güvenli olmayabilir, ancak basit bir "masaüstünüzdeki bir klasör içinde yerel" geliştirme yapıyorsanız, bu iyi - herkes banka hesap bilgilerini işleyen ve XSS saldırısı yapan müşterileri olan bir banka web sitesi çalıştırmıyor. Çözüm için teşekkürler, benim ihtiyaçları için başka bir yol gitmek zorunda kaldı ve bir python sunucusu gerektiren ve harici dinamik olarak yüklenen html için düzenli Jquery load () işlevini kullanarak sona erdi. Ama bu benim sorunum beni ele almak için yardımcı oldu

— rwarner

1

@ KamilKiełczewski type="type/html"değiştirilditype="text/html"

— Shayan

63

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>

Afedersiniz. Yüklemek yerine tıklama için düzenlendi.

— Aaron Liske
kaynak

Merhaba, ben bu yöntemi kullanmaya çalıştım ama işe alamıyorum. İstersen yeni bir soru açabilirim. Teşekkürler. Benim keman burada: jsfiddle.net/ekareem/aq9Laaew/288345

— NoChance

52

API Al

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'sı

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 dayanarak ajax kullanmalı ve JavaScript'i çağıran işaretlemeden önce javascriptinizin yüklendiğinden emin olmalısınız load_home() işlevi

Referans - davidwalsh

MDN - Getirmeyi Kullanma

JSFIDDLE demosu

— Jay Harris
kaynak

Teşekkürler. ancak kodum bir projenin bir kısmı ile ilgilidir. ve proje çalışmasında iframe kullanmamam gerektiğini söylediğim için üzgünüm. Soruyu düzenledim. @jay harris bir göz

— Giliweed

1

@Jay Harris: Aynı menşe politikası ne olacak?

— ArunRaj

1

@ArunRaj javascript bc içindeki başka bir web sitesinden gelen bir sayfayı yükleyemezsiniz, bu bir güvenlik sorunudur. ancak sunucunuzdan bir komut dosyası yükleyebilirsiniz, bu da diğer sayfayı yükler ve ajax aracılığıyla javascript'e tekrar yansıtır.

— Jay Harris

1

Bir ekleme Content-Typea başlığını GETistek hiçbir mantıklı - Ne demek düşünüyorum setRequestHeader("Accept", "text/html")?

— mindplay.dk

24

HTML'ye modern Javascript yolu getiriliyor

Bu yaklaşım async/awaitve fetchAPI gibi modern Javascript özelliklerini kullanır . HTML'yi metin olarak indirir ve ardından innerHTMLkapsayıcı öğenize gönderir.

/**
  * @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 function loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

await (await fetch(url)).text()Biraz zor görünebilir, ama açıklaması kolaydır. İki eşzamansız adımı vardır ve bu işlevi şu şekilde yeniden yazabilirsiniz:

async function fetchHtmlAsText(url) {
    const response = await fetch(url);
    return await response.text();
}

Daha fazla ayrıntı için getirme API'sı belgelerine bakın.

— Lucio Paiva
kaynak

Bunu kullanırken sorun yaşayanlar için işlevlerin "window.onload" işlevinin dışında yazıldığından emin olun.

— Kış Cara

19

Bunu gördüm ve oldukça güzel göründüğünü düşündüm, bu yüzden bazı testler yaptım.

Temiz bir yaklaşım gibi görünebilir, ancak performans açısından, jQuery yükleme işlevine sahip bir sayfanın yüklenmesi veya XMLHttpRequest'in vanilya javascript yaklaşımının birbirine yakın olduğu zamana kıyasla% 50 oranında gecikmektedir.

Bunun kaputun altında sayfayı tam olarak aynı şekilde aldığını, ancak aynı zamanda tamamen yeni bir HTMLElement nesnesi oluşturma ile uğraşması gerektiğine inanıyorum.

Özetle jQuery kullanmanızı öneririm. Sözdizimi olabildiğince kolay kullanımlıdır ve kullanmanız için güzel yapılandırılmış bir geri çağırma özelliğine sahiptir. Aynı zamanda nispeten hızlıdır. Vanilya yaklaşımı farkedilemez birkaç milisaniye ile daha hızlı olabilir, ancak sözdizimi kafa karıştırıcıdır. Bunu sadece jQuery'ye erişemediğim bir ortamda kullanırım.

İşte test etmek için kullandığım kod - oldukça ilkel ama zamanlar birden çok denemede çok tutarlı geri geldi, bu yüzden her durumda yaklaşık + - 5 ms kesin diyebilirim. Testler Chrome'da kendi ev sunucumdan yapıldı:

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

— Sam Redway
kaynak

1

Bence "doğru" yerine "kesin" demek istedin.

— pulse0ne

Yani birçok kez çalıştırdım ve her seferinde sadece birkaç milisaniyelik bir salınım vardı. Böylece verilen süreler + - 5ms veya buna yakın bir şey için doğrudur. Üzgünüm orada tam olarak net olmayabilirim.

— Sam Redway

6

Kullanırken

$("#content").load("content.html");

Daha sonra XMLHttpRequest yüklenemediğinden kromda yerel olarak "hata ayıklama" yapamayacağınızı unutmayın. Bu, çalışmadığı anlamına gelmez, kodunuzu aynı etki alanında aka olarak test etmeniz gerektiği anlamına gelir. sunucunuz

— Serup
kaynak

5

"jQuery"! = "javascript" || jQuery <javascript || OP.indexOf ("jQuery") <1

— KittenCodings

4

JQuery'yi kullanabilirsiniz:

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});

— Anup
kaynak

3

Lütfen cevabınızı açıklayınız. Ayrıca bu OP soruda bahsetmedi jQuery gibi görünüyor.

— David

2

efendim burada biraz daha cevap jquery

— Anup

jQuery, bu tür Ajax çağrılarını yapmak için oldukça standarttır; bu yüzden cevabı kısa ve uygun buluyorum.

— Luca

2

Deneyin

async function load_home(){
  content.innerHTML = await (await fetch('home.html')).text();
}

Kod snippet'ini göster

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>

Snippet'i genişlet

— Kamil Kiełczewski
kaynak

1

$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

veya

document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';

— Krishna Pattar
kaynak

0

Github'da bir öğeye içerik yükleyen bu eklenti var. İşte repo

https://github.com/abdi0987/ViaJS

— Grub'u Çalıştır
kaynak

0

Bu genellikle header.php dosyasını veya herhangi bir sayfayı dahil etmek istediğinizde gereklidir.

Özellikle HTML sayfanız varsa ve php include işlevini kullanmak istemiyorsanız Java'da kolaydır, ancak php işlevini yazmalı ve komut dosyası etiketinde Java işlevi olarak eklemelisiniz.

Bu durumda fonksiyon olmadan ve sadece Just adıyla yazmalısınız. Komut dosyası işlev sözcüğünü öfkelendirin ve include header.php'yi başlatın. Yani php include işlevini script etiketindeki Java işlevine dönüştürün ve tüm içeriğinizi bu dahil edilen dosyaya yerleştirin.

— Creative87
kaynak

0

Bu basit kodu kullanın

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```

— Cak Sup
kaynak

w3.includeHTML () tanımlanmamıştır

— toing_toing

Merak edenler için w3-include-HTML, W3Schools.com'un W3.JSkomut dosyası kitaplığının bir parçasıdır (burada bulunabilir: w3schools.com/w3js/default.asp ). Bunu W3Schools işaret etmek istiyorum (ve w3.js ve w3.includeHTML()) W3 Consortium ((diğer grup WHATWG olmanın HTML + CSS + DOM standartları tanımlayan iki ana gruptan birine üye herhangi bir şekilde değildir).

— Dai

-4

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>

— Rudolf Remšík
kaynak

1

Soruya karşılık gelmeyen bir cevapla cevaplamak, aynı zamanda zaten bunu soran aynı kişi tarafından da cevaplandı

— Katler

-5

Html dosyanız yerel olarak bulunuyorsa, etiket yerine iframe için gidin. etiketler çapraz tarayıcıda çalışmaz ve çoğunlukla Flash için kullanılır

Örneğin: <iframe src="home.html" width="100" height="100"/>

— Jain Abhishek
kaynak

JavaScript kullanarak bir <div> dosyasına nasıl HTML sayfası yükleyebilirim?

HTML'ye modern Javascript yolu getiriliyor