প্রসঙ্গ
ওয়েব-এক্সটেনশনের প্রসঙ্গে আমাকে নিজেই এটি করতে হয়েছিল। এই ওয়েব-এক্সটেনশানটি প্রতিটি পৃষ্ঠায় UI এর কিছু টুকরো ইনজেকশন দেয় এবং এই UI এর ভিতরে থাকে iframe। iframeগতির অভ্যন্তরের সামগ্রীটি গতিশীল, তাই আমাকে নিজের প্রস্থ এবং উচ্চতাটি আবার সমন্বয় করতে iframeহয়েছিল।
আমি ব্যবহার করি প্রতিক্রিয়া তবে ধারণাটি প্রতিটি লাইব্রেরিতে প্রযোজ্য।
আমার সমাধান (এটি অনুমান করে যে আপনি পৃষ্ঠা এবং iframe উভয়ই নিয়ন্ত্রণ করেন)
iframeআমি ভিতরে bodyস্টাইল পরিবর্তন করে সত্যই বড় মাত্রা আছে। এটি সমস্ত প্রয়োজনীয় স্থান ব্যবহার করে অভ্যন্তরের উপাদানগুলিকে বাইরে রাখার অনুমতি দেবে। মেকিং widthএবং height১০০% আমার পক্ষে কাজ করেনি (আমার ধারণা, যদি আইফ্রেমে একটি ডিফল্ট থাকে width = 300pxএবং height = 150px)
/* something like this */
body {
width: 99999px;
height: 99999px;
}
তারপরে আমি একটি ডিভের মধ্যে সমস্ত আইফ্রেমে ইউআই ইনজেকশন দিয়েছিলাম এবং এটিকে কিছু স্টাইল দিয়েছি
#ui-root {
display: 'inline-block';
}
আমার অ্যাপ্লিকেশনটিকে এর অভ্যন্তরে রেন্ডার করার পরে #ui-root( প্রতিক্রিয়াতে আমি এটি ভিতরে করি componentDidMount) আমি এই ডিভের মাত্রাগুলি পছন্দ করি এবং এটি ব্যবহার করে প্যারেন্ট পৃষ্ঠায় সিঙ্ক করে থাকি window.postMessage:
let elRect = el.getBoundingClientRect()
window.parent.postMessage({
type: 'resize-iframe',
payload: {
width: elRect.width,
height: elRect.height
}
}, '*')
প্যারেন্ট ফ্রেমে আমি এই জাতীয় কিছু করি:
window.addEventListener('message', (ev) => {
if(ev.data.type && ev.data.type === 'resize-iframe') {
iframe.style.width = ev.data.payload.width + 'px'
iframe.style.height = ev.data.payload.height + 'px'
}
}, false)