اعرض محتوى الموسوعة القرآنية المرتبط بالآية داخل موقعك — تفسيرًا، وغريبَ ألفاظ، ووقفاتٍ تدبرية، وإعرابًا، وقراءاتٍ، وغير ذلك — من غير أن تنسخ البيانات أو تتولَّى إدارتها.
أيسرُ طريقة: أضِف وسم div، ثم أدرِج سكربت embed.js؛ فيتولَّى السكربت إنشاء الإطار وضبط ارتفاعه تلقائيًّا كلَّما تغيَّر المحتوى.
<div data-quranpedia-embed data-surah="2" data-ayah="255"></div> <script src="https://quranpedia.net/embed.js" defer></script>
ولفتح قسم معيَّن مباشرة (كالوقفات التدبرية مثلًا) مع الوضع الداكن:
<div data-quranpedia-embed data-surah="2" data-ayah="255"
data-type="notes" data-theme="dark"></div>
<script src="https://quranpedia.net/embed.js" defer></script>
اربط كلمة في مقالك بآية بعينها؛ فإذا نقر القارئ الرابط، انفتحت نافذة داخل الصفحة تعرض محتوى الآية، فلا يغادر القارئ مقالك. والسكربت واحد للنمطين معًا: embed.js نفسه يتولَّى الإطارات المضمَّنة والروابط الديناميكية، فلا تُدرِج غيره.
<a href="https://quranpedia.net/embed?surah=2&ayah=255" data-quranpedia-link data-surah="2" data-ayah="255" target="_blank" rel="noopener">آية الكرسي</a> <script src="https://quranpedia.net/embed.js" defer></script>
واجعل العنصر وسمَ a مع href يشير إلى صفحة التضمين كما في المثال؛ فإن تعطَّل الجافاسكربت لدى القارئ، فتح الرابط الصفحة في تبويب مستقل. وإن كان الجافاسكربت عاملًا، منع السكربت الانتقال وفتح النافذة مكانه.
ويقبل الرابط المعاملات المذكورة في الجدول أدناه كلَّها بالصيغة نفسها، فتُفتَح النافذة على قسم معيَّن بمظهر تختاره:
<a href="https://quranpedia.net/embed?surah=2&ayah=255&type=notes&theme=dark" data-quranpedia-link data-surah="2" data-ayah="255" data-type="notes" data-theme="dark">وقفات تدبرية</a>
Esc، أو بالنقر خارجها، أو بزر الإغلاق «×»، ويعود التركيز بعدها إلى الرابط نفسه.data-quranpedia-link على وسم span أو button أيضًا، والأَولى وسم a؛ ليبقى البديل عاملًا عند تعطُّل الجافاسكربت.جرِّب بنفسك — انقر أحد الرابطين:
هذه آية الكرسي وهي أعظم آية في كتاب الله، وأول ما يُفتَتح به المصحف البسملة وهذا الرابط يفتحها بالوضع الداكن.
إن كنت تفضِّل التحكم الكامل، فضمِّن الرابط مباشرة؛ غير أنَّ ارتفاع الإطار في هذه الحالة لن يتغيَّر تلقائيًّا إلا إذا استمعت بنفسك إلى رسائل postMessage الواردة من الصفحة.
<iframe src="https://quranpedia.net/embed?surah=2&ayah=255&type=tafsir"
width="100%" height="600" style="border:0;border-radius:12px"
loading="lazy"></iframe>surah مطلوبayah مطلوب1-7 (بحدٍّ أقصى 20 آية).type اختياريtafsir، meanings، notes، e3rab، qiraat، similar، topics، fatwa، asbab، nasekh، translations، attachments. وإن لم يُحدَّد، عُرضت شبكة الأقسام المتاحة للآية.theme اختياريlight (الافتراضي)، أو dark للوضع الداكن، أو sepia للمظهر الورقي الدافئ.primary اختياريprimary=7c3aed؛ وتُشتَقُّ منه درجات اللون كلُّها لتوافق هوية موقعك.bg اختياريbg=transparent لتكون الخلفية شفافة تمتزج بصفحتك.size اختياريsize=115.radius اختياريnone لإلغائها، أو sm لتخفيفها؛ والافتراضي زوايا مستديرة.options اختياريoptions=tafsir,meanings.lock اختياريlock=1 مع type يثبِّت التضمين على القسم المحدَّد، ويخفي زر العودة إلى شبكة الأقسام.book اختياريbooks اختياريbooks=1949,2005.image اختياريimage=1 مع كتاب محدَّد يعرض النسخة المصوَّرة من صفحات الكتاب داخل الإطار.category اختياريtype=notes) على تصنيف بعينه.lang اختياريtranslations.ayah_text اختياريayah_text=0 يخفي بطاقة نص الآية أعلى التضمين وفي الصفحات الداخلية كلِّها؛ والافتراضي إظهارها.tab اختياريword (الافتراضي) أو compare أو learn، وفي المتشابهات: similar، beginning، ending، identical، phrases، scholarly.تنبيه: لا يظهر في شبكة الأقسام إلا ما توفَّر منها للآية المطلوبة، والأقسام كلُّها تعمل داخل الإطار نفسه. وجرِّب منشئ كود التضمين لتوليد الرابط تفاعليًّا.
آية الكرسي (سورة البقرة، الآية 255) — شبكة الأقسام:
Content-Security-Policy: frame-ancestors *).postMessage برسالة على هذا النحو:
{ "source": "quranpedia-embed", "type": "resize", "height": 1234 }