iFrame

Technical & Infrastructure

عنصر HTML يُضمّن صفحة ويب داخل أخرى، يُستخدم عادةً لتضمين الكتب التفاعلية.

التعريف

iFrame (الإطار المُضمَّن) هو عنصر HTML يُضمِّن صفحة ويب داخل أخرى. يُعرَّف بوسم `<iframe>`، وينشئ نافذة مستطيلة مستقلة داخل صفحتك تُحمّل محتوى من URL منفصل وتعرضه. يحتفظ المحتوى المُضمَّن بسياق مستنده الخاص — مع DOM وأنماط ونصوص برمجية مستقلة — معزولاً عن الصفحة المُضيفة. تُستخدم iFrames على نطاق واسع لتضمين مقاطع الفيديو والخرائط والنماذج وبوابات الدفع والأدوات التفاعلية دون أن تضطر الصفحة المُضيفة إلى التعامل مع شيفرة ذلك المحتوى أو تنسيقه مباشرةً.

لماذا يهم

بالنسبة للناشرين الرقميين، توفّر iFrames أبسط الطرق وأكثرها شمولاً لوضع [كتاب تفاعلي](/glossary/flipbook) أو عارض مستندات مباشرةً على موقع ويب قائم. يستطيع الزوّار تصفّح المنشور دون مغادرة الصفحة، ما يُبقيهم متفاعلين مع موقعك بدلاً من إعادة توجيههم إلى رابط طرف ثالث. يُحسّن هذا مدّة البقاء على الصفحة، ويُقلّل [معدّلات الارتداد](/glossary/bounce-rate)، ويدمج تجربة القراءة بسلاسة في تصميمك الحالي. ولأن iFrames خاصية HTML أصلية يدعمها كل متصفح حديث، فإنها تعمل عبر WordPress وShopify وSquarespace والمواقع المخصّصة وأي نظام إدارة محتوى تقريباً.

كيف يعمل في FlipLink

تُولّد FlipLink شيفرة [تضمين](/glossary/embed-code) iFrame جاهزة للاستخدام لكل كتاب تفاعلي ومستند منشور. تنسخ مقتطف التضمين من لوحة تحكّم FlipLink وتلصقه في شيفرة HTML الخاصة بموقعك، أو محرّر نظام إدارة المحتوى، أو منشئ صفحات الهبوط. يُحمّل iFrame عارض FlipLink الكامل — متضمّناً [حركات تقليب الصفحات](/glossary/page-flip-animation)، و[أزرار CTA](/glossary/call-to-action-cta)، و[نماذج التقاط العملاء المحتملين](/glossary/lead-capture)، و[تتبّع التحليلات](/glossary/analytics-dashboard) — ضمن الأبعاد التي تُحدّدها. يضمن [التضمين المتجاوب](/features/sharing-and-distribution) في FlipLink تكيّف iFrame مع أي حجم شاشة تلقائياً. كما تُقدّم FlipLink خيار [تضمين الصورة القابلة للنقر](/features/clickable-image-embed) كبديل خفيف يُحيل إلى العارض الكامل.

التفاصيل التقنية

يستخدم تضمين iFrame هذه البنية الأساسية لـ HTML: ```html <iframe src="https://go.fliplink.me/your-flipbook" width="100%" height="600" frameborder="0" allowfullscreen> </iframe> ``` السمات الرئيسية التي تؤثّر في السلوك: - **`src`** — رابط URL للمحتوى المُراد تضمينه. تُوفّر FlipLink هذا الرابط لكل منشور. - **`width` / `height`** — يتحكّم في المنطقة المرئية. تستخدم شيفرة التضمين المتجاوبة في FlipLink عروضاً بالنسبة المئوية للتخطيطات المرنة. - **`sandbox`** — يُقيّد ما يستطيع المحتوى المُضمَّن فعله (مثل حظر النماذج أو النصوص البرمجية أو النوافذ المنبثقة). شيفرة تضمين FlipLink مُهيّأة للسماح بالتفاعلات اللازمة لكامل الوظائف. - **`loading="lazy"`** — يُؤجّل تحميل iFrame إلى أن يقترب المستخدم منه بالتمرير، ما يُحسّن أداء تحميل الصفحة الأوّلي. - **`allow`** — يُحدّد أذونات الخصائص مثل وضع ملء الشاشة، الذي تستخدمه FlipLink لتجربة قراءة غامرة.

اعتبارات الأمان

تُنشئ iFrames حدود ثقة بين الصفحة المُضيفة والمحتوى المُضمَّن. فهم نموذج الأمان يُساعدك على تضمين المحتوى بأمان: - **سياسة المصدر نفسه (Same-origin policy)** — تمنع المتصفحات الصفحة المُضيفة من الوصول إلى DOM الخاص بـ iFrame من مصدر مختلف، والعكس صحيح. يعني هذا أن موقعك لا يستطيع قراءة العناصر الداخلية لعارض FlipLink أو التلاعب بها، ولا يستطيع العارض المُضمَّن الوصول إلى ملفات تعريف الارتباط أو بيانات موقعك. - **[القوائم البيضاء للنطاقات](/glossary/domain-whitelisting)** — تُتيح لك FlipLink تقييد النطاقات التي يمكنها تضمين منشوراتك، مانعةً المواقع غير المصرّح لها من عرض محتواك في iFrames خاصة بها. - **سياسة أمان المحتوى (CSP)** — إذا كان موقعك يستخدم رؤوس CSP صارمة، فقد تحتاج إلى إضافة نطاق FlipLink إلى توجيه `frame-src` للسماح بتحميل iFrame. - **الحماية من الـ Clickjacking** — تضبط FlipLink رؤوس `X-Frame-Options` وCSP المناسبة للتحكّم في الأماكن التي يُمكن تضمين عارضها فيها، مع السماح بنطاقاتك المُصرَّح بها.

مفاهيم خاطئة شائعة

**"iFrames سيّئة لـ SEO."** يمكن لمحرّكات البحث متابعة الروابط داخل iFrames وقد تُفهرس المحتوى المُضمَّن بشكل منفصل، لكنّ المحتوى لا يُسهم في ترتيب SEO الخاص بالصفحة المُضيفة. بالنسبة للكتب التفاعلية، ليس هذا مصدر قلق — فقيمة SEO تكمن في محتوى صفحتك المُضيفة ذاتها وعناوينها وبياناتها الوصفية، بينما يعمل الكتاب التفاعلي بوصفه أداة تفاعل. **"iFrames تُبطئ صفحتي دائماً."** لا يُضيف iFrame بحدّ ذاته سوى عبء ضئيل. تنشأ مشكلات الأداء ممّا يُحمّله iFrame. استخدام `loading="lazy"` يضمن ألّا يُحمَّل الكتاب التفاعلي إلّا حين يصل المستخدم إليه بالتمرير، ما يُبقي تحميل صفحتك الأوّلي سريعاً. **"iFrames تقنية عفا عليها الزمن."** صحيح أن بعض الاستخدامات القديمة لـ iFrames (مثل بناء تخطيطات الصفحات) باتت متقادمة، لكنّ التضمين القائم على iFrame لا يزال المعيار للأدوات الخارجية ونماذج الدفع والمحتوى التفاعلي. تستخدم كلّ منصّة كبرى — YouTube وGoogle Maps وStripe وFlipLink — iFrames للتضمين.

الخلاصة الرئيسية

iFrame هو الأسلوب المعياري والآمن لتضمين المحتوى التفاعلي مثل الكتب التفاعلية على أي موقع ويب. يُوفّر وظائف كاملة مع إبقاء المحتوى المُضمَّن معزولاً عن شيفرة صفحتك المُضيفة وأنماطها.

مصطلحات ذات صلة

متوفر بلغات أخرى

هل أنت مستعد لتحويل
ملفاتك؟

انضمّ إلى آلاف الشركات التي تستخدم FlipLink لتحويل ملفاتها إلى محتوى جذّاب وتفاعلي. ابدأ مجاناً — بلا بطاقة ائتمان.