161

Tôi muốn home.html để tải vào <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>

Điều này hoạt động tốt khi tôi sử dụng Firefox. Khi tôi sử dụng Google Chrome, nó sẽ yêu cầu trình cắm. Làm cách nào để nó hoạt động trong Google Chrome?

javascript html google-chrome

— Giliweed
nguồn

1

Và nhớ trả lại sai như trongload_home(); return false

— mplungjan

2

Không quá dễ dàng nếu không có thư viện. Có thể tốt hơn khi tải vào một iFrame. Kiểm tra bài đăng này: stackoverflow.com/questions/14470135/ từ

— sgeddes

1

home.html là một trang web đơn giản, tôi chỉ đặt tên cho nó là nhà. @jayharris

— Giliweed

Và bạn đang cố tải mọi thứ trên trang đó vào thành phần nội dung hay chỉ đặt một liên kết đến trang trong thành phần nội dung?

— adeneo

Tôi đang cố tải mọi thứ trên trang đó vào thành phần nội dung. Tôi chỉnh sửa câu hỏi. @adeneo

— Giliweed

213

Cuối cùng tôi đã tìm thấy câu trả lời cho vấn đề của mình. Giải pháp là

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

— Giliweed
nguồn

3

Mặc dù điều này là thanh lịch và sạch sẽ, tôi cho rằng sẽ tốt hơn nếu bạn thực sự tạo ra phần tử đối tượng thông qua api DOM.

— David

3

Điều này chậm và không an toàn để tấn công - xem câu trả lời của tôi bên dưới (quá dài để phù hợp với nhận xét)

— Sam Redway

1

@DavidMaes bạn đề nghị gì? bạn có thể hiển thị một mẫu?

— Xsmael

2

Mặc dù điều này có thể không an toàn, nhưng nếu bạn đang thực hiện một phát triển "cục bộ trong một thư mục trên máy tính để bàn" thì điều này là tốt - không phải ai cũng đang chạy một trang web ngân hàng với các khách hàng xử lý thông tin tài khoản ngân hàng và chạy vào một cuộc tấn công XSS. Cảm ơn giải pháp, vì nhu cầu của tôi, cuối cùng tôi đã phải đi một tuyến đường khác và yêu cầu máy chủ python và sử dụng hàm Jquery load () thông thường cho html được tải động bên ngoài. Nhưng điều này rất hữu ích để giúp tôi giải quyết vấn đề của mình

— rwarner

1

@ KamilKiełczewski type="type/html"được đổi thànhtype="text/html"

— Shaya

63

Bạn có thể sử dụng hàm tải 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>

Lấy làm tiếc. Chỉnh sửa cho nhấp chuột thay vì tải.

— Aaron Liske
nguồn

Xin chào, tôi đã thử sử dụng phương pháp này nhưng tôi không thể làm cho nó hoạt động được. Tôi có thể mở một câu hỏi mới nếu bạn muốn. Cảm ơn. Fiddle

— NoChance 8/12/18

52

Tìm nạp 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);
    });
}

API XHR

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

dựa trên các ràng buộc của bạn, bạn nên sử dụng ajax và đảm bảo rằng javascript của bạn đã được tải trước khi đánh dấu gọi load_home() hàm

Tham khảo - davidwalsh

MDN - Sử dụng Tìm nạp

Bản demo của JSFIDDLE

— Jay Harris
nguồn

cảm ơn. nhưng mã của tôi liên quan đến một phần của dự án. và xin lỗi để nói rằng tôi không giả sử sử dụng iframe trong công việc dự án. Tôi chỉnh sửa câu hỏi. có một cái nhìn @jay harris

— Giliweed

1

@Jay Harris: Điều gì về chính sách xuất xứ tương tự?

— ArunRaj

1

@ArunRaj bạn không thể tải một trang đến từ một trang web khác trong javascript bc đó là một vấn đề bảo mật. nhưng bạn có thể tải một tập lệnh từ máy chủ của mình, nó sẽ lần lượt tải trang khác đó và đưa nó trở lại javascript thông qua ajax.

— Jay Harris

1

Thêm một Content-Typetiêu đề vào một GETyêu cầu không có ý nghĩa - tôi nghĩ bạn có ý setRequestHeader("Accept", "text/html")gì?

— mindplay.dk

24

Tìm nạp HTML theo cách Javascript hiện đại

Cách tiếp cận này sử dụng các tính năng Javascript hiện đại như async/awaitvà fetchAPI. Nó tải xuống HTML dưới dạng văn bản và sau đó đưa nó vào innerHTMLphần tử container của bạn.

/**
  * @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");
}

Điều await (await fetch(url)).text()này có vẻ hơi khó khăn, nhưng thật dễ để giải thích. Nó có hai bước không đồng bộ và bạn có thể viết lại chức năng đó như thế này:

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

Xem tài liệu API tìm nạp để biết thêm chi tiết.

— Lucio Paiva
nguồn

Đối với những người đang gặp vấn đề khi sử dụng tính năng này, hãy đảm bảo rằng các hàm được ghi bên ngoài hàm "window.onload".

— Mùa đông Cara

19

Tôi thấy điều này và nghĩ rằng nó trông khá đẹp nên tôi đã chạy thử nghiệm trên đó.

Nó có vẻ như là một cách tiếp cận rõ ràng, nhưng về mặt hiệu suất, nó bị tụt lại 50% so với thời gian tải một trang có chức năng tải jQuery hoặc sử dụng phương pháp javascript javascript của XMLHttpRequest tương tự nhau.

Tôi tưởng tượng điều này là bởi vì dưới mui xe, nó có được trang theo cùng một cách chính xác nhưng nó cũng phải đối phó với việc xây dựng một đối tượng HTMLEuity hoàn toàn mới.

Tóm lại tôi đề nghị sử dụng jQuery. Cú pháp là dễ sử dụng nhất có thể và nó có một cuộc gọi lại có cấu trúc độc đáo để bạn sử dụng. Nó cũng tương đối nhanh. Cách tiếp cận vanilla có thể nhanh hơn trong vài mili giây không thể nhận thấy, nhưng cú pháp khó hiểu. Tôi sẽ chỉ sử dụng điều này trong một môi trường mà tôi không có quyền truy cập vào jQuery.

Đây là mã tôi đã sử dụng để kiểm tra - nó khá thô sơ nhưng thời gian quay trở lại rất nhất quán qua nhiều lần thử nên tôi sẽ nói chính xác khoảng + - 5ms trong mỗi trường hợp. Các thử nghiệm đã được chạy trong Chrome từ máy chủ của riêng tôi:

<!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
nguồn

1

Tôi nghĩ thay vì "chính xác", bạn có nghĩa là "chính xác."

— Pulse0ne

Ý tôi là tôi đã chạy nó nhiều lần và mỗi lần chỉ có một vài giây. Vì vậy, thời gian đã cho là chính xác đến + - 5ms hoặc một cái gì đó gần với điều đó. Xin lỗi tôi có thể không hoàn toàn rõ ràng ở đó.

— Sam Redway

6

Khi đang sử dụng

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

Sau đó, hãy nhớ rằng bạn không thể "gỡ lỗi" trong chrome cục bộ, vì XMLHttpRequest không thể tải - Điều này KHÔNG có nghĩa là nó không hoạt động, điều đó chỉ có nghĩa là bạn cần kiểm tra mã của mình trên cùng một tên miền. máy chủ của bạn

— serup
nguồn

5

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

— KittenCodings

4

Bạn có thể sử dụng jQuery:

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

— Anup
nguồn

3

Hãy giải thích câu trả lời của bạn. Ngoài ra, nó trông giống như jQuery mà OP không đề cập đến trong câu hỏi.

— David

2

thưa ngài ở đây một số câu trả lời nữa là trong jquery

— Anup

jQuery là tiêu chuẩn khá để thực hiện các cuộc gọi Ajax như vậy; vì vậy tôi tìm thấy câu trả lời súc tích và phù hợp.

— Luca

2

thử

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

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

— Kamil Kiełczewski
nguồn

1

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

hoặc là

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

— Pattar
nguồn

0

Có plugin này trên github tải nội dung vào một phần tử. Đây là repo

https://github.com/abdi0987/ViaJS

— Chạy Grub
nguồn

0

Điều này thường là cần thiết khi bạn muốn bao gồm tiêu đề.php hoặc bất cứ trang nào.

Trong Java, thật dễ dàng đặc biệt nếu bạn có trang HTML và không muốn sử dụng chức năng bao gồm php nhưng bạn nên viết hàm php và thêm nó làm hàm Java trong thẻ script.

Trong trường hợp này, bạn nên viết nó mà không có chức năng theo sau là tên Chỉ. Script hoành hành từ chức năng và bắt đầu bao gồm tiêu đề.php. Tôi chuyển đổi chức năng bao gồm php thành chức năng Java trong thẻ script và đặt tất cả nội dung của bạn vào tệp được bao gồm.

— Sáng tạo87
nguồn

0

Sử dụng mã đơn giản này

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

— Cak Sup
nguồn

w3.includeHTML () không được xác định

— toing_toing

Đối với những người thắc mắc, w3-include-HTMLlà một phần của W3.JSthư viện tập lệnh của W3Schools.com (có sẵn tại đây: w3schools.com/w3js/default.asp ). Tôi muốn chỉ ra rằng W3Schools (và w3.js, và w3.includeHTML()) đang không ở trong bất kỳ cách nào liên kết với W3 Consortium (một trong hai nhóm chính mà xác định các tiêu chuẩn HTML + CSS + DOM (nhóm khác là WHATWG).

— Đại

-4

show leather.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>

show DA_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
nguồn

1

Trả lời bằng một câu trả lời không tương ứng với câu hỏi, cũng đã được trả lời bởi cùng một người đã hỏi nó

— Katler

-5

Nếu tệp html của bạn cư trú cục bộ thì hãy tìm iframe thay vì thẻ. các thẻ không hoạt động trên nhiều trình duyệt và chủ yếu được sử dụng cho Flash

Ví dụ: <iframe src="home.html" width="100" height="100"/>

— Jain Abhishek
nguồn

Làm cách nào để tôi tải trang HTML trong <div> bằng JavaScript?

Tìm nạp HTML theo cách Javascript hiện đại