Iframe

Iframe (Inline Frame) គឺ​ជា​ធាតុ HTML ដែល​អនុញ្ញាត​ឲ្យ​យើង​បង្ហាញ​ទំព័រ​គេហទំព័រ​មួយ​ផ្សេង​នៅ​ក្នុង​ទំព័រ​បច្ចុប្បន្ន។ An iframe is like a window to another webpage embedded within your page.

Iframe ត្រូវ​បាន​ប្រើ​យ៉ាង​ទូលំទូលាយ​សម្រាប់​បង្កប់ YouTube videos, Google Maps, និង​មាតិកា​ពី​គេហទំព័រ​ផ្សេង​ទៀត។

---

១. បង្កើត Iframe មូលដ្ឋាន

<iframe> ប្រើ​សំរាប់​បង្ហាញ​ទំព័រ​មួយ​ផ្សេង​លើ​ទំព័រ​បច្ចុប្បន្ន ។ src attribute ប្រើ​សំរាប់​កំណត់​ទីតាំង​នៃ​ទំព័រ​ដែល​ត្រូវ​បង្ហាញ ។ ពាក្យពេញ​នៃ src គឺ source (ប្រភព) ។ តម្លៃ​នៃ src attribute គឺ​ជា URL នៃ​ទំព័រ​ដែល​យើង​ចង់​បង្ហាញ ។

រចនាសម្ព័ន្ធ Basic:

សំគាល់: គេហទំព័រ​មួយ​ចំនួន​ត្រូវ​បាន​កំណត់​មិន​ឲ្យ​ដំណើរការ​លើ <iframe> ដោយ​សារ​តែ​មូលហេតុ​សន្តិសុខ (security reasons) ។ នេះ​ត្រូវ​បាន​គ្រប់គ្រង​ដោយ X-Frame-Options header។

---

២. កំណត់​ទំហំ Iframe

ដើម្បី​កំណត់​ទំហំ​ទៅ​ឲ្យ iframe អ្នក​អាច​ប្រើ attributes ដូច​ខាង​ក្រោម:

• width - កំណត់​ប្រវែង​ផ្ដេក (horizontal width)
• height - កំណត់​ប្រវែង​បញ្ឈរ (vertical height)

ឧទាហរណ៍​ប្រើ Pixels:

ខ្នាត​នៃ​តម្លៃ​នៃ attribute ទាំង២​ខាងលើ គិត​ជា pixel ។

ឧទាហរណ៍​ប្រើ Percentage:

ឧទាហរណ៍​ប្រើ CSS:

យើង​នឹង​សិក្សា​ស៊ីជម្រៅ​ទាក់ទង​ទៅ​នឹង​ខ្នាត​ប្រវែង នៅ​ក្នុង​មេរៀន CSS ។

---

៣. Iframe Attributes សំខាន់ៗ

border (ស៊ុម):

តាម​លំនាំដើម iframe មាន​ស៊ុម។ អ្នក​អាច​លុប​ស៊ុម​ដោយ​ប្រើ CSS:

name Attribute:

name attribute ប្រើ​សម្រាប់​កំណត់​ឈ្មោះ​ទៅ​ឲ្យ iframe ដើម្បី​អាច​ប្រើ​ជាមួយ​តំណភ្ជាប់។

title Attribute (សម្រាប់ Accessibility):

វា​សំខាន់​ណាស់​ក្នុង​ការ​បន្ថែម title attribute សម្រាប់ screen readers:

loading Attribute (Lazy Loading):

---

៤. តំណ​ភ្ជាប់​បង្ហាញ​នៅ​ក្នុង Iframe

នៅ​ក្នុង <a> កាលណា target attribute មាន​តម្លៃ​ជា​ឈ្មោះ​នៃ iframe វានឹង​បង្ហាញ​តំណ​ភ្ជាប់​នោះ​នៅ​ក្នុង iframe មួយ​នោះ ។

ឧទាហរណ៍ Basic:

ឧទាហរណ៍​ជា​មួយ​តំណ​ច្រើន:

---

៥. ការ​បង្កប់ YouTube Videos

នេះ​ជា​ការ​ប្រើប្រាស់ iframe ទូទៅ​បំផុត - ការ​បង្កប់​វីដេអូ YouTube:

របៀប​ទទួល​បាន Embed Code:

1. ចូល​ទៅ​កាន់ YouTube video
2. ចុច "Share" button
3. ចុច "Embed"
4. ចម្លង iframe code

ឧទាហរណ៍:

Responsive YouTube Iframe:

---

៦. ការ​បង្កប់ Google Maps

Iframe ក៏​ត្រូវ​បាន​ប្រើ​ដើម្បី​បង្កប់ Google Maps:

របៀប​ទទួល​បាន Embed Code:

1. ចូល​ទៅ Google Maps
2. ស្វែងរក​ទីតាំង
3. ចុច "Share"
4. ជ្រើសរើស "Embed a map"
5. ចម្លង HTML code

ឧទាហរណ៍:

---

៧. Sandbox Attribute (សុវត្ថិភាព)

sandbox attribute បន្ថែម​កម្រិត​សន្តិសុខ​បន្ថែម​ទៅ​លើ iframe content:

Sandbox Values សំខាន់ៗ:

• allow-scripts - អនុញ្ញាត​ឲ្យ​ដំណើរការ JavaScript
• allow-forms - អនុញ្ញាត​ឲ្យ​ប្រើ forms
• allow-popups - អនុញ្ញាត popups
• allow-same-origin - អនុញ្ញាត same-origin requests

---

៨. ឧទាហរណ៍​ការ​ប្រើប្រាស់​ជាក់​ស្តែង

Simple Document Viewer:

Embedded Form:

Social Media Embed:

---

៩. គុណវិបត្តិ​និង​ការ​ប្រើប្រាស់​ត្រឹមត្រូវ

គុណសម្បត្តិ:

• បង្កប់​មាតិកា​ពី​គេហទំព័រ​ផ្សេង​បាន​យ៉ាង​ងាយស្រួល
• មិន​ចាំបាច់​ធ្វើ​ការ​ផ្ទុក​មាតិកា​ទាំង​អស់​ទៅ server ផ្ទាល់​ខ្លួន
• ល្អ​សម្រាប់​បង្កប់ videos, maps, forms
• កម្រិត​សន្តិសុខ​ដោយ sandbox attribute

គុណវិបត្តិ:

• អាច​ធ្វើ​ឲ្យ​ទំព័រ​យឺត (slow page loading)
• មិន​ល្អ​សម្រាប់ SEO
• អាច​មាន​បញ្ហា​សន្តិសុខ​ប្រសិនបើ​មិន​ប្រើ​ត្រឹមត្រូវ
• មិន responsive តាម​លំនាំដើម
• មាន​គេហទំព័រ​មួយ​ចំនួន​មិន​អនុញ្ញាត​ឲ្យ​បង្កប់

ការ​ប្រើប្រាស់​ត្រឹមត្រូវ:

• បន្ថែម title attribute ជា​និច្ច
• ប្រើ loading="lazy" សម្រាប់​ performance
• ពិចារណា​ប្រើ sandbox attribute សម្រាប់​សន្តិសុខ
• ធ្វើ​ឲ្យ responsive ដោយ CSS
• មិន​គួរ​ប្រើ​ច្រើន​ពេក​ក្នុង​ទំព័រ​តែ​មួយ

សំគាល់: Iframes គួរ​ប្រើ​ប្រកប​ដោយ​ការ​ប្រុងប្រយ័ត្ន ព្រោះ​វា​អាច​ប៉ះពាល់​ដល់ performance និង security នៃ​គេហទំព័រ។