HTML Iframe

iframe ကို Webpage တစ်ခုအတွင်းမှာ နောက်ထပ် Webpage ကို ဖေါ်ပြချင်တဲ့ အခါမျိုးတွေမှာ အသုံးပြုပါတယ်။

---

HTML iframe Syntax

<iframe> tag ကို html Document တစ်ခုကို အခြား html document ထဲမှာ ဖေါ်ပြလိုတဲ့ အခါမျိုးတွေမှာ အသုံးပြုရပါတယ်။

Syntax

1. <iframe src="url" title="Description"> </iframe> 

Tip :<iframe> ကိုသုံးတဲ့အခါမှာ title Attribute ကိုထည့်ပေးတာဟာ အလေ့အအကျင့်ကောင်းတစ်ခုပါ။ အကယ်၍ အကြောင်းတစ်ခုခုကြောင့် ကျွန်တော်တို့ ချိတ်ဆက်ခေါ်ယူထားတဲ့ Webpage က ရောက်မလာခဲ့ရင် အဲဒိ title ထဲက စာကိုပြပေးတဲ့အတွက် User တွေကို ဘာပြလိုတယ်ဆိုတာ သိသာစေမှာပါ။

---

Height and Width အသုံးပြုခြင်း

<iframe> မှာ height နှင့် width Attribute များကို frame ရဲ့ အမြင့်နှင့် အကျယ်များသတ်မှတ်ရန်အတွက် အသုံးပြုနိုင်ပါတယ်။

src ဆိုတာက Source ကိုအတိုကောက်ဆိုလိုတာဖြစ်ပြီး၊ src value မှာ file လမ်းကြောင်းတွေ ပေးရလေ့ရှိပါတယ်။ ဥပမာ - ဓါတ်ပုံလမ်းကြောင်း၊ .html လမ်းကြောင်း၊ .css လမ်းကြောင်း စသည်ဖြင့်။

height နှင့် width Attribuet များ၏ default Unite မှာ pixel ဖြစ်ပါတယ်။

Example Code

1. <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"> </iframe>

Try it Yourself!

ဒါမှမဟုတ် style Attribute သုံးပြီး CSS height နှင့် width properties များအသုံးပြုပြီးတော့လည်း အမြင့်နှင့် အကျယ်ကို သတ်မှတ်နိုင်ပါတယ်။

Example Code

1. <iframe src="demo_iframe.htm" style="height: 200px; width: 300px;" title="Iframe Example"> </iframe>

Try it Yourself!

---

Iframe Border

ပုံမှန်အားဖြင့်တော့ <iframe> မှာ ဘောင်တစ်ခုပါပြီးသားပါ။ အဲဒီဘောင်ကို ပြောင်းလဲဖို့အတွက်ကတော့ frameborder ဆိုတဲ့ Attribute ကိုအသုံးပြုလိုရပါတယ်။ frameborder နောက်က Value တွေကို နံပတ်များဖြင့်ပေးရတာဖြစ်ပါတယ်။ ဥပမာ - frameborder="0" ဆိုရင် ဘောင်မရှိတော့ဘူး။ ဘောင်မထားတော့ဘူးလို့ ဆိုလိုတာဖြစ်ပြီး၊ frameborder="1" ဆိုရင်တော့ ဘောင် 1px ပါမယ်လို့ ဆိုလိုတာပါ။

frameborder Attribute မှာ ဘောင်ရဲ့ အရွယ်အစားကိုသာ ပြင်လို့ရတဲ့အတွက် တကယ်တန်း Style တွေပြင်ကြတဲ့အခါမှာ သိပ်မသုံးပါဘူး။

အသုံးများတဲ့ပုံစံကတော့ style Attribute ထဲက border properties ဖြစ်ပါတယ်။

<iframe> ရဲ့ ဘောင်တွေကို ဖြုတ်ချင်တဲ့အခါ အောက်ပါအတိုင်းသုံးပါတယ်။

Example Code

1. <iframe src="demo_iframe.htm" style="border: none;" title="Iframe Example"> </iframe>

Try it Yourself!

CSS ကို အသုံးပြုပြီးတော့ ဘောင်ရဲ့ အရွယ်အစား၊ အ‌ရောင် နှင့် အခြားအရာများစွာကို အသေးစိတ်ပြင်လို့ရပါတယ်။

Example Code

1. <iframe src="demo_iframe.htm" style="border: 2px solid red" title="Iframe Example"> </iframe>

Try it Yourself!

---

Link target နှင့်တွဲပြီး အသုံးပြုခြင်း

ကျွန်တော်တို့ HTMl Link သင်ခန်းမှာတုန်းက target attribute အကြောင်းကို မှတ်မိကြလိမ့်မယ်လို့ထင်ပါတယ်။ ခုက <iframe> တစ်ကို target ထားတဲ့ link တစ်ခု ဘယ်လိုဖန်တီးမလဲဆိုတာကို ပြောပြမှာပါ။

Link ကိုနှိပ်လိုက်တာအခါမှာ မူရင်း frame ထဲမှာလဲ မပေါ်ဘူး၊ နောက် tab တစ်ခုလဲမဖွင့်ဘူး၊ သတ်မှတ်ထားတဲ့ <iframe> အတွင်းမှာသွားပွင့်စေချင်တာပါ။

ဒီလိုလုပ်ဖို့အတွက် က iframe မှာ name Attribute ကိုအရင်ပေးရပါတယ်။

ပြီးတဲ့အခါ link ရဲ့ target Attribute မှာ ခုဏက iframe ရဲ့ name ကိုထည့်ပေးရပါတယ်။

အောက်က ဥပမာမှာကြည့်ပါ။

Example Code

1. <iframe src="demo_frame.htm" name="iframe_a" title="Iframe Example"> </iframe>

2. <a href="https://www.w3schools.com" target="iframe_a"> W3Schools </a>

Try it Yourself!

---

Chapter Summary

• Webpage တစ်ခုပေါ်မှာ အခြား Webpage ကို ဖေါ်ပြဖို့အတွက် <iframe> ကိုသုံးကြပါတယ်။
• src Attribute က ဖေါ်ပြချင်တဲ့ webpage ရဲ့ url ကို သတ်မှတ်ပေးဖို့ဖြစ်တယ်။
• height and width Attribute တွေဟာ Frame ရဲ့အရွယ်အစားကို သတ်မှတ်ဖို့အတွက် အသုံးပြုပါတယ်။
• Frame ဘောင်ကို ပြင်ဆင်ဖို့အတွက် CSS ရဲ့ border properties ကိုအသုံးပြုနိုင်ပါတယ်။