Tải nội dung tệp HTML vào Div [mà không cần sử dụng iframe]

Question

Tôi khá chắc chắn đây là một câu hỏi phổ biến, nhưng tôi khá mới với JS và đang gặp một số vấn đề với điều này.

Tôi muốn tải x.html vào một div có id "y" mà không sử dụng iframe. Tôi đã thử một vài thứ, tìm kiếm xung quanh, nhưng tôi không thể tìm được giải pháp tốt cho vấn đề của mình.

Tôi thích thứ gì đó trong JavaScript nếu có thể.

Xin cảm ơn trước, mọi người!

Answer 1

Tôi khuyên bạn nên tham gia vào một trong các thư viện JS ngoài kia. Chúng đảm bảo khả năng tương thích để bạn có thể bắt đầu và chạy rất nhanh. jQuery và DOJO đều thực sự tuyệt vời. Để làm được những gì bạn đang cố gắng để làm trong jQuery, ví dụ, nó sẽ đi một cái gì đó như thế này:

<script type="text/javascript" language="JavaScript"> 
$.ajax({ 
    url: "x.html", 
    context: document.body, 
    success: function(response) { 
     $("#yourDiv").html(response); 
    } 
}); 
</script> 

Answer 2

jQuery:

$("#y").load("x.html"); 

Answer 3

http://www.boutell.com/newfaq/creating/include.html

này sẽ giải thích làm thế nào để viết của bạn riêng clientsideinlcude nhưng jQuery là rất nhiều, A LOT dễ dàng hơn tùy chọn ... cộng với bạn sẽ đạt được nhiều hơn nữa bằng cách sử dụng jQuery anyways

Answer 4

Wow, từ tất cả các câu trả lời khuôn khổ quảng cáo y bạn có thể nghĩ rằng đây là một cái gì đó JavaScript đã làm cho vô cùng khó khăn. Nó không phải là thực sự.

var xhr= new XMLHttpRequest(); 
xhr.open('GET', 'x.html', true); 
xhr.onreadystatechange= function() { 
    if (this.readyState!==4) return; 
    if (this.status!==200) return; // or whatever error handling you want 
    document.getElementById('y').innerHTML= this.responseText; 
}; 
xhr.send(); 

Nếu bạn cần IE < 8 tương thích, làm đầu tiên này để mang lại những trình duyệt lên đến tốc độ:

if (!window.XMLHttpRequest && 'ActiveXObject' in window) { 
    window.XMLHttpRequest= function() { 
     return new ActiveXObject('MSXML2.XMLHttp'); 
    }; 
} 

Lưu ý rằng tải nội dung vào trang với kịch bản sẽ làm cho nội dung mà vô hình cho khách hàng mà không cần JavaScript có sẵn, chẳng hạn như công cụ tìm kiếm. Sử dụng cẩn thận và xem xét phía máy chủ bao gồm nếu tất cả những gì bạn muốn là đưa dữ liệu vào một tệp được chia sẻ chung.

Answer 5

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