Đã đăng vào thg 6 21, 2019 4:18 SA 0 phút đọc
Điều cực kỳ đáng ngạc nhiên với tôi là HTML chưa bao giờ có cách nào để include các tệp HTML khác. Một ví dụ kinh điển: include phần header & footer vào trong trang.
...
Your content here
...
Nhân tiện, đoạn code trên chỉ là giả tưởng. Tôi ước một ngày nó trở thành hiện thực. Vậy thì để giải quyết bài toán include HTML thì sẽ có các cách sau:
Sử dụng PHP
...
Your content here
...
Sử dụng Gulp
...
@@include['./header.html']
Content
@@include['./footer.html']
...
Gulp có rất nhiều processors có thể xử lý việc này. Một trong số đó là
gulp-file-include.
// Javascript
var fileinclude = require['gulp-file-include'],
gulp = require['gulp'];
gulp.task['fileinclude', function[] {
gulp.src[['index.html']]
.pipe[fileinclude[{
prefix: '@@',
basepath: '@file'
}]]
.pipe[gulp.dest['./']];
}];
Sử dụng Grunt
Plugin grunt-bake sẽ giúp bạn xử lý việc include HTML
Javascript
grunt.initConfig[{
bake: {
your_target: {
files: {
"dist/index.html": "app/index.html",
}
}
}
}];
HTML
...
Content
...
Sử dụng Pug
//pugjs.org/
...
body
include ./header.html"
p Content
include ./footer.html"
...
All rights reserved
answer
613
Theo tôi, giải pháp tốt nhất sử dụng jQuery:
a.html:
$[function[]{
$["#includedContent"].load["b.html"];
}];
b.html:
This is my include file
Phương pháp này là một giải pháp đơn giản và sạch sẽ cho
vấn đề của tôi.
.load[]Tài liệu jQuery ở đây .
613 hữu ích 5 bình luận chia sẻ
answer
131
Giải pháp của tôi tương tự như một trong những
lolo ở trên. Tuy nhiên, tôi chèn mã HTML qua document.write của JavaScript thay vì sử dụng jQuery:
a.html:
Put your HTML content before insertion of b.js.
...
...
And whatever content you want afterwards.
b.js:
document.write['\
\
Add your HTML code here
\
\
Notice however, that you have to escape LF'
s with a '\', just like\
demonstrated in this code listing.\
\
\
'];
Lý do khiến tôi không sử dụng jQuery là jQuery.js có kích thước ~ 90kb và tôi
muốn giữ lượng dữ liệu để tải càng nhỏ càng tốt.
Để có được tệp JavaScript thoát đúng mà không cần nhiều công việc, bạn có thể sử dụng lệnh sed sau:
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
Hoặc chỉ sử dụng tập lệnh bash tiện dụng sau được xuất bản dưới dạng Gist trên Github, tự động hóa tất cả các công việc cần thiết, chuyển đổi b.htmlthành b.js:
//gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Tín dụng cho Greg Minshall cho lệnh sed cải tiến cũng thoát khỏi dấu gạch chéo và dấu
ngoặc đơn, điều mà lệnh sed ban đầu của tôi không xem xét.
131 hữu ích 5 bình luận chia sẻ
answer
124
Mở rộng câu trả lời của lolo từ trên xuống, đây là một chút tự động hóa hơn nếu bạn phải bao gồm rất nhiều tệp:
$[function[]{
var includes = $['[data-include]'];
jQuery.each[includes, function[]{
var file = 'views/' + $[this].data['include'] + '.html';
$[this].load[file];
}];
}];
Và sau đó để bao gồm một cái gì đó trong html:
Mà
sẽ bao gồm các lượt xem tệp / header.html và lượt xem / footer.html
124 hữu ích 5 bình luận chia
sẻ
answer
80
Kiểm tra nhập HTML5 thông qua hướng dẫn Html5rocks và tại
dự án polymer
Ví dụ:
80 hữu ích
5 bình luận chia sẻ
answer
57
Ổ cắm không biết xấu hổ của một thư viện mà tôi đã viết giải quyết
này.
//github.com/LexmarkWeb/csi.js
Ở trên sẽ lấy nội dung /path/to/include.htmlvà thay thế divbằng nó.
57 hữu ích 5 bình luận chia sẻ
answer
44
Một phía máy chủ đơn giản bao gồm chỉ thị để bao gồm một tệp khác được tìm thấy trong cùng thư mục trông như thế này:
44 hữu ích 4 bình luận chia sẻ
answer
33
Một giải pháp rất cũ tôi đã đáp ứng nhu cầu của tôi hồi đó,
nhưng đây là cách thực hiện mã tuân thủ tiêu chuẩn:
backup content
33 hữu ích 3 bình luận chia sẻ
answer
29
Không cần kịch bản. Không cần phải làm bất kỳ công cụ ưa thích nào phía máy chủ [tho có lẽ sẽ là một lựa chọn tốt hơn]
Vì các trình duyệt cũ không hỗ trợ liền mạch, bạn nên thêm
một số css để sửa lỗi:
iframe[seamless] {
border: none;
}
Hãy nhớ rằng đối với các trình duyệt không hỗ trợ liền mạch, nếu bạn nhấp vào một liên kết trong iframe, nó sẽ làm cho khung đi đến url đó, chứ không phải toàn bộ cửa sổ. Một cách để khắc phục điều đó là có tất cả các liên kết target="_parent", tho hỗ trợ trình duyệt là "đủ tốt".
29 hữu ích 5 bình luận chia sẻ
answer
16
Cách khác, nếu bạn có quyền truy cập vào tệp .htaccess trên máy chủ của mình, bạn có thể thêm một lệnh đơn giản cho phép php được diễn giải trên các tệp kết thúc bằng phần mở rộng .html.
RemoveHandler .html
AddType application/x-httpd-php .php .html
Bây giờ
bạn có thể sử dụng tập lệnh php đơn giản để bao gồm các tệp khác, chẳng hạn như:
16 hữu ích 5 bình luận
chia sẻ
answer
13
Các công việc sau đây nếu nội dung html từ một số tệp cần được đưa vào: Chẳng hạn, dòng sau sẽ bao gồm nội dung của mảnh_to_include.html tại vị trí xảy ra định nghĩa ĐỐI
TƯỢNG.
...text before...
Warning: file_to_include.html could not be included.
...text after...
Tham khảo: //www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
13 hữu ích 3 bình luận chia sẻ
answer
8
Đây là những gì đã giúp tôi. Để thêm một khối mã html từ b.htmlđến a.html, điều này sẽ đi vào headthẻ của
a.html:
Sau đó, trong thẻ body, một container được tạo với một id duy nhất và một khối javascript để tải b.htmlvào container, như sau:
$[function[]{
$["#b-placeholder"].load["b.html"];
}];
8 hữu ích 2 bình luận chia sẻ
answer
8
Bạn có thể sử dụng một polyfill của Nhập khẩu HTML [
//www.html5rocks.com/en/tutorials/webcomponents/imports/ ] hoặc giải pháp đơn giản đó //github.com/dsheiko/html-import
Ví dụ: trên trang bạn nhập khối HTML như
thế:
Các khối có thể có nhập khẩu của riêng mình:
Nhà nhập khẩu thay thế chỉ thị bằng HTML được tải khá giống như SSI
Các chỉ thị này sẽ được cung cấp tự động ngay khi bạn tải JavaScript nhỏ này:
Nó sẽ xử lý việc nhập khi DOM sẵn sàng tự động. Ngoài ra, nó hiển thị một API mà bạn có thể sử dụng để chạy thủ công, để nhận nhật ký, v.v.
Thưởng thức :]
8 hữu ích 2 bình luận chia sẻ
answer
7
Tôi biết đây là một bài viết rất cũ, vì vậy một số phương pháp không có sẵn trước đó. Nhưng đây là cách làm rất đơn giản của tôi [dựa trên câu trả lời của Lolo].
Nó dựa vào các thuộc tính dữ
liệu HTML5 * và do đó rất chung chung là sử dụng hàm for-every của jQuery để lấy mọi "lớp-html" khớp với nhau và sử dụng thuộc tính 'nguồn dữ liệu' tương ứng của nó để tải nội dung:
$[function [] {
$[".load-html"].each[function [] {
$[this].load[this.dataset.source];
}];
}];
7 hữu ích
0 bình luận chia sẻ
answer
6
Để chèn nội dung của tệp được đặt tên:
6 hữu ích 1 bình luận chia sẻ
answer
6
Trong w3.js bao gồm các tác phẩm như thế này:
w3.includeHTML[];
Để biết mô tả thích hợp, hãy xem phần này:
//www.w3schools.com/howto/howto_html_include.asp
6 hữu ích 2 bình luận chia sẻ
answer
5
Câu trả lời của Athari [lần đầu tiên!] Là quá nhiều kết luận!
Rất tốt!
Nhưng nếu bạn muốn chuyển tên của trang để được đưa vào làm tham số URL , bài đăng này có một giải pháp rất hay được sử dụng kết hợp với:
//www.jquerybyexample.net/2012/06/get-url-parameter-USE-jquery.html
Vì vậy, nó trở thành một cái gì đó như thế này:
URL của bạn:
www.yoursite.com/a.html?p=b.html
Các a.html mã bây giờ trở thành:
function GetURLParameter[sParam]
{
var sPageURL = window.location.search.substring[1];
var sURLVariables = sPageURL.split['&'];
for [var i = 0; i