ZZzzz~ قد يتم لف
<Iframe src="/URL" width="x" height="x" التمرير = "[OPTION]"frameborder="x"></iframe>
src: مسار الملف، والذي يمكن أن يكون ملف HTML أو نص أو ASP وما إلى ذلك؛
العرض والارتفاع: عرض وارتفاع منطقة "صورة داخل صورة"؛
التمرير: عندما لا يتم عرض ملف HTML المحدد لـ SRC في المنطقة المحددة، فإن خيار التمرير، إذا تم ضبطه على NO، لن يظهر شريط التمرير إذا كان تلقائيًا: سيظهر شريط التمرير تلقائيًا إذا كان نعم؛ سيتم عرضه؛
Frameborder: عرض حدود المنطقة لمزج "صورة داخل صورة" مع المحتوى المجاور، غالبًا ما يتم تعيينه على 0.
على سبيل المثال:
<Iframe src=" http://www.xyz.com/xyz "
; الإطار في لغة البرمجة النصية والتسلسل الهرمي للكائنات، تسمى النافذة التي تحتوي على Iframe النموذج الأصلي، ويسمى الإطار العائم النموذج الفرعي. من المهم توضيح العلاقة بين الاثنين، لأنه من الضروري التحكم في Iframe النموذج الأصلي عند الوصول إلى نموذج فرعي أو العكس، يجب أن تعرف التسلسل الهرمي للكائن قبل أن تتمكن من الوصول إلى النموذج والتحكم فيه من خلال البرنامج.
1. الوصول إلى الكائنات الموجودة في النموذج الفرعي والتحكم فيها في النموذج الأصلي. في النموذج الأصلي، يعد Iframe، أي النموذج الفرعي، كائنًا فرعيًا لكائن المستند. يمكنك الوصول مباشرة إلى الكائنات الموجودة في النموذج الفرعي في البرنامج النصي .
الآن هناك سؤال، كيف يمكننا التحكم في إطار Iframe هذا؟ هنا نحتاج إلى التحدث عن كائن Iframe. عندما نقوم بتعيين سمة المعرف لهذه العلامة، يمكننا تنفيذ سلسلة من عناصر التحكم على HTML الموجود في Iframe من خلال Document Object Model DOM.
على سبيل المثال، قم بتضمين ملف test.htm في example.htm والتحكم في بعض كائنات العلامات في test.htm:
<Iframe src = "test.htm" id = "test" width = "250" height = "200" التمرير = "no"frameborder = "0"></iframe>
رمز ملف test.htm هو:
<أتش تي أم أل>
<الجسم>
<h1 id="myH1">مرحبًا يا ولدي</h1>
</الجسم>
</html>
إذا أردنا تغيير النص الموجود في علامة H1 برقم المعرف myH1 إلى مرحباً يا عزيزي يمكننا استخدام:
document.myH1.innerText="مرحبا، عزيزتي"(يمكن حذف المستند)
في ملف example.htm، يتوافق النموذج الفرعي المشار إليه بواسطة كائن علامة Iframe مع نموذج كائن DHTML العام، وطريقة التحكم في الوصول إلى الكائن هي نفسها، لذلك لن أخوض في التفاصيل.
2. الوصول إلى الكائنات الموجودة في النموذج الأصلي والتحكم فيها في النموذج الفرعي في النموذج الفرعي، يمكننا الوصول إلى الكائنات الموجودة في النافذة الأصلية من خلال الكائن الأصلي (الأصل).
مثل example.htm:
<أتش تي أم أل>
<body onclick = "alert (tt.myH1.innerHTML)"> <Iframe name = "tt" src = "frame1.htm" width = "250" height = "200" التمرير = "no"frameborder = "0"> </iframe>
<h1 id="myH2">مرحبا زوجتي</h1>
</الجسم>
</html>
إذا أردنا الوصول إلى نص العنوان فيframe1.htm برقم المعرف myH2 وتغييره إلى "مرحبًا يا صديقي"، فيمكننا الكتابة على النحو التالي:
parent.myH2.innerText="مرحبا يا صديقي"
هنا يمثل الكائن الأصل النموذج الحالي (النموذج الذي يوجد به example.htm). للوصول إلى الكائنات الموجودة في النموذج الأصلي في النموذج الفرعي، بدون استثناء، يتم ذلك من خلال الكائن الأصل.
على الرغم من أن إطار Iframe مضمن في ملف HTML آخر، إلا أنه يظل مستقلاً نسبيًا ويعتبر "مملكة مستقلة". تنطبق الخصائص الموجودة في ملف HTML الواحد أيضًا على الإطارات العائمة.
فقط تخيل أنه من خلال علامة Iframe، يمكننا التعبير عن المحتوى غير المتغير كإطار Iframe، وبهذه الطريقة، لا يتعين علينا كتابة نفس المحتوى بشكل متكرر، وهذا يشبه إلى حد ما عملية أو وظيفة في البرمجة، وكم هو ممل يتم حفظ العمل اليدوي! بالإضافة إلى ذلك، والأهم من ذلك، أنه يجعل تعديلات الصفحة أكثر جدوى، لأنه بدلاً من الاضطرار إلى تعديل كل صفحة لضبط التخطيط، تحتاج فقط إلى تعديل تخطيط نموذج أصل واحد.
تجدر الإشارة إلى أن الإصدارات السابقة لـ Nestscape 6.0 لا تدعم علامة Iframe.
مثال:
<iframe src="Page" width="Width" height="Height" align="يمكن أن يكون الترتيب لليسار أو لليمين، في المنتصف" التمرير="إذا كان هناك شريط تمرير، فاملأ لا أو نعم">< /iframe>
< IFRAMEframeBorder=0 تباعد الإطارات=0 ارتفاع=25 هامشالارتفاع=0 هامشعرض=0 تمرير=لا
name=main src="/bgm/bgm.html" width=300></IFRAME>
بعد استخدام iframe، وجدت أن شريط التمرير ليس جميلًا وأريد استخدام صورتين بدلاً من ذلك↑↓
كيف ينبغي تحقيق ذلك؟
إجابة:
استبدل <title>..</title> بصفحة الويب بالكود التالي
<لغة البرنامج النصي = "جافا سكريبت">
تمرير الوظائف (ن)
{درجة الحرارة = ن؛
Out1.scrollTop=Out1.scrollTop+temp;
إذا (درجة الحرارة == 0) العودة؛
setTimeout("التمرير(درجة الحرارة)",80);
}
</النص>
<عرض الجدول = "330">
<TR>
<TD WIDTH = "304" VALIGN = "TOP" ROWSPAN = "2" >
<DIV ID=Out1 STYLE = "العرض: 100%؛ الارتفاع: 100؛ التجاوز: مخفي؛ نمط الحدود: متقطع؛ عرض الحدود:
1px,1px,1px,1px;">
نص<BR> نص<BR>
النص<BR>
النص<BR>
كلمة
<ر>
<ر>
</DIV>
</TD>
< TD WIDTH = "14" VALIGN = "TOP"> <IMG SRC = "photo/up0605.gif" WIDTH = "14" الارتفاع ="20" onmouseover = "scroll(-1)" onmouseout = "scroll(0) " onmousedown="scroll (-3)" BORDER="0" ALT="الضغط على الماوس سيجعل الأمر أسرع "></TD>
</TR>
<TR>
< TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER= "0" WIDTH ="15" HEIGHT="21" ALT="اضغط بالماوس لأسفل لتجعله أسرع!"></TD>
</TR>
</TABLE>
يمكن للتعليمات البرمجية التالية تنفيذ ارتفاع IFrame التكيفي، أي أنه يتكيف تلقائيًا مع طول الصفحة لتجنب ظهور أشرطة التمرير على الصفحة وIFrame في نفس الوقت.
كود المصدر كما يلي
<script type="text/javascript">
//** يتكيف إطار iframe تلقائيًا مع الصفحة**//
// أدخل قائمة بأسماء إطارات iframe التي تريد ضبط ارتفاعها تلقائيًا وفقًا لارتفاع الصفحة
// افصل معرف كل إطار iframe بفاصلة، على سبيل المثال: ["myframe1"، "myframe2"]، يمكن أن يكون هناك نموذج واحد فقط، لذلك ليست هناك حاجة إلى فاصلة.
// تحديد معرف iframe
var iframeids=["test"]
// إذا كان متصفح المستخدم لا يدعم iframe، سواء كان إخفاء iframe، نعم يعني مخفي، لا يعني غير مخفي
فار iframehide = "نعم"
وظيفة dyniframesize ()
{
فار dyniframe=مصفوفة جديدة ()
لـ (i=0; i<iframeids.length; i++)
{
إذا (document.getElementById)
{
// ضبط ارتفاع iframe تلقائيًا
dyniframe[dyniframe.length] = document.getElementById(iframeids);
إذا (dyniframe && !window.opera)
{
dyniframe.style.display = "block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) // إذا كان متصفح المستخدم هو NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) // إذا كان متصفح المستخدم هو IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
// وفقًا للمعلمات المحددة، قم بمعالجة مشاكل العرض للمتصفحات التي لا تدعم iframe
إذا ((document.all || document.getElementById) && iframehide=="no")
{
فار tempobj=document.all document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display = "block"
}
}
}
إذا (window.addEventListener)
window.addEventListener("تحميل"، dyniframesize، false)
وإلا إذا (window.attachEvent)
window.attachEvent("onload"، dyniframesize)
آخر
window.onload=dyniframesize
</script>
عناوين URL الأخرى ذات القيمة المرجعية:
http://www.webshu.com/tutorial/tor/7,id=0408.htm // استخدام iframe المضمن في صفحات الويب
http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html //كائن IFRAME
http://www.hoyo.idv.tw/web-program/html/iframe.htm // إطار iframe مضمّن