تشرح هذه المدونة كيفية تغيير مصدر iframe في JavaScript.
ما هو الإطار المضمن؟
و ' إطار مضمّن 'لاحتواء مستند آخر محدد داخل المستند الحالي. ينتج عن هذا تبديل صفحات الويب بناءً على الروابط المذكورة.
كيفية تغيير مصدر Iframe في JavaScript؟
يمكن تغيير مصدر Iframe في JavaScript باستخدام الأساليب التالية جنبًا إلى جنب مع ' getElementById () ' طريقة:
- ' تم تمرير المعلمة 'تقنية.
- ' الفهرس المختار ' ملكية.
الأسلوب 1: تغيير مصدر Iframe في JavaScript باستخدام تقنية المعامِلات التي تم تمريرها
يمكن استخدام هذه التقنية للتبديل إلى الصفحة المحددة عن طريق وضع رابط الصفحة المقابلة كمعامل وظيفة عند الوصول إليها بمساعدة زر.
مثال
دعنا نتبع المثال المذكور أدناه:
< المركز > < h2 > تغيير مصدر iframe في جافا سكريبت h2 >
< معرف iframe = 'صفحة ويب' src = 'https://linuxhint.com/detect-tab-key-javascript/' العرض = '1000' ارتفاع = '550' فراميبور = '0' التمرير = 'رقم' > iframe >
< ر > < ر >
< زر عند النقر = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > انقر لعرض صفحة أوامر Linux زر >
< ر > ر >
المركز >
في سطور التعليمات البرمجية أعلاه ، قم بتنفيذ الخطوات التالية:
- حدد الارتباط المذكور في ' <إطار مضمّن> 'مع الأبعاد المعدلة.
- أيضًا ، قم بإنشاء زر مرفق بعلامة ' عند النقر إعادة توجيه الحدث إلى الوظيفة changeIframe () التي لها الارتباط المحدد كمعامل لها.
- سيؤدي هذا إلى توجيه الصفحة إلى الرابط المذكور عند النقر على الزر.
دعنا ننتقل إلى جزء جافا سكريبت من الشفرة:
< نوع البرنامج النصي = 'نص / جافا سكريبت' >
وظيفة تغيير الإطار ( يتغيرون ) {
وثيقة. getElementById ( 'صفحة ويب' ) . src = يتغيرون ؛
}
النصي >
في مقتطف الشفرة أعلاه:
- يعلن عن وظيفة باسم ' changeIframe () '.
- في تعريفه ، الوصول إلى الرابط المحدد في ' إطار مضمّن 'باستخدام' document.getElementById () ' طريقة.
- بعد ذلك ، قم بتطبيق ' src 'وتخصيص الرابط المحدد عند وصول الوظيفة إلى الرابط الذي تم الوصول إليه باستخدام المعلمة' يتغيرون '.
- سيؤدي هذا إلى تبديل الصفحات فيما يتعلق بالروابط المحددة عند النقر فوق الزر.
انتاج |
في الإخراج أعلاه ، يمكن ملاحظة أن الصفحات يتم تبديلها عند النقر فوق الزر.
الطريقة 2: تغيير مصدر Iframe في JavaScript باستخدام خاصية الفهرس المحددة
ال ' الفهرس المختار 'إرجاع فهرس الخيار المحدد في قائمة منسدلة. يمكن تطبيق هذه الخاصية لإعادة التوجيه إلى الارتباط المحدد فيما يتعلق بقيمة الخيار المحدد من القائمة المنسدلة.
مثال
دعونا نلاحظ المثال التالي:
< معرف iframe = 'صفحة ويب' src = 'https://linuxhint.com/detect-tab-key-javascript/' العرض = '1000' ارتفاع = '550' فراميبور = '0' التمرير = 'رقم' > iframe >
< ر > < ر >
< حدد معرف = 'روابط' >
< قيمة الخيار = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > قم بالتبديل إلى المقالة 1
< قيمة الخيار = 'https://linuxhint.com/convert-array-to-object-javascript/' > قم بالتبديل إلى المقالة اثنين
تحديد >
< ر > < ر >
< زر onClick = 'changeIframe () ؛' > تغيير Iframe Src زر >
< ر > < ر >
هيئة > المركز >
في سطور التعليمات البرمجية أعلاه ، قم بتنفيذ الخطوات التالية:
- أذكر خطوة تحديد الارتباط المذكور داخل '