Nhúng file HTML

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách nhúng nội dung từ một file HTML khác bằng HTML, CSS và JavaScript.

Nhúng file HTML

Click vào nút button bên dưới để thực hiện load file.

Cách nhúng file HTML

Bước 1) Thêm HTML:

Ví dụ

<button id="myBtn" type="button">Click here to load file</button>
<div id="myDiv" src="/exampleJS/mycar.html"></div>

File HTML mycar có nội dung như sau:

<body>
<div style="width:50%">
<img src="/images/img_car.jpg" alt="Nice car" style="width:100%;margin-bottom:20px">

<p>Ô tô là phương tiện giao thông có bánh, có động cơ dùng để vận chuyển.
Hầu hết các định nghĩa của thuật ngữ chỉ rõ rằng ô tô được thiết kế để chạy chủ yếu trên đường, có chỗ ngồi cho một đến tám người, thường có bốn bánh.</p>

<p>(Wikipedia)</p>
</div>
</body>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho nút button */
#myBtn {
    border:none;
    outline:none;
    padding:10px 15px;
    background-color:black;
    color:white;
    cursor:pointer;
    border-radius:6px;
}
/* Thêm hiệu ứng khi hover */
#myBtn:hover {
    background-color:orange;    
}
div {
    margin:20px auto;
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
// Khai báo biến và lấy các giá trị
var myBtn, myDiv, xhttp, x;
myBtn = document.getElementById('myBtn');
myDiv = document.getElementById('myDiv');

/* Thêm sự kiện click vào nút button */
myBtn.onclick = function() {
    // Làm trống nội dung phần tử div
    if(myDiv.textContent) {
        myDiv.innerHTML = null;
    }
    myBtn.innerHTML = "Loading ...";
    // Tải file
    setTimeout(function() { 
        xhttp = new XMLHttpRequest(); // Đối tượng để yêu cầu file từ server
        x = myDiv.getAttribute("src");
        xhttp.open('GET', x, true); /* Cấu hình bất đồng bộ */
        xhttp.send(); /* Rửi yêu cầu tới máy chủ */
        /* Thêm sự kiện khi yêu cầu file thành công */
        xhttp.onload = function() {
            if(this.status == 200) { // nếu yêu cầu thành công
                myDiv.innerHTML = this.responseText; // Phản hồi nội dung theo dạng văn bản
                myBtn.innerHTML = "Load file success!";
            }else{
                myDiv.innerHTML = "Page not found!";    
            }
        }
    },1500);
}

</script>