HTML <iframe> ടാഗ് എന്താണ്?
HTML <iframe> (inline frame) ടാഗ് ഉപയോഗിച്ച് ഒരു വെബ്ബ് പേജിനുള്ളിൽ മറ്റൊരു വെബ്ബ് പേജ്, ഡോക്യുമെന്റ്, അല്ലെങ്കിൽ വീഡിയോ ഉൾപ്പെടുത്താം. <iframe> ആധുനിക വെബ് ഡിസൈനിംഗ് മാർഗങ്ങളിൽ മറ്റൊരു വെബ്ബ് സൈറ്റിന്റെ ഉള്ളടക്കം സമാനമായ രീതിയിൽ പ്രദർശിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു.
HTML <iframe> ടാഗിന്റെ ഘടന:
<iframe src="https://example.com" width="600" height="400"></iframe>
Example:
<iframe src="https://www.wikipedia.org" width="800" height="600"></iframe>
ഇവിടെ, “https://www.wikipedia.org” എന്ന വെബ്സൈറ്റ് നിങ്ങളുടെ പേജിനുള്ളിൽ തന്നെ പ്രദർശിപ്പിക്കും.
iframe Attributes:
- src: ലിങ്ക് ചെയ്യേണ്ട പേജിന്റെ URL നിശ്ചയിക്കുന്നു. ഇത്
<iframe>-ന്റെ പ്രധാന ആട്രിബ്യൂട്ട് ആണ്.htmlCopy code<iframe src="https://example.com"></iframe> - width and height: iframe-ന്റെ വീതിയും ഉയരവും നിശ്ചയിക്കുന്നു.htmlCopy code
<iframe src="https://example.com" width="800" height="600"></iframe> - frameborder: iframe-ന്റെ ചുറ്റുമുള്ള ബോർഡർ കാണിക്കേണ്ടതോ അല്ലയോ എന്ന് നിർണ്ണയിക്കുന്നു. 0 ആയി സജ്ജീകരിച്ചാൽ ബോർഡർ കാണിക്കില്ല.htmlCopy code
<iframe src="https://example.com" frameborder="0"></iframe> - scrolling: iframe-ന്റെ ഉള്ളടക്കം വലിയതായാൽ സ്ക്രോൾബാർ പ്രദർശിപ്പിക്കേണ്ടതാണോ എന്നത് നിർണ്ണയിക്കുന്നു.htmlCopy code
<iframe src="https://example.com" width="800" height="600" scrolling="yes"></iframe> - allowfullscreen: iframe ന്റെ ഉള്ളടക്കം മുഴുനീള സ്ക്രീനിൽ കാണാൻ അനുവദിക്കുന്നു.htmlCopy code
<iframe src="https://example.com" allowfullscreen></iframe>
Fallback Content for Unsupported Browsers:
iframe നിങ്ങളുടെ ബ്രൗസർ പിന്തുണയ്ക്കുന്നില്ലെങ്കിൽ fallback content ഉപയോഗിക്കാൻ കഴിയും.
<iframe src="https://example.com">
ഈ iframe നിങ്ങളുടെ ബ്രൗസറിൽ പ്രദർശിപ്പിക്കാൻ സാധ്യമല്ല.
</iframe>
iframe-ന്റെ പ്രയോഗങ്ങൾ:
- External Web Pages:വെബ്ബ് പേജിനുള്ളിൽ മറ്റൊരു വെബ്ബ് സൈറ്റ് ഉൾപ്പെടുത്താൻ iframes ഉപയോഗിക്കാം.htmlCopy code
<iframe src="https://example.com"></iframe> - Embedding Google Maps:Google Maps iframe വഴി വെബ്ബ് പേജിൽ ചാർട്ട് ചെയ്യാൻ കഴിയും.htmlCopy code
<iframe src="https://maps.google.com/maps?q=Kannur&t=&z=13&ie=UTF8&iwloc=&output=embed" width="600" height="450"></iframe> - Embedding YouTube Videos:YouTube iframe-ൽ വീഡിയോകൾ ഉൾപ്പെടുത്താനുള്ള മാർഗമാണ്.htmlCopy code
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Security Considerations:
iframe ഉപയോഗിക്കുന്നത് ചിലപ്പോൾ സുരക്ഷാ പ്രശ്നങ്ങൾക്കും XSS ആക്രമണങ്ങൾക്കും വഴിവെക്കാം. അതിനാൽ, iframe ഉൾപ്പെടുന്ന സൈറ്റുകൾ വിശ്വസനീയമാണോ എന്ന് പരിശോധിക്കേണ്ടതുണ്ട്.
- sandbox: iframe-നുള്ളിൽ പ്രവർത്തനങ്ങൾ നിയന്ത്രിക്കാൻ.htmlCopy code
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>
Styling iframes with CSS:
CSS ഉപയോഗിച്ച് iframes-ന് ബോർഡറുകൾ, നിറങ്ങൾ, സ്ക്രോൾ എന്നിവക്ക് ഫോർമാറ്റ് നൽകാം.
iframe {
border: 2px solid black;
border-radius: 10px;
}
Responsive iframes:
CSS media queries ഉപയോഗിച്ച് iframes-ന് വിവിധ സ്‌ക്രീൻ വലിപ്പങ്ങളിലേക്കുള്ള പ്രതികരണം നൽകാം.
iframe {
max-width: 100%;
height: auto;
}
iframe Events:
JavaScript ഉപയോഗിച്ച് iframe ലൊഡിങ്, ഡാറ്റ മാറ്റൽ തുടങ്ങിയ കാര്യങ്ങൾ event-handling വഴി ചെയ്യാം.
<iframe id="myFrame" src="https://example.com"></iframe>
<button onclick="changeSrc()">Change Source</button>
<script>
function changeSrc() {
document.getElementById("myFrame").src = "https://anotherexample.com";
}
</script>
സങ്കലനം:
HTML <iframe>– ടാഗ് ഒരു പേജിനുള്ളിൽ തന്നെ മറ്റൊരു വെബ്ബ് പേജ്, വീഡിയോ, അല്ലെങ്കിൽ Google Maps ഉൾപ്പെടുത്താനും പ്രദർശിപ്പിക്കാനുമുള്ള എളുപ്പവഴിയാണ്. CSS, JavaScript എന്നിവ ഉപയോഗിച്ച് iframe-ന്റെ പ്രവർത്തനങ്ങൾ മെച്ചപ്പെടുത്താം.
