لقد كنت أتساءل عن هذا لفترة. إليك إثبات مفهوم (لاحظ أنه لا يحل مشكلة إزالة أشرطة التمرير من iframes).
أضف علامة نص برمجي إلى المنشور الذي تقوم بتضمينه:
<script>
function sendHeight() {
const body = document.body,
html = document.documentElement;
const height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
window.parent.postMessage({
'iframeHeight': height,
'iframeId': 'zalgFrame' // استخدم معرفًا فريدًا إذا كان لديك iframes متعددة
}, '*'); // ضع في اعتبارك تحديد النطاق الأصلي للأمان
}
// إرسال الارتفاع الأولي
window.onload = sendHeight;
// اختياري: تحديث الارتفاع عند تغيير الحجم أو أحداث أخرى
window.onresize = sendHeight;
</script>
أنا أستخدم المعرف "zalgFrame" في النص البرمجي.
في سمة Discourse الخاصة بك:
<script type="text/discourse-plugin" version="1.29.0">
let iframeHeight, iframeId;
window.addEventListener('message', (event) => {
if (event.origin !== "http://wp-discourse.test") return; // نطاق الاختبار الخاص بي، قم بتحديثه إلى نطاقك أو قم بالتعليق عليه
// يحصل على ارتفاع iframe الذي يتم تمريره من `wp-discourse.test` ويؤكد أن iframeId يطابق iframeID الذي قمت بتعيينه هناك
if (event.data.iframeHeight && event.data.iframeId === 'zalgFrame') {
// قم بزيارة صفحة Discourse مع iframe مع فتح وحدة التحكم الخاصة بك
// يجب أن ترى ارتفاعات محدثة يتم إرسالها من الموقع الأصلي أثناء تغيير حجم النافذة
console.log("we got an event:" + event.data.iframeHeight);
iframeHeight = event.data.iframeHeight;
iframeId = event.data.iframeId;
}
}, false);
</script>
في منشور Discourse:
<div data-iframe-test-one>
<iframe src="http://wp-discourse.test/zalg_iframe/this-is-a-test-this-is-only-a-test/" width="100%" height="1659"></iframe>
</div>
لذلك من الممكن الحصول على الارتفاع الفعلي لـ iframe المعروض من النافذة الأصلية.
لا أعرف كيفية الحصول على الارتفاع من البيانات من مستمع الحدث إلى استدعاء لـ api.decorateCookedElement على أي حال. لست متأكدًا من أن ذلك سيعمل على إزالة شريط التمرير العمودي من iframes الطويلة. إذا حاولت ترميز ارتفاع كبير (1600px) في عنصر iframe، فلا يزال لدي شريط تمرير.
تحرير: من أجل الاكتمال:
<script type="text/discourse-plugin" version="1.29.0">
api.decorateCookedElement(
(e) => {
let iframeHeight, iframeId;
function handleMessage(event) {
if (event.origin !== "http://wp-discourse.test") return;
if (event.data.iframeHeight && event.data.iframeId === "zalgFrame") {
iframeHeight = event.data.iframeHeight;
iframeId = event.data.iframeId;
// بناءً على افتراض أنه سيكون هناك iframe واحد فقط مغلف في div data-zalgFram
let iframe = e.querySelector("[data-zalgFrame] iframe");
if (iframe) {
iframe.style.height = `${iframeHeight}px`;
}
// بعد تعيين الارتفاع الفعلي المعروض لـ iframe
// قم بإزالة مستمع الحدث
window.removeEventListener("message", handleMessage, false);
}
}
window.addEventListener("message", handleMessage, false);
},
{ id: "component-id", onlyStream: true }
);
</script>
بالنسبة لأي شيء يزيد ارتفاعه عن ~1000px، لا يبدو أن هناك أي طريقة لتجنب إضافة شريط تمرير بواسطة Discourse، لذلك لا أوصي بهذا النهج.
أعتقد أن الإجابة على OP هي أنه ممكن إلى حد ما، ولكنه لا يحقق الكثير على الأرجح. (باستثناء أنني تعلمت عن طريقة window.postMessage() 