ฉันจะโหลดหน้า HTML ใน <div> โดยใช้ JavaScript ได้อย่างไร

161

ฉันต้องการ 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 ได้อย่างไร

javascript  html  google-chrome 
— Giliweed
แหล่งที่มา
1
และอย่าลืมกลับเท็จเหมือนในload_home(); return false
— mplungjan
2
ไม่ง่ายเกินไปหากไม่มีห้องสมุด อาจดีกว่าการโหลดลงใน iFrame ตรวจสอบโพสต์นี้: stackoverflow.com/questions/14470135/…
— sgeddes
1
home.html เป็นหน้าเว็บแบบง่ายฉันเพิ่งตั้งชื่อมันไว้ที่บ้าน @jayharris
— Giliweed
และคุณกำลังพยายามโหลดทุกอย่างในหน้านั้นลงในองค์ประกอบเนื้อหาหรือเพียงแค่วางลิงค์ไปยังหน้าในองค์ประกอบเนื้อหา?
— adeneo
ฉันพยายามโหลดทุกอย่างในหน้านั้นลงในองค์ประกอบเนื้อหา ฉันแก้ไขคำถาม @adeneo
— Giliweed

คำตอบ:

213

ในที่สุดฉันก็พบคำตอบสำหรับปัญหาของฉัน ทางแก้คือ

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
— Giliweed
แหล่งที่มา
3
แม้ว่านี่จะสง่างามและสะอาด แต่ฉันคิดว่ามันจะดีกว่าถ้าคุณสร้างองค์ประกอบวัตถุผ่าน DOM api
— David
3
นี่ช้าและไม่ปลอดภัยต่อการโจมตี - ดูคำตอบของฉันด้านล่าง (ยาวเกินกว่าจะแสดงความคิดเห็นได้)
— Sam Redway
1
@DavidMaes คุณแนะนำอะไร? คุณสามารถแสดงตัวอย่างได้หรือไม่?
— Xsmael
2
แม้ว่าสิ่งนี้อาจไม่ปลอดภัยหากคุณกำลังพัฒนา "local ภายในโฟลเดอร์บนเดสก์ท็อปของคุณ" สิ่งนี้ทำได้ดี - ไม่ใช่ทุกคนที่ใช้เว็บไซต์ธนาคารกับลูกค้าที่จัดการข้อมูลบัญชีธนาคารและทำงานในการโจมตี XSS ขอบคุณสำหรับการแก้ปัญหาสำหรับความต้องการของฉันฉันต้องไปเส้นทางอื่นและต้องการเซิร์ฟเวอร์หลามและใช้ฟังก์ชัน Jquery load () ปกติสำหรับ html ที่โหลดภายนอกแบบไดนามิก แต่สิ่งนี้มีประโยชน์สำหรับฉันในการแก้ไขปัญหาของฉัน
— rwarner
1
@ KamilKiełczewski type="type/html"ถูกเปลี่ยนเป็นtype="text/html"
— Shayan
63

คุณสามารถใช้ฟังก์ชั่นโหลด 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>

ขอโทษ แก้ไขสำหรับการคลิกแทนการโหลด

— Aaron Liske
แหล่งที่มา
สวัสดีฉันพยายามใช้วิธีนี้ แต่ไม่สามารถใช้งานได้ ฉันสามารถเปิดคำถามใหม่ได้หากคุณต้องการ ขอบคุณ ซอของฉันอยู่ที่นี่: jsfiddle.net/ekareem/aq9Laaew/288345
— NoChance
52

ดึง 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 และตรวจสอบให้แน่ใจว่าจาวาสคริปต์ของคุณโหลดก่อนมาร์กอัปที่เรียกใช้load_home()ฟังก์ชัน

การอ้างอิง - davidwalsh

MDN - การใช้การดึงข้อมูล

การสาธิต JSFIDDLE

— เจแฮร์ริส
แหล่งที่มา
ขอบคุณ แต่รหัสของฉันเกี่ยวข้องกับส่วนหนึ่งของโครงการ และขอโทษที่บอกว่าฉันไม่ควรใช้ iframe ในงานโครงการ ฉันแก้ไขคำถาม ดู @jay harris
— Giliweed
1
@ Jay Harris: นโยบายเกี่ยวกับต้นกำเนิดเดียวกันเป็นอย่างไร
— ArunRaj
1
@ArunRaj คุณไม่สามารถโหลดหน้าเว็บที่มาจากเว็บไซต์อื่นภายใน javascript bc ซึ่งเป็นเรื่องเกี่ยวกับความปลอดภัย แต่คุณสามารถโหลดสคริปต์จากเซิร์ฟเวอร์ของคุณซึ่งจะเป็นการโหลดหน้าเว็บอื่นและสะท้อนกลับไปที่จาวาสคริปต์ผ่าน ajax
— Jay Harris
1
การเพิ่มContent-Typeส่วนหัวในGETคำขอไม่มีเหตุผล - ฉันคิดว่าคุณหมายถึงsetRequestHeader("Accept", "text/html")อะไร
— mindplay.dk
24

ดึง HTML ในแบบ Javascript ที่ทันสมัย

วิธีการนี้ใช้ประโยชน์จากคุณสมบัติ Javascript ที่ทันสมัยเช่นasync/awaitและfetchAPI มันดาวน์โหลด 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 function loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

await (await fetch(url)).text()อาจดูเหมือนบิตหากิน แต่มันเป็นเรื่องง่ายที่จะอธิบาย มันมีสองขั้นตอนแบบอะซิงโครนัสและคุณสามารถเขียนฟังก์ชั่นใหม่ได้ดังนี้

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

ดูเอกสารการดึงข้อมูล APIสำหรับรายละเอียดเพิ่มเติม

— Lucio Paiva
แหล่งที่มา
สำหรับผู้ที่มีปัญหาในการใช้สิ่งนี้ตรวจสอบให้แน่ใจว่าฟังก์ชั่นนั้นเขียนอยู่นอกฟังก์ชั่น "window.onload"
— Winter Cara
19

ฉันเห็นสิ่งนี้และคิดว่ามันดูค่อนข้างดีดังนั้นฉันจึงทำการทดสอบกับมัน

อาจดูเหมือนเป็นวิธีที่สะอาดตา แต่ในแง่ของประสิทธิภาพมันล้าหลังกว่า 50% เมื่อเทียบกับเวลาที่โหลดหน้าเว็บด้วยฟังก์ชั่นโหลด jQuery หรือใช้วิธี vanilla javascript ของ XMLHttpRequest ซึ่งคล้าย ๆ กัน

ฉันคิดว่านี่เป็นเพราะภายใต้ประทุนมันจะได้รับหน้าในแบบเดียวกันแน่นอน แต่มันก็ต้องจัดการกับการสร้างวัตถุ HTMLElement ใหม่ทั้งหมดด้วยเช่นกัน

โดยสรุปผมแนะนำให้ใช้ jQuery ไวยากรณ์เป็นเรื่องเกี่ยวกับการใช้งานง่ายที่สุดเท่าที่จะเป็นไปได้และมีการโทรกลับโครงสร้างอย่างเพื่อให้คุณใช้ มันค่อนข้างเร็ว วิธีวานิลลาอาจเร็วขึ้นโดยใช้เวลาไม่กี่มิลลิวินาทีที่ไม่สามารถสังเกตเห็นได้ แต่ไวยากรณ์มีความสับสน ฉันจะใช้สิ่งนี้ในสภาพแวดล้อมที่ฉันไม่สามารถเข้าถึง jQuery

นี่คือรหัสที่ฉันใช้ในการทดสอบ - มันค่อนข้างพื้นฐาน แต่เวลากลับมาสอดคล้องกันมากในการพยายามหลายครั้งดังนั้นฉันจะบอกว่าแม่นยำประมาณ + - 5ms ในแต่ละกรณี การทดสอบรันใน Chrome จากเซิร์ฟเวอร์ที่บ้านของฉันเอง:

<!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>
— แซมเรดเวย์
แหล่งที่มา
1
ฉันคิดว่าแทนที่จะ "แม่นยำ" คุณหมายถึง "แม่นยำ"
— pulse0ne
ฉันหมายถึงฉันวิ่งหลายครั้งและมีเพียงไม่กี่มิลลิวินาทีในแต่ละครั้ง ดังนั้นเวลาที่กำหนดจึงมีความแม่นยำถึง + - 5ms หรือบางสิ่งที่ใกล้เคียง ขออภัยฉันอาจยังไม่ชัดเจนทั้งหมด
— Sam Redway
6

เมื่อใช้งาน 

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

จากนั้นจำไว้ว่าคุณไม่สามารถ "ตรวจแก้จุดบกพร่อง" ในโครเมี่ยมในเครื่องได้เนื่องจาก XMLHttpRequest ไม่สามารถโหลดได้ - นี่ไม่ได้หมายความว่ามันใช้งานไม่ได้หมายความว่าคุณต้องทดสอบโค้ดของคุณในโดเมนเดียวกัน เซิร์ฟเวอร์ของคุณ

— Serup
แหล่งที่มา
5
"jQuery"! = "javascript" || jQuery <javascript || OP.indexOf ("jQuery") <1
— KittenCodings
4

คุณสามารถใช้ jQuery: 

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});
— Anup
แหล่งที่มา
3
กรุณาอธิบายคำตอบของคุณ นอกจากนี้ยังดูเหมือน jQuery ซึ่ง OP ไม่ได้กล่าวถึงในคำถาม
— David
2
คุณนี่คำตอบเพิ่มเติมอยู่ใน jquery
— Anup
jQuery เป็นมาตรฐานที่ใช้เรียกอาแจ็กซ์ ดังนั้นฉันจึงพบคำตอบที่กระชับและเหมาะสม
— Luca
2

ลอง

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

แสดงตัวอย่างโค้ด

— Kamil Kiełczewski
แหล่งที่มา
1 
$("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>';
— พระกฤษณะ
แหล่งที่มา
0

โดยทั่วไปจำเป็นต้องมีเมื่อคุณต้องการรวม header.php หรือหน้าอะไรก็ตาม

ใน Java นั้นง่ายมากโดยเฉพาะถ้าคุณมีหน้า HTML และไม่ต้องการใช้ php include function แต่คุณควรเขียนฟังก์ชัน php และเพิ่มเป็นฟังก์ชัน Java ในแท็กสคริปต์

ในกรณีนี้คุณควรเขียนโดยไม่มีฟังก์ชันตามด้วยชื่อ Just สคริปต์โกรธคำของฟังก์ชันและเริ่มการรวม header.php Ie แปลง php รวมฟังก์ชั่นเพื่อฟังก์ชั่น Java ในแท็กสคริปต์และวางเนื้อหาทั้งหมดของคุณในไฟล์ที่รวม

— Creative87
แหล่งที่มา
0

ใช้รหัสง่าย ๆ นี้

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```
— Cak Sup
แหล่งที่มา
w3.includeHTML () ไม่ได้ถูกกำหนด
— toing_toing
สำหรับผู้ที่สงสัยw3-include-HTMLเป็นส่วนหนึ่งของW3.JSห้องสมุดสคริปต์ของ W3Schools.com (มีให้ที่นี่: w3schools.com/w3js/default.asp ) ฉันต้องการชี้ให้เห็นว่า W3Schools (และ w3.js และw3.includeHTML()) ไม่ได้มีส่วนเกี่ยวข้องกับ W3 Consortium (หนึ่งในสองกลุ่มหลักที่กำหนดมาตรฐาน HTML + CSS + DOM (กลุ่มอื่นที่เป็น WHATWG)
— 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
แหล่งที่มา
1
ตอบรับกับคำตอบที่ไม่ตรงกับคำถามที่ยังมันรับการตอบรับแล้วโดยบุคคลคนเดียวกันที่ถามมัน
— Katler
-5

หากไฟล์ html ของคุณอยู่ในเครื่องให้ไปที่ iframe แทนแท็ก แท็กไม่ทำงานข้ามเบราว์เซอร์และส่วนใหญ่จะใช้สำหรับ Flash

ตัวอย่างเช่น: <iframe src="home.html" width="100" height="100"/>

— Jain Abhishek
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.