JavaScript đọc tệp HTML thành chuỗi

Đôi khi, chúng ta phải tải một tệp HTML bên ngoài vào một tệp HTML khác bằng JavaScript hoặc jQuery, tùy thuộc vào yêu cầu của dự án. Hướng dẫn này minh họa cách tải tệp HTML bên ngoài bằng JavaScript và jQuery

Sử dụng phương pháp fetch() JavaScript để tải tệp HTML bên ngoài

Mã HTML (______31_______)

	
		Home Page
	
	
		
This content is loaded from the home page
	

Mã HTML (______1_______0)

	
		
		
		
	
	
		
            Click to load content from home.html file
        
		

	 		
The content from Home Page will be displayed here
		

	

Mã CSS (_______1_______1)

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 5px;
    padding: 2px 20px;
    cursor: pointer;
}

button{
    margin: 5px;
    padding: 2px 20px;
}

p{
    font-size: 14px;
}

Mã JavaScript (

	
		
		
		
	
	
		
            Click to load content from home.html file
        
		

	 		
The content from Home Page will be displayed here
		

2)

function loadHTML(){
  fetch('home.html')
  .then(response=> response.text())
  .then(text=> document.getElementById('homePage').innerHTML = text);
}

đầu ra

Hàm fetch() yêu cầu máy chủ tải dữ liệu trên các trang web khác nhau

Chúng tôi sử dụng chức năng fetch() để tìm nạp tệp home.html từ localhost. Phương thức fetch() trả về một

	
		
		
		
	
	
		
            Click to load content from home.html file
        
		

	 		
The content from Home Page will be displayed here
		

	

7

Hơn nữa, phương thức

	
		
		
		
	
	
		
            Click to load content from home.html file
        
		

	 		
The content from Home Page will be displayed here
		

	

9 của giao diện

	
		
		
		
	
	
		
            Click to load content from home.html file
        
		

	 		
The content from Home Page will be displayed here
		

8 được sử dụng, phương thức này chấp nhận luồng

	
		
		
		
	
	
		
            Click to load content from home.html file
        
		

	 		
The content from Home Page will be displayed here
		

	

8, đọc nó và trả về một

	
		
		
		
	
	
		
            Click to load content from home.html file
        
		

	 		
The content from Home Page will be displayed here
		

	

7, phương thức này giải quyết bằng phương thức

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 5px;
    padding: 2px 20px;
    cursor: pointer;
}

button{
    margin: 5px;
    padding: 2px 20px;
}

p{
    font-size: 14px;
}

2. Hãy nhớ rằng,

	
		
		
		
	
	
		
            Click to load content from home.html file
        
		

	 		
The content from Home Page will be displayed here
		

	

8 được giải mã bằng cách sử dụng UTF-8

Sau đó, chúng ta lấy phần tử có id là

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 5px;
    padding: 2px 20px;
    cursor: pointer;
}

button{
    margin: 5px;
    padding: 2px 20px;
}

p{
    font-size: 14px;
}

4 bằng cách sử dụng phương thức

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 5px;
    padding: 2px 20px;
    cursor: pointer;
}

button{
    margin: 5px;
    padding: 2px 20px;
}

p{
    font-size: 14px;
}

5 và thay thế HTML bên trong của nó thông qua thuộc tính

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 5px;
    padding: 2px 20px;
    cursor: pointer;
}

button{
    margin: 5px;
    padding: 2px 20px;
}

p{
    font-size: 14px;
}

6 bằng thuộc tính

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 5px;
    padding: 2px 20px;
    cursor: pointer;
}

button{
    margin: 5px;
    padding: 2px 20px;
}

p{
    font-size: 14px;
}

7

Sử dụng phương pháp jQuery div{ border: 2px solid rgb(255, 0, 0); width: fit-content; margin: 5px; padding: 2px 20px; cursor: pointer; } button{ margin: 5px; padding: 2px 20px; } p{ font-size: 14px; } 8 để tải tệp HTML bên ngoài

Mã HTML (______31_______)

	
		Home Page
	
	
		
This content is loaded from the home page
	

Mã HTML (______1_______0)

	
		
		
		
	
	
		

			Home Page
			
Click to load content from home.html file
		

	

Mã CSS (_______1_______1)

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 20px auto;
    padding: 2px 20px;
    cursor: pointer;
}

p{
    font-size: 14px;
}

Mã JavaScript (

	
		
		
		
	
	
		
            Click to load content from home.html file
        
		

	 		
The content from Home Page will be displayed here
		

	

2)

$(document).ready(function () {
  $('#homePage').click(function () {
          $(this).load('home.html');
   });
});

đầu ra

Phương pháp

function loadHTML(){
  fetch('home.html')
  .then(response=> response.text())
  .then(text=> document.getElementById('homePage').innerHTML = text);
}

3 kiểm tra xem tệp đã hoàn toàn sẵn sàng hay chưa. Sự kiện này chỉ xảy ra khi Mô hình đối tượng tài liệu đã được tải đầy đủ

Phương thức

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 5px;
    padding: 2px 20px;
    cursor: pointer;
}

button{
    margin: 5px;
    padding: 2px 20px;
}

p{
    font-size: 14px;
}

8 tải thông tin (dữ liệu) từ máy chủ và lấy dữ liệu do máy chủ trả về vào phần tử được chỉ định

Chúng tôi sử dụng phương pháp

function loadHTML(){
  fetch('home.html')
  .then(response=> response.text())
  .then(text=> document.getElementById('homePage').innerHTML = text);
}

3 để đảm bảo rằng DOM hoàn toàn sẵn sàng trước các hoạt động tiếp theo. Tệp home.html sẽ được tải bằng phương pháp

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 5px;
    padding: 2px 20px;
    cursor: pointer;
}

button{
    margin: 5px;
    padding: 2px 20px;
}

p{
    font-size: 14px;
}

8

Làm cách nào để chuyển đổi tệp HTML thành chuỗi trong JavaScript?

Làm cách nào để đọc dữ liệu từ tệp HTML trong JavaScript?

Làm cách nào để chuyển đổi văn bản HTML thành văn bản bình thường trong JavaScript?

Làm cách nào để lấy toàn bộ phần tử HTML trong JavaScript?