Tôi cố gắng làm rõ những gì tôi muốn làm. Tôi có một số tệp HTML và mỗi tệp tôi muốn hiển thị một phần trong một tệp HTML khác, ví dụ: header.html và footer.html để quan sát khái niệm DRY.Hiển thị một phần trong HTML/JavaScript
file HTML sẽ trông như thế này:
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
Làm thế nào tôi có thể làm điều đó?
Here's a link (cái đầu tiên từ Google tôi có thể thêm) giải thích cách thực hiện điều này bằng nhiều ngôn ngữ khác nhau.
Cũng lưu ý rằng một số IDE đảm nhiệm việc này cho bạn. Dreamweaver là một ví dụ; trong ASP.NET có các trang chính; và vân vân.
PHP:
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>
ASP:
<!--#include file="path to file/include-file.html"-->
JS:
JavaScript là một cách khác để bao gồm HTML trong trang của trang web của bạn . Điều này có lợi thế là không yêu cầu lập trình cấp máy chủ. Nhưng nó phức tạp hơn một chút so với phương pháp bao gồm các phương pháp bao gồm một mức độ máy chủ .
Lưu HTML cho các thành phần phổ biến của trang web vào JavaScript tệp. Bất kỳ HTML nào được viết trong tệp này, phải được in trên màn hình bằng hàm document.write.
Sử dụng thẻ tập lệnh để bao gồm tệp JavaScript trên các trang của bạn.
< script type = "text/javascript" src = "đường dẫn đến tập tin/include-file.js">- Sử dụng cùng mã trên mỗi trang mà bạn muốn bao gồm các tập tin.
XIN LƯU Ý rằng phiên bản JS là KHÔNG lý tưởng.
1. JS có thể bị tắt hoặc không khả dụng trong trình duyệt.
2. Trang sẽ không được hiển thị/tải cùng một lúc.
Ngoài ra, tôi không nghĩ DRY thực sự được tính cho điều này. Hãy xem xét sử dụng một IDE sẽ tạo ra các mẫu trang cho bạn (ví dụ như Dreamweaver chẳng hạn).
Nếu bạn đủ dũng cảm (và một chút phong cách cũ) và bạn không thể sử dụng bất kỳ ở trên, xem xét sử dụng một khung nội tuyến cho nội dung của bạn:
<html>
<body>
<div>my header</div>
<iframe src="mycontent.html" />
<div>my fooder</div>
</body>
</html>
SỰ TỪ BỎ
tôi sẽ thay vì cắt bỏ tay của riêng tôi hơn là thực hiện phương pháp iframe hoặc JS.Cân nhắc kỹ lưỡng xem bạn có thực sự là NEED để làm điều này không.
Anh ấy đang cố gắng đưa tệp HTML vào tệp HTML, bạn sử dụng php như thế nào trên một tệp mở rộng .html? – DannyG
@DannyG Câu trả lời của tôi cho thấy làm thế nào điều này có thể đạt được trong một số công nghệ. Trong khi tôi không khuyên bạn nên nó, nếu OP muốn làm điều này với các tập tin HTML chỉ sau đó các tùy chọn là JS hoặc IFRAME như đã lưu ý trong bài viết của tôi. Trích dẫn từ phần JS: "không yêu cầu lập trình cấp máy chủ" –
@DannyG JS cũng có thể được sử dụng để yêu cầu XHR kéo nội dung vào. –
Nếu bạn đang sử dụng lập trình phía máy chủ, bạn có thể sử dụng phía máy chủ bao gồm khác nếu tệp lưu trữ của bạn là tệp HTML thì bạn có thể sử dụng thẻ html SCRIPT để bao gồm tệp header.html và footer.html. Mặc dù, tôi không chắc chắn về những gì bạn thực sự có nghĩa là bằng cách hiển thị một phần tập tin HTML?
Tôi không sử dụng bất kỳ ngôn ngữ phía máy chủ nào. Chỉ JavaScript, HTML và jQuery. –
Trong trường hợp đó, bạn có thể sử dụng thẻ SCRIPT để bao gồm tệp HTML với thuộc tính src có URL của tệp HTML. Điều được đăng bởi flem là rất hữu ích. – Shant
Nếu bạn chỉ sử dụng HTML thuần túy và Javascript, bạn có thể bao gồm jQuery và sử dụng yêu cầu AJAX để tải tranh chấp của một trang HTML khác trong trang chính của bạn.
Có một cái nhìn tại jQuery 'load()' chức năng ở đây:
Giả sử bạn có html sau:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
sử dụng của bạn sẽ giống như thế này:
$('#header').load('header.html');
$('#footer').load('footer.html');
Điều này gây ra lỗi yêu cầu nguồn gốc cho tôi: -/ – ajbraus
Điều này sẽ thực hiện nếu bạn đang cố gắng tải nội dung từ một miền khác (trừ khi họ đã bật CORS) – dougajmcdonald
... hoặc nếu bạn đang chạy tệp này từ tệp html cục bộ . – marsze
Nếu bạn đang tìm kiếm một phía khách hàng chỉ để lution là html/js chỉ bạn nên có một cái nhìn tại AngularJS và cú pháp của nó ngInclude.
cảm ơn Christoph! "ng-include src" thật tuyệt, có vẻ như fragment.js thực hiện công việc tương tự, nhưng tăng lỗi .... – dfang
Bạn có muốn đưa nội dung của một tệp html này vào tệp khác không? – starbeamrainbowlabs
@starbeamrainbowlabs: Chính xác, Có. –
Bạn có thể sử dụng ngôn ngữ lập trình PHP hoặc ngôn ngữ lập trình phía máy chủ khác không, hoặc nó có phải là tất cả phía máy khách không? – starbeamrainbowlabs