Nhưng file html vào html
Đã đă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.
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
Sử dụng Gulp
Gulp có rất nhiều processors có thể xử lý việc này. Một trong số đó là gulp-file-include.
Sử dụng GruntPlugin grunt-bake sẽ giúp bạn xử lý việc include HTML Javascript
HTML
Sử dụng Pughttps://pugjs.org/
All rights reserved answer 613 Theo tôi, giải pháp tốt nhất sử dụng jQuery:
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.
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:
b.js:
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:
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 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:
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. https://github.com/LexmarkWeb/csi.js
Ở trên sẽ lấy nội dung 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:
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:
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 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.
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.
Tham khảo: http://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ừ
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
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 ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ) hoặc giải pháp đơn giản đó https://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:
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:
Để biết mô tả thích hợp, hãy xem phần này: https://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: http://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:
Các a.html mã bây giờ trở thành:
Nó làm việc rất tốt cho tôi! Tôi hy vọng đã giúp :) 5 hữu ích 0 bình luận chia sẻ answer 5 Hầu hết các giải pháp hoạt động nhưng chúng có vấn đề với jquery : Vấn đề là Tôi viết mã dưới đây, trong giải pháp của tôi, bạn có thể truy cập vào nội dung được bao gồm trong (Khóa đang tải nội dung bao gồm đồng bộ). chỉ số.htm :
bao gồm.inc :
jquery bao gồm plugin trên github 5 hữu ích 3 bình luận chia sẻ answer 4 html5rocks.com có một hướng dẫn rất tốt về công cụ này và điều này có thể hơi muộn, nhưng bản thân tôi không biết điều này tồn tại. w3schools cũng có một cách để làm điều này bằng thư viện mới của họ được gọi là w3.js. Vấn đề là, điều này đòi hỏi phải sử dụng máy chủ web và đối tượng HTTPRequest. Bạn thực sự không thể tải chúng cục bộ và kiểm tra chúng trên máy của bạn. Mặc dù vậy, những gì bạn có thể làm là sử dụng các polyfill được cung cấp trên liên kết html5rocks ở đầu hoặc làm theo hướng dẫn của họ. Với một chút phép thuật JS, bạn có thể làm một cái gì đó như thế này:
Điều này sẽ làm cho liên kết (Có thể thay đổi thành thành phần liên kết mong muốn nếu đã được đặt), đặt nhập (trừ khi bạn đã có nó), sau đó nối thêm nó. Sau đó, nó sẽ lấy tệp đó và phân tích tệp trong HTML và sau đó nối nó vào phần tử mong muốn dưới một div. Tất cả điều này có thể được thay đổi để phù hợp với nhu cầu của bạn từ yếu tố nối thêm vào liên kết bạn đang sử dụng. Tôi hy vọng điều này có ích, bây giờ nó có thể không liên quan nếu các cách mới hơn, nhanh hơn đã xuất hiện mà không sử dụng các thư viện và khung như jQuery hoặc W3.js. CẬP NHẬT: Điều này sẽ đưa ra một lỗi nói rằng nhập nội bộ đã bị chặn bởi chính sách CORS. Có thể cần truy cập vào web sâu để có thể sử dụng điều này vì các thuộc tính của web sâu. (Có nghĩa là không sử dụng thực tế) 4 hữu ích 0 bình luận chia sẻ answer 3 Hiện tại không có giải pháp HTML trực tiếp cho nhiệm vụ. Ngay cả Nhập khẩu
HTML ( dự thảo vĩnh viễn ) sẽ không thực hiện được điều này, bởi vì Nhập! = Bao gồm và một số phép thuật JS sẽ được yêu cầu bằng mọi cách. Chỉ cần đặt trong của bạn
Đó là 3 hữu ích 0 bình luận chia sẻ answer 3 Bạn có thể làm điều đó với thư viện jQuery của jQuery như thế này: HTML:
JS:
Xin lưu ý rằng
Ngoài ra, xin lưu ý rằng nếu bạn tải nội dung của mình bằng JavaScript, Google sẽ không thể lập chỉ mục cho nó để nó không chính xác là một phương pháp tốt cho lý do SEO. 3 hữu ích 0 bình luận chia sẻ answer 2 Đây là một bài viết tuyệt vời , Bạn có thể triển khai thư viện chung và chỉ cần sử dụng mã bên dưới để nhập bất kỳ tệp HTML nào trong một dòng.
Bạn cũng có thể dùng thử Google Polymer 2 hữu ích 1 bình luận chia sẻ answer 2 Đây là cách tiếp cận của tôi bằng cách sử dụng hàm Fetch API và async
2 hữu ích 0 bình luận chia sẻ answer 1 Dựa trên câu trả lời của https://stackoverflow.com/a/31837264/4360308 Tôi đã triển khai chức năng này với Nodejs (+ express + cheio) như sau: HTML (index.html)
JS
chắp thêm -> bao gồm nội dung vào div thay thế -> thay thế div bạn có thể dễ dàng thêm nhiều hành vi theo cùng một thiết kế 1 hữu ích 0 bình luận chia sẻ answer 1 Sử dụng backticks ES6 ``: mẫu chữ !
Bằng cách này, chúng tôi có thể bao gồm html mà không cần trích dẫn mã hóa, bao gồm các biến từ DOM, v.v. Nó là một công cụ tạo khuôn mẫu mạnh mẽ, chúng ta có thể sử dụng các tệp js riêng biệt và sử dụng các sự kiện để tải nội dung tại chỗ hoặc thậm chí tách mọi thứ trong khối và gọi theo yêu cầu:
https://caniuse.com/#feat=template-literals 1 hữu ích 0 bình luận chia sẻ answer 0 Tôi đến chủ đề này để tìm kiếm một cái gì đó tương tự, nhưng một chút khác biệt với vấn đề được đặt ra bởi lolo. Tôi muốn xây dựng một trang HTML chứa một menu chữ cái liên kết đến các trang khác và mỗi trang khác có thể tồn tại hoặc không tồn tại, và thứ tự chúng được tạo ra có thể không theo thứ tự chữ cái (thậm chí là số). Ngoài ra, giống như Tafkadasoh, tôi không muốn làm mờ trang web bằng jQuery. Sau khi nghiên cứu vấn đề và thử nghiệm trong vài giờ, đây là những gì làm việc cho tôi, với những nhận xét liên quan được thêm vào:
0 hữu ích 0 bình luận chia sẻ answer 0 PHP là một ngôn ngữ kịch bản cấp máy chủ. Nó có thể làm nhiều việc, nhưng một cách sử dụng phổ biến là bao gồm các tài liệu HTML bên trong các trang của bạn, giống như SSI. Giống như SSI, đây là một công nghệ cấp máy chủ. Nếu bạn không chắc chắn nếu bạn có chức năng PHP trên trang web của bạn, hãy liên hệ với nhà cung cấp dịch vụ lưu trữ của bạn. Đây là một đoạn mã PHP đơn giản mà bạn có thể sử dụng để bao gồm một đoạn mã HTML trên bất kỳ trang web hỗ trợ PHP nào: Lưu HTML cho các thành phần phổ biến của trang web của bạn để tách các tệp. Ví dụ: phần điều hướng của bạn có thể được lưu dưới dạng navigation.html hoặc navigation.php. Sử dụng mã PHP sau để đưa HTML đó vào mỗi trang.
Sử dụng cùng mã đó trên mỗi trang mà bạn muốn bao gồm tệp. Đảm bảo thay đổi tên tệp higlighted thành tên và đường dẫn đến tệp đính kèm của bạn. 0 hữu ích 0 bình luận chia sẻ answer 0 Nếu bạn sử dụng một số khung như django / bootle, họ thường gửi một số công cụ mẫu. Giả sử bạn sử dụng chai và công cụ mẫu mặc định là Công cụ SimpleTemplate . Và dưới đây là tệp html thuần túy
Bạn có thể bao gồm footer.tpl trong tệp chính của mình, như:
Bên cạnh đó, bạn cũng có thể truyền tham số cho dashborard.tpl của mình. 0 hữu ích 0 bình luận chia sẻ answer 0 Một cách tiếp cận khác sử dụng API tìm nạp với Promise
|