iframe

<iframe> (inline frame) нь нэг вэб хуудасны дотор өөр вэб хуудсыг шигтгэн харуулдаг элемент юм. YouTube видео, Google Maps, бусад платформын агуулгыг өөрийн хуудсандаа оруулахад хамгийн түгээмэл ашиглагддаг.

Үндсэн синтакс

<iframe
  src="https://www.example.com"
  width="800"
  height="450"
  title="Жишээ хуудас"
>
</iframe>

Гол attribute-ууд:

• src — харуулах хуудасны URL
• width / height — хэмжээ (px эсвэл %)
• title — accessibility-д зайлшгүй шаардлагатай; iframe-ийн агуулгыг тайлбарлана
• loading="lazy" — хуудасны дэлгэцэнд харагдах үед л ачаална (гүйцэтгэлд сайн)
• allowfullscreen — бүтэн дэлгэцийн горим зөвшөөрөх

YouTube видео суулгах

YouTube-ийн "Share → Embed" товчноос iframe кодыг авч болно. Жишээ:

<!-- YouTube embed — autoplay болон rel=0 параметрүүд -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID?rel=0"
  title="HTML сургалтын видео"
  allowfullscreen
  loading="lazy"
>
</iframe>

VIDEO_ID-г YouTube видеоны URL-аас авна. Жишээ нь https://youtu.be/dQw4w9WgXcQ хаягийн dQw4w9WgXcQ хэсэг.

Google Maps суулгах

Google Maps дээр байршил хайж "Share → Embed a map" дарахад iframe кодыг өгнө:

<!-- Google Maps байршил -->
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen
  loading="lazy"
  title="Байршлын газрын зураг"
>
</iframe>

Responsive iframe

Iframe-ийг бүх дэлгэцийн хэмжээнд зохицуулахын тулд wrapper div ашиглана:

<style>
  /* 16:9 харьцааны responsive iframe */
  .iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 = 9/16 × 100 */
    height: 0;
    overflow: hidden;
  }

  .iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="iframe-wrapper">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Хичээлийн видео"
    allowfullscreen
    loading="lazy"
  >
  </iframe>
</div>

Аюулгүй байдлын тухай

sandbox attribute нь iframe доторх агуулгын эрхийг хязгаарлана:

<!-- Хамгийн хязгаарлагдмал: script ажиллахгүй, form илгээхгүй -->
<iframe src="гадны-хуудас.html" sandbox></iframe>

<!-- Зарим эрхийг буцааж олгох -->
<iframe
  src="гадны-хуудас.html"
  sandbox="allow-scripts allow-same-origin"
>
</iframe>

Нийтлэг sandbox утгууд: allow-scripts (JavaScript зөвшөөрөх), allow-forms (form илгээх), allow-popups (шинэ цонх нээх), allow-same-origin (cookie, localStorage хандах).

referrerpolicy attribute нь iframe-рүү явах хүсэлтэд хэр их мэдээлэл дамжуулахыг тохируулна. Ихэнх тохиолдолд referrerpolicy="no-referrer" хангалттай.

Хэзээ iframe ашиглахгүй байх вэ?

Iframe нь дараах тохиолдолд тохиромжгүй:

• Өөрийн сайтын агуулга — iframe биш, component эсвэл энгийн HTML ашиглана
• SEO чухал агуулга — хайлтын систем iframe доторх агуулгыг муу индексэлдэг
• Аюулгүй байдлын мэдрэмтгий хэсэг — гадны сайтын iframe нь clickjacking халдлагад өртөж болно

Дараагийн хичээлд:

data-* attribute-уудыг судлана — HTML элементэд өгөгдөл хадгалж, JavaScript-ээр уншиж хэрхэн ашиглах талаар үзнэ.