HTML Iframes

-

في هذه المقالة ، بنتعرف على HTML Iframes،بالإضافة الى كيفية تنفيذها من خلال الأمثلة.

tag  iframe في HTML عبارة Inline Frame. حيث تحدد tag "iframe" منطقة داخل صفحة HTML يمكن التعامل معها بشكل مستقل ومنفصل وبنقدر نعرض صفحة ثانيه مختلفة داخلها. تُستخدم name attribute أيضًا كمرجع ل elements في JavaScript. 

الاستخدام الاساسي ل iframe هو عرض صفحة ويب مستقلة داخل صفحة الويب الحالية. 

طريقة الكتابة : 

<iframe src="URL" title="description"></iframe>
حيث src attribute تستخدم لتحديد URL المطلوب عرضه داخلها.
يمكن استخدام src attribute لعرض نوعين من الروابط وهما :
  • Absolute URL : وهو رابط لموقع مستقل ومنفصل عن الموقع الحالي.
  • Relative URL : صفحات داخليه في نفس الموقع الحالي. 

تمام نطبق مثال حتي نفهم الموضوع بشكل احسن. 

<!DOCTYPE html>
<html>
<head>
    <title>HTML iframe Tag</title>
</head>
<body style="text-align: center">
    <h1>مرحبا بكم</h1>
    <h2>HTML iframe Tag</h2>
    <iframe src=
"introduction.html" 
            height="200" 
            width="400">
    </iframe>
</body>
</html>
النتيجة: 
في الكود استخدمنا src attribute لعرض صفحه باسم introduction.html وحددنا الطول Iframe بقيمة 200 والعرض بقيمة 400
يمكن تحديد الطول والعرض باستخدام الكود: 
  <iframe src= "introduction.html" style="height:200px;width:400px;"> </iframe>
حذف الاطار Border 
لحذ الاطار فقط بنعمل Border في Style يساوي none 
طبق الكود التالي في صفحة HTML وشوف النتيجة

<!DOCTYPE html>
<html>
<head>
    <title>HTML iframe Tag</title>
</head>
<body style="text-align: center">
    <h1>مرحبا بكم</h1>
    <h2>HTML iframe Tag</h2>
    <iframe src= "introduction.html" style="height:200px;width:400px; border-style:none;">
    </iframe>
</body>
</html>
تطبيق Iframe بنفس طول وعرض الصفحة 
اذا كنت بحاجة الى عرض الصفحة داخل Iframe بطول وعرض الصفحة الاصلية طبق الكود التالي : 

<!DOCTYPE html>
<html>
<head>
    <title>HTML iframe Tag</title>
</head>
<body style="text-align: center">
    <h1>مرحبا بكم</h1>
    <h2>HTML iframe Tag</h2>
    <iframe src= "introduction.html" style="height:100vh;width:100%; border-style:none;">      
    </iframe>
</body>
</html>

شوف النتيجة 
تطبيق Iframe مع a link 
يمكن فتح صفحة من a link داخل Iframe ، ولتطبيق ذلك بنستخدم target attribute في a link وبنربطها مع Iframe 
طبق الكود التالي داخل صفحة HTML 

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML iframe Tag</title>
</head>
  
<body style="text-align: center">
    <h1>مرحبا بكم</h1>
    <h2>HTML iframe Tag</h2>
    <p><a href="introduction.html" target="iframe_a">Open Introduction Page</a></p>
    <iframe src= "" style="height:100vh;width:90%; border-style:none;" name="iframe_a"> 
    </iframe>
</body>
</html>
شغل الصفحة وجرب الضغط على الرابط وشوف النتيجة.