iframe কি?

একটি <iframe> (ইনলাইন ফ্রেম) একটি HTML উপাদান যা বর্তমান পৃষ্ঠার মধ্যে অন্য একটি ওয়েব পৃষ্ঠা বা ডকুমেন্ট এম্বেড করে। এটি পৃষ্ঠার একটি আয়তক্ষেত্রাকার অঞ্চলের মধ্যে একটি আলাদা ব্রাউজিং প্রসঙ্গ তৈরি করে, যা ব্যবহারকারীকে দূরে নেভিগেট না করে একটি ভিন্ন URL থেকে কন্টেন্ট — যেমন একটি মানচিত্র, ভিডিও বা তৃতীয় পক্ষের উইজেট — প্রদর্শন করতে দেয়।

Iframe সাধারণত YouTube ভিডিও, Google Maps, পেমেন্ট ফর্ম, সোশ্যাল মিডিয়া উইজেট এবং বিজ্ঞাপন ব্যানার এম্বেড করতে ব্যবহৃত হয়। যেহেতু এম্বেড করা কন্টেন্ট নিজস্ব প্রসঙ্গে চলে, sandbox এবং allow এর মতো বৈশিষ্ট্যগুলি ডেভেলপারদের এম্বেড করা পৃষ্ঠাটি কী করতে পারে তা কঠোরভাবে নিয়ন্ত্রণ করতে দেয়।

টুল বর্ণনা

এই টুলটি একটি সাধারণ ফর্ম থেকে পেস্ট করার জন্য প্রস্তুত <iframe> HTML কোড তৈরি করে। উৎস URL, মাত্রা, স্ক্রলিং আচরণ, লোডিং কৌশল, অনুমতি এবং sandbox সীমাবদ্ধতা কনফিগার করুন, এবং টুলটি তাৎক্ষণিকভাবে সংশ্লিষ্ট ট্যাগ আউটপুট করে। কোনো ম্যানুয়াল বৈশিষ্ট্য-লেখা বা sandbox ফ্ল্যাগ সিনট্যাক্স মনে রাখার প্রয়োজন নেই।

উদাহরণ

ন্যূনতম iframe:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Lazy-লোড করা iframe sandbox সহ:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

ক্যামেরা এবং মাইক্রোফোন অনুমতি সহ Iframe:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

বৈশিষ্ট্য

  • একটি ভিজ্যুয়াল ফর্ম থেকে বৈধ <iframe> কোড তৈরি করে — কোনো HTML জ্ঞানের প্রয়োজন নেই
  • অনুমতি (allow) এবং sandbox সীমাবদ্ধতার উপর সম্পূর্ণ নিয়ন্ত্রণ
  • আপনি যেকোনো বিকল্প পরিবর্তন করার সাথে সাথে লাইভ প্রিভিউ আপডেট হয়

বিকল্প ব্যাখ্যা

বিকল্প বর্ণনা
URL src বৈশিষ্ট্য — এম্বেড করার জন্য পৃষ্ঠার ঠিকানা
প্রস্থ / উচ্চতা iframe এর পিক্সেল মাত্রা
শিরোনাম অ্যাক্সেসযোগ্য লেবেল (title বৈশিষ্ট্য) স্ক্রিন রিডারদের জন্য
নাম name বৈশিষ্ট্য, একটি লিঙ্ক লক্ষ্য হিসাবে ব্যবহৃত
স্ক্রলিং স্ক্রলবার নিয়ন্ত্রণ করে: স্বয়ংক্রিয়, সর্বদা চালু বা সর্বদা বন্ধ
লোডিং eager অবিলম্বে লোড করে; lazy ভিউপোর্টের কাছাকাছি না হওয়া পর্যন্ত বিলম্ব করে
সম্পূর্ণ স্ক্রিন অনুমতি allowfullscreen যোগ করে যাতে এম্বেড করা কন্টেন্ট সম্পূর্ণ স্ক্রিনে যেতে পারে
সীমানা যখন অনির্বাচিত হয়, ডিফল্ট সীমানা সরাতে style="border: none;" যোগ করে
বৈশিষ্ট্য অনুমতি এম্বেড করা পৃষ্ঠায় নির্দিষ্ট ব্রাউজার API অনুমতি প্রদান করে
Sandbox ফ্ল্যাগ এম্বেড করা পৃষ্ঠা কী করতে পারে তা সীমাবদ্ধ করে; প্রতিটি ফ্ল্যাগ একটি নির্দিষ্ট ক্ষমতা পুনরায় সক্ষম করে

টিপস

  • অ্যাক্সেসযোগ্যতার জন্য সর্বদা একটি title বৈশিষ্ট্য প্রদান করুন — স্ক্রিন রিডাররা iframe এ ফোকাস করার সময় এটি ঘোষণা করে।
  • পৃষ্ঠা লোড পারফরম্যান্স উন্নত করতে ফোল্ডের নীচে iframe এর জন্য loading="lazy" ব্যবহার করুন।
  • কোনো ফ্ল্যাগ ছাড়াই sandbox বৈশিষ্ট্য যোগ করা কন্টেন্টকে সম্পূর্ণভাবে লক করে দেয়; শুধুমাত্র যে ফ্ল্যাগগুলি আপনার প্রকৃতপক্ষে প্রয়োজন তা যোগ করুন।