W3.JS HTML รวม
รวมไฟล์ HTML:
w3.includeHTML()
HTML
บันทึก HTML ที่คุณต้องการรวมไว้ในไฟล์ .html:
content.html
<a href="https://www.w3schools.com/html/">HTML</a><br>
<a
href="https://www.w3schools.com/css/">CSS</a><br>
<a
href="https://www.w3schools.com/bootstrap/">Bootstrap</a><br>
<a
href="https://www.w3schools.com/js/">JavaScript</a><br>
<a
href="https://www.w3schools.com/sql/">SQL</a><br>
<a
href="https://www.w3schools.com/php/">PHP</a><br>
<a
href="https://www.w3schools.com/w3css/">W3.CSS</a><br>
รวม HTML
การรวม HTML ทำได้โดยใช้แอตทริบิวต์w3-include-html :
ตัวอย่าง
<div w3-include-html="content.html"></div>
เพิ่ม JavaScript
การรวม HTML ทำได้โดย JavaScript
ตรวจสอบให้แน่ใจว่าหน้าของคุณ โหลด w3.jsและเรียก w3.includeHTML() :
ตัวอย่าง
<script>
w3.includeHTML();
</script>
ตัวอย่างเต็ม
ตัวอย่าง
<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
รวมตัวอย่าง HTML จำนวนมาก
คุณสามารถใส่ข้อมูลโค้ด HTML จำนวนเท่าใดก็ได้:
ตัวอย่าง
<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
<html>
การเพิ่มฟังก์ชันโทรกลับ
เมื่อคุณรวมข้อมูลโค้ด HTML ในหน้าเว็บ คุณต้องรักษาความปลอดภัยว่าฟังก์ชันอื่นๆ ที่ขึ้นอยู่กับ HTML ที่รวมไว้จะไม่ทำงานก่อนที่จะรวม HTML ไว้อย่างถูกต้อง
วิธีที่ง่ายที่สุดในการ "ระงับ" รหัสคือการวางไว้ในฟังก์ชันเรียกกลับ
ฟังก์ชันเรียกกลับสามารถเพิ่มเป็นอาร์กิวเมนต์ใน w3.includeHTML():
ตัวอย่าง
<script>
w3.includeHTML(myCallback);
function myCallback() {
// code that has to wait goes here
}
</script>
คุณจะพบตัวอย่างการโทรกลับในบทถัดไปของบทช่วยสอนนี้