Đô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 JavaScript
Click to load content from home.html file
The content from Home Page will be displayed here
0 để tải tệp HTML bên ngoài
Click to load content from home.html file
The content from Home Page will be displayed here
Mã HTML [______31]
Home Page
This content is loaded from the home page
Mã HTML [______10]
Click to load content from home.html file
The content from Home Page will be displayed here
Mã CSS [______11]
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
function loadHTML[]{
fetch['home.html']
.then[response=> response.text[]]
.then[text=> document.getElementById['homePage'].innerHTML = text];
}
đầu ra
Hàm
Click to load content from home.html file
The content from Home Page will be displayed here
Chúng tôi sử dụng hàm
Click to load content from home.html file
The content from Home Page will be displayed here
Click to load content from home.html file
The content from Home Page will be displayed here
Click to load content from home.html file
The content from Home Page will be displayed here
Click to load content from home.html file
The content from Home Page will be displayed here
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
Click to load content from home.html file
The content from Home Page will be displayed here
Click to load content from home.html file
The content from Home Page will be displayed here
Click to load content from home.html file
The content from Home Page will be displayed here
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;
}
Click to load content from home.html file
The content from Home Page will be displayed here
Sau đó, chúng tôi nhận được 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;
}
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;
}
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;
}
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;
}
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
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ã HTML [______31]
Home Page
This content is loaded from the home page
Mã HTML [______10]
Click to load content from home.html file
The content from Home Page will be displayed here
Mã CSS [______11]
Click to load content from home.html file
The content from Home Page will be displayed here
Mã JavaScript [
Click to load content from home.html file
The content from Home Page will be displayed here
Click to load content from home.html file
The content from Home Page will be displayed here
đầu ra
Phương pháp
function loadHTML[]{
fetch['home.html']
.then[response=> response.text[]]
.then[text=> document.getElementById['homePage'].innerHTML = text];
}
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;
}
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];
}
Click to load content from home.html file
The content from Home Page will be displayed here
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;
}
Làm cách nào để nhập tệp HTML trong tệp JavaScript?
Cách thực hiện - Bao gồm HTML .
HTML. Lưu HTML bạn muốn đưa vào một. tệp html. Nội dung. html. .
Bao gồm HTML. Việc bao gồm HTML được thực hiện bằng cách sử dụng thuộc tính w3-include-html. Ví dụ. .
Thêm JavaScript. HTML bao gồm được thực hiện bởi JavaScript. Ví dụ. .
Bao gồm nhiều đoạn mã HTML. Bạn có thể bao gồm bất kỳ số lượng đoạn mã HTML nào
Làm cách nào để truy cập tệp HTML trong JavaScript?
Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script với thuộc tính src . Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn. Thẻ tập lệnh này phải được bao gồm giữa các thẻ
Làm cách nào để liên kết HTML với JavaScript?
Chúng ta có thể liên kết JavaScript với HTML bằng cách thêm tất cả mã JavaScript bên trong tệp HTML . Chúng tôi đạt được điều này bằng cách sử dụng thẻ script đã được giải thích trước đó. Chúng ta có thể đặt thẻ ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân.
Làm cách nào để gọi trang HTML trong JavaScript?
Step 1: Firstly, we have to type the script tag between the starting and closing of tag just after the title tag. And then, type the JavaScript function. Step 2: After then, we have to call the javaScript function in the Html code for displaying the information or data on the web page.