<iframe> উপাদানটি সাধারণত একটি ব্রাউজিং প্রসঙ্গে বহিরাগত সংস্থান এম্বেড করতে ব্যবহৃত হয়। Iframes হোস্ট পৃষ্ঠা থেকে ক্রস-অরিজিন এম্বেড করা বিষয়বস্তু আলাদা করে ওয়েবের নিরাপত্তা নীতি প্রয়োগ করে এবং এর বিপরীতে। যদিও এই পদ্ধতিটি উত্সগুলির মধ্যে একটি সুরক্ষিত সীমানা নিশ্চিত করে সুরক্ষা বাড়ায়, এটি কিছু ব্যবহারের ক্ষেত্রে সীমাবদ্ধ করে। উদাহরণস্বরূপ, ব্যবহারকারীদের গতিশীলভাবে বিভিন্ন উত্স থেকে বিষয়বস্তু লোড এবং পরিচালনা করতে হতে পারে—যেমন একজন শিক্ষক ক্লাসরুমের স্ক্রিনে একটি ওয়েবপৃষ্ঠা প্রদর্শন করার জন্য একটি নেভিগেশন ইভেন্ট ট্রিগার করছেন। যাইহোক, অনেক ওয়েবসাইট X-Frame-Options এবং Content Security Policy (CSP) এর মত নিরাপত্তা শিরোনাম ব্যবহার করে আইফ্রেমে এম্বেড করাকে স্পষ্টভাবে ব্লক করে। উপরন্তু, iframe সীমাবদ্ধতা এমবেড করা পৃষ্ঠাগুলিকে সরাসরি এম্বেড করা বিষয়বস্তুর নেভিগেশন বা আচরণ পরিচালনা করতে বাধা দেয়।
নিয়ন্ত্রিত ফ্রেম এপিআই যেকোনো ওয়েব সামগ্রী লোড করার অনুমতি দিয়ে এই সীমাবদ্ধতাকে মোকাবেলা করে, এমনকি যদি এটি সীমাবদ্ধ এম্বেডিং নীতিগুলি প্রয়োগ করে। এই APIটি একচেটিয়াভাবে Isolated Web Applications (IWAs) এর মধ্যে উপলব্ধ, যা ব্যবহারকারী এবং বিকাশকারী উভয়কে সম্ভাব্য ঝুঁকি থেকে রক্ষা করার জন্য অতিরিক্ত নিরাপত্তা ব্যবস্থা অন্তর্ভুক্ত করে।
নিয়ন্ত্রিত ফ্রেম বাস্তবায়ন
একটি নিয়ন্ত্রিত ফ্রেম ব্যবহার করার আগে, আপনাকে একটি কার্যকরী IWA সেট আপ করতে হবে। তারপরে আপনি আপনার পৃষ্ঠাগুলিতে নিয়ন্ত্রিত ফ্রেমগুলিকে একীভূত করতে পারেন৷
অনুমতি নীতি যোগ করুন
নিয়ন্ত্রিত ফ্রেম ব্যবহার করতে, আপনার IWA ম্যানিফেস্টে "controlled-frame" মান সহ একটি permissions_policy ক্ষেত্র যোগ করে সংশ্লিষ্ট অনুমতি সক্ষম করুন। অতিরিক্তভাবে, ক্রস-অরিজিন-আইসোলেটেড কী সহ। এই কীটি নিয়ন্ত্রিত ফ্রেমগুলির জন্য নির্দিষ্ট নয়, তবে সমস্ত IWA-এর জন্য প্রয়োজনীয় এবং নথিটি এমন API অ্যাক্সেস করতে পারে কিনা তা নির্ধারণ করে যেগুলির ক্রস-অরিজিন আইসোলেশন প্রয়োজন।
{
...
"permissions_policy": {
...
"controlled-frame": ["self"],
"cross-origin-isolated": ["self"]
...
}
...
}
আইসোলেটেড ওয়েব অ্যাপ (IWA) ম্যানিফেস্টে controlled-frame কী একটি অনুমতি নীতি অনুমোদন তালিকাকে সংজ্ঞায়িত করে, যা নির্দিষ্ট করে কোন উৎস নিয়ন্ত্রিত ফ্রেম ব্যবহার করতে পারে। যদিও ম্যানিফেস্ট সম্পূর্ণ পারমিশন পলিসি সিনট্যাক্সকে সমর্থন করে — মানগুলি যেমন * , নির্দিষ্ট উত্স, বা self এবং src এর মতো কীওয়ার্ডগুলিকে অনুমতি দেয় — এটা লক্ষ্য করা গুরুত্বপূর্ণ যে IWA-নির্দিষ্ট APIগুলিকে অন্য উত্সগুলিতে অর্পণ করা যাবে না৷ এমনকি যদি অনুমোদিত তালিকায় একটি ওয়াইল্ডকার্ড বা বাহ্যিক উত্স অন্তর্ভুক্ত থাকে তবে এই অনুমতিগুলি controlled-frame মতো IWA বৈশিষ্ট্যগুলির জন্য কার্যকর হবে না৷ স্ট্যান্ডার্ড ওয়েব অ্যাপের বিপরীতে, আইডব্লিউএগুলি সমস্ত নীতি-নিয়ন্ত্রিত বৈশিষ্ট্যগুলিকে ডিফল্ট করে না, যার জন্য স্পষ্ট ঘোষণার প্রয়োজন হয়। IWA-নির্দিষ্ট বৈশিষ্ট্যগুলির জন্য, এর মানে হল যে শুধুমাত্র self (IWA এর নিজস্ব উৎপত্তি) বা src (একটি এমবেডেড ফ্রেমের উৎপত্তি) মত মানগুলি কার্যকরীভাবে কার্যকর।
একটি নিয়ন্ত্রিত ফ্রেম উপাদান যোগ করুন
আপনার IWA-এর মধ্যে তৃতীয় পক্ষের সামগ্রী এম্বেড করতে আপনার HTML-এ একটি <controlledframe> উপাদান সন্নিবেশ করুন।
<controlledframe id="controlledframe_1" src="https://example.com">
</controlledframe>
ঐচ্ছিক partition অ্যাট্রিবিউট এমবেড করা সামগ্রীর জন্য স্টোরেজ পার্টিশন কনফিগার করে, আপনাকে সেশন জুড়ে ডেটা বজায় রাখার জন্য কুকিজ এবং স্থানীয় স্টোরেজের মতো ডেটা আলাদা করতে দেয়।
উদাহরণ: ইন-মেমরি স্টোরেজ পার্টিশন
"session1" নামে একটি ইন-মেমরি স্টোরেজ পার্টিশন ব্যবহার করে একটি নিয়ন্ত্রিত ফ্রেম তৈরি করুন। এই পার্টিশনে সংরক্ষিত ডেটা (উদাহরণস্বরূপ, কুকিজ, এবং স্থানীয় স্টোরেজ) ফ্রেমটি ধ্বংস হয়ে গেলে বা অ্যাপ্লিকেশন সেশন শেষ হলে সাফ করা হবে।
<controlledframe id="controlledframe_1" src="https://example.com">
</controlledframe>
উদাহরণ: স্থায়ী স্টোরেজ পার্টিশন
"user_data" নামে একটি স্থায়ী স্টোরেজ পার্টিশন ব্যবহার করে একটি নিয়ন্ত্রিত ফ্রেম তৈরি করুন। "persist:" উপসর্গ নিশ্চিত করে যে এই পার্টিশনে সংরক্ষিত ডেটা ডিস্কে সংরক্ষিত এবং অ্যাপ্লিকেশন সেশন জুড়ে উপলব্ধ হবে।
<controlledframe id="frame_2" src="..." partition="persist:user_data">
</controlledframe>
উপাদান রেফারেন্স পান
<controlledframe> উপাদানটির একটি রেফারেন্স পান যাতে আপনি এটির সাথে যেকোনো আদর্শ HTML উপাদানের মত ইন্টারঅ্যাক্ট করতে পারেন:
const controlledframe = document.getElementById('controlledframe_1');
ঘন ঘন পরিস্থিতি এবং ব্যবহার ক্ষেত্রে
একটি সাধারণ নিয়ম হিসাবে, অপ্রয়োজনীয় জটিলতা এড়িয়ে আপনার চাহিদা মেটাতে সেরা প্রযুক্তি বেছে নিন। সাম্প্রতিক বছরগুলিতে, প্রোগ্রেসিভ ওয়েব অ্যাপস (PWAs) নেটিভ অ্যাপগুলির সাথে ব্যবধান বন্ধ করে দিয়েছে, শক্তিশালী ওয়েব অভিজ্ঞতা সক্ষম করে। যদি কোনো ওয়েব অ্যাপ্লিকেশনের তৃতীয় পক্ষের সামগ্রী এম্বেড করার প্রয়োজন হয়, তাহলে প্রথমে নিয়মিত <iframe> পদ্ধতির অন্বেষণ করার পরামর্শ দেওয়া হয়। প্রয়োজনীয়তা যদি iframes-এর ক্ষমতা অতিক্রম করে, IWA-তে নিয়ন্ত্রিত ফ্রেমগুলি সেরা বিকল্প হতে পারে। সাধারণ ব্যবহারের ক্ষেত্রে নিম্নলিখিত বিভাগে বর্ণনা করা হয়েছে।
তৃতীয় পক্ষের ওয়েব সামগ্রী এম্বেড করা
অনেক অ্যাপ্লিকেশনের তাদের ব্যবহারকারী ইন্টারফেসের মধ্যে তৃতীয় পক্ষের সামগ্রী লোড এবং প্রদর্শন করার ক্ষমতা প্রয়োজন। যাইহোক, যখন একাধিক ওয়েব অ্যাপ মালিক জড়িত থাকে—এমবেডেড অ্যাপ্লিকেশানগুলির সাথে একটি সাধারণ দৃশ্য—তা সামঞ্জস্যপূর্ণ এন্ড-টু-এন্ড নীতিগুলি স্থাপন করা কঠিন হয়ে পড়ে৷ উদাহরণস্বরূপ, নিরাপত্তা সেটিংস একটি প্রথাগত <iframe> নির্দিষ্ট ধরণের সামগ্রী এম্বেড করা থেকে আটকাতে পারে, এমনকি যখন ব্যবসার এটি করার বৈধ প্রয়োজন থাকে। <iframe> উপাদানগুলির বিপরীতে, নিয়ন্ত্রিত ফ্রেমগুলি এই বিধিনিষেধগুলিকে বাইপাস করার জন্য ডিজাইন করা হয়েছে, অ্যাপ্লিকেশনগুলিকে সামগ্রী লোড এবং প্রদর্শন করার অনুমতি দেয় যদিও এটি স্পষ্টভাবে স্ট্যান্ডার্ড এম্বেডিং নিষিদ্ধ করে।
কেস ব্যবহার করুন
- শ্রেণীকক্ষের উপস্থাপনা : একজন শিক্ষক শিক্ষাগত সংস্থানগুলির মধ্যে স্যুইচ করতে একটি শ্রেণীকক্ষের টাচস্ক্রিন ব্যবহার করেন যা সাধারণত iframe এম্বেডিং ব্লক করে।
- খুচরা বিক্রেতা বা মলে ডিজিটাল সাইনেজ : একটি শপিং মল কিয়স্ক বিভিন্ন দোকান থেকে ওয়েবসাইটের মাধ্যমে চক্রাকারে। নিয়ন্ত্রিত ফ্রেমগুলি নিশ্চিত করে যে এই পৃষ্ঠাগুলি সঠিকভাবে লোড হয় যদিও তারা এম্বেডিং সীমাবদ্ধ করে।
কোড নমুনা
নিম্নলিখিত নিয়ন্ত্রিত ফ্রেম API এম্বেড করা বিষয়বস্তু পরিচালনার জন্য সহায়ক।
নেভিগেশন : নিয়ন্ত্রিত ফ্রেমগুলি এম্বেড করা বিষয়বস্তুর নেভিগেশন এবং নেভিগেশন ইতিহাসকে প্রোগ্রাম্যাটিকভাবে পরিচালনা এবং নিয়ন্ত্রণ করতে একাধিক পদ্ধতি প্রদান করে।
src অ্যাট্রিবিউট ফ্রেমে প্রদর্শিত বিষয়বস্তুর URL পায় বা সেট করে, HTML অ্যাট্রিবিউটের মতোই কাজ করে।
controlledframe.src = "https://example.com";
back() পদ্ধতি ফ্রেমের ইতিহাসে এক ধাপ পিছনে নেভিগেট করে। প্রত্যাবর্তিত প্রতিশ্রুতি একটি বুলিয়ানে সমাধান করে যা নির্দেশ করে যে নেভিগেশন সফল হয়েছে কিনা।
document.getElementById('backBtn').addEventListener('click', () => {
controlledframe.back().then((success) => {
console.log(`Back navigation ${success ? 'succeeded' : 'failed'}`); }).catch((error) => {
console.error('Error during back navigation:', error);
});
});
forward() পদ্ধতি ফ্রেমের ইতিহাসে এক ধাপ এগিয়ে নেভিগেট করে। প্রত্যাবর্তিত প্রতিশ্রুতি একটি বুলিয়ানে সমাধান করে যা নির্দেশ করে যে নেভিগেশন সফল হয়েছে কিনা।
document.getElementById('forwardBtn').addEventListener('click', () => {
controlledframe.forward().then((success) => {
console.log(`Forward navigation ${success ? 'succeeded' : 'failed'}`);
}).catch((error) => {
console.error('Error during forward navigation:', error);
});
});
reload() পদ্ধতি ফ্রেমে বর্তমান পৃষ্ঠা পুনরায় লোড করে।
document.getElementById('reloadBtn').addEventListener('click', () => {
controlledframe.reload();
});
অতিরিক্তভাবে, নিয়ন্ত্রিত ফ্রেমগুলি এমন ইভেন্টগুলি সরবরাহ করে যা আপনাকে নেভিগেশন অনুরোধগুলির সম্পূর্ণ জীবনচক্রকে ট্র্যাক করতে দেয়—সূচনা থেকে শুরু করে সামগ্রী লোডিং, সমাপ্তি বা গর্ভপাত পর্যন্ত পুনঃনির্দেশ।
-
loadstart: ফ্রেমে একটি নেভিগেশন শুরু হলে বহিস্কার করা হয়। -
loadcommit: যখন নেভিগেশন অনুরোধ প্রক্রিয়া করা হয়, এবং মূল নথির বিষয়বস্তু লোড হতে শুরু করে তখন বহিস্কার করা হয়। -
contentload: মূল নথি এবং এর প্রয়োজনীয় সংস্থানগুলি লোড করা শেষ হলে ফায়ার করা হয় (DOMContentLoaded এর মতো)। -
loadstop: পৃষ্ঠার সমস্ত সংস্থান (সাবফ্রেম, ছবি সহ) লোড করা শেষ হলে ফায়ার করা হয়৷ -
loadabort: একটি নেভিগেশন বাতিল করা হলে বরখাস্ত করা হয় (উদাহরণস্বরূপ, ব্যবহারকারীর ক্রিয়া বা অন্য নেভিগেশন শুরু করে)। -
loadredirect: নেভিগেশন চলাকালীন সার্ভার-সাইড রিডাইরেক্ট হলে ফায়ার করা হয়।
controlledframe.addEventListener('loadstart', (event) => {
console.log('Navigation started:', event.url);
// Example: Show loading indicator
});
controlledframe.addEventListener('loadcommit', (event) => {
console.log('Navigation committed:', event.url);
});
controlledframe.addEventListener('contentload', (event) => {
console.log('Content loaded for:', controlledframe.src);
// Example: Hide loading indicator, maybe run initial script
});
controlledframe.addEventListener('loadstop', (event) => {
console.log('All resources loaded for:', controlledframe.src);
});
controlledframe.addEventListener('loadabort', (event) => {
console.warn(`Navigation aborted: ${event.url}, Reason: ${event.detail.reason}`);
});
controlledframe.addEventListener('loadredirect', (event) => {
console.log(`Redirect detected: ${event.oldUrl} -> ${event.newUrl}`);
});
এছাড়াও আপনি নিয়ন্ত্রন করতে পারেন এবং সম্ভাব্যভাবে নির্দিষ্ট মিথস্ক্রিয়া বা নিয়ন্ত্রিত ফ্রেমের মধ্যে লোড করা বিষয়বস্তু দ্বারা শুরু করা অনুরোধগুলিকে বাধা দিতে পারেন, যেমন ডায়ালগগুলি খোলার প্রচেষ্টা, অনুমতির অনুরোধ করা বা নতুন উইন্ডো খোলার চেষ্টা৷
-
dialog: যখন এম্বেড করা বিষয়বস্তু একটি ডায়ালগ খোলার চেষ্টা করে (সতর্কতা, নিশ্চিতকরণ, প্রম্পট) তখন বহিস্কার করা হয়। আপনি বিস্তারিত পাবেন এবং প্রতিক্রিয়া জানাতে পারেন। -
consolemessage: ফ্রেমের মধ্যে কনসোলে একটি বার্তা লগ ইন করা হলে বহিস্কার করা হয়। -
permissionrequest: যখন এম্বেড করা বিষয়বস্তু অনুমতির অনুরোধ করে (উদাহরণস্বরূপ, ভূ-অবস্থান এবং বিজ্ঞপ্তি)। আপনি বিশদ বিবরণ পাবেন এবং অনুরোধের অনুমতি দিতে বা অস্বীকার করতে পারেন। -
newwindow: যখন এম্বেড করা বিষয়বস্তু একটি নতুন উইন্ডো বা ট্যাব খোলার চেষ্টা করে (উদাহরণস্বরূপ, window.open বাtarget="_blank"এর সাথে একটি লিঙ্ক) তখন বহিস্কার করা হয়। আপনি বিশদ বিবরণ পাবেন এবং ক্রিয়াটি পরিচালনা বা ব্লক করতে পারেন।
controlledframe.addEventListener('dialog', (event) => {
console.log(Dialog opened: Type=${event.messageType}, Message=${event.messageText});
// You will need to respond, e.g., event.dialog.ok() or .cancel()
});
controlledframe.addEventListener('consolemessage', (event) => {
console.log(Frame Console [${event.level}]: ${event.message});
});
controlledframe.addEventListener('permissionrequest', (event) => {
console.log(Permission requested: Type=${event.permission});
// You must respond, e.g., event.request.allow() or .deny()
console.warn('Permission request needs handling - Denying by default');
if (event.request && event.request.deny) {
event.request.deny();
}
});
controlledframe.addEventListener('newwindow', (event) => {
console.log(New window requested: URL=${event.targetUrl}, Name=${event.name});
// Decide how to handle this, e.g., open in a new controlled frame and call event.window.attach(), ignore, or block
console.warn('New window request needs handling - Blocking by default');
});
এছাড়াও রাষ্ট্রীয় পরিবর্তনের ইভেন্ট রয়েছে যা আপনাকে নিয়ন্ত্রিত ফ্রেমের নিজস্ব রেন্ডারিং অবস্থার সাথে সম্পর্কিত পরিবর্তনগুলি সম্পর্কে অবহিত করে, যেমন এর মাত্রা বা জুম স্তরে পরিবর্তন।
-
sizechanged: ফ্রেমের বিষয়বস্তুর মাত্রা পরিবর্তিত হলে ফায়ার করা হয়। -
zoomchange: ফ্রেমের বিষয়বস্তুর জুম লেভেল পরিবর্তিত হলে ফায়ার করা হয়।
controlledframe.addEventListener('sizechanged', (event) => {
console.log(Frame size changed: Width=${event.width}, Height=${event.height});
});
controlledframe.addEventListener('zoomchange', (event) => {
console.log(Frame zoom changed: Factor=${event.newZoomFactor});
});
স্টোরেজ পদ্ধতি : নিয়ন্ত্রিত ফ্রেমগুলি একটি ফ্রেমের পার্টিশনের মধ্যে সংরক্ষিত ডেটা পরিচালনার জন্য API অফার করে।
সমস্ত সঞ্চিত ডেটা অপসারণ করতে clearData() ব্যবহার করুন, যা ব্যবহারকারীর সেশনের পরে ফ্রেম রিসেট করার জন্য বা একটি পরিষ্কার অবস্থা নিশ্চিত করার জন্য বিশেষভাবে কার্যকর। পদ্ধতিটি একটি প্রতিশ্রুতি প্রদান করে যা অপারেশন সম্পূর্ণ হলে সমাধান করে। ঐচ্ছিক কনফিগারেশন বিকল্পগুলিও প্রদান করা যেতে পারে:
-
types: কোন ধরণের ডেটা সাফ করতে হবে তা নির্দিষ্ট করে স্ট্রিংগুলির একটি অ্যারে (উদাহরণস্বরূপ,['cookies', 'localStorage', 'indexedDB'])। বাদ দেওয়া হলে, সমস্ত প্রযোজ্য ডেটা প্রকারগুলি সাধারণত সাফ করা হয়। -
options: ক্লিয়ারিং প্রক্রিয়া নিয়ন্ত্রণ করুন, যেমন একটি সময় পরিসীমা নির্দিষ্ট করে একটি since প্রপার্টি ব্যবহার করে (যুগ থেকে মিলিসেকেন্ডে টাইমস্ট্যাম্প) শুধুমাত্র সেই সময়ের পরে তৈরি করা ডেটা সাফ করার জন্য।
উদাহরণ: নিয়ন্ত্রিত ফ্রেমের সাথে যুক্ত সমস্ত স্টোরেজ সাফ করুন
function clearAllPartitionData() {
console.log('Clearing all data for partition:', controlledframe.partition);
controlledframe.clearData()
.then(() => {
console.log('Partition data cleared successfully.');
})
.catch((error) => {
console.error('Error clearing partition data:', error);
});
}
উদাহরণ: শুধুমাত্র কুকিজ এবং স্থানীয় স্টোরেজ সাফ করুন যা গত ঘন্টায় তৈরি করা হয়েছে
function clearRecentCookiesAndStorage() {
const oneHourAgo = Date.now() - (60 * 60 * 1000);
const dataTypesArray = ['cookies', 'localStorage'];
const dataTypesToClearObject = {};
for (const type of dataTypesArray) {
dataTypesToClearObject[type] = true;
}
const clearOptions = { since: oneHourAgo };
console.log(`Clearing ${dataTypesArray.join(', ')} since ${new Date(oneHourAgo).toISOString()}`); controlledframe.clearData(clearOptions, dataTypesToClearObject) .then(() => {
console.log('Specified partition data cleared successfully.');
}).catch((error) => {
console.error('Error clearing specified partition data:', error);
});
}
প্রসারিত বা তৃতীয় পক্ষের অ্যাপ্লিকেশন পরিবর্তন
সাধারণ এম্বেডিংয়ের বাইরে, নিয়ন্ত্রিত ফ্রেমগুলি এম্বেড করা তৃতীয়-পক্ষের ওয়েব সামগ্রীর উপর নিয়ন্ত্রণ প্রয়োগ করার জন্য এম্বেডিং IWA-এর জন্য প্রক্রিয়াগুলি অফার করে। আপনি এম্বেড করা বিষয়বস্তুর মধ্যে স্ক্রিপ্টগুলি চালাতে পারেন, নেটওয়ার্ক অনুরোধগুলিকে আটকাতে পারেন এবং ডিফল্ট প্রসঙ্গ মেনুগুলিকে ওভাররাইড করতে পারেন—সবই একটি নিরাপদ, বিচ্ছিন্ন পরিবেশে।
কেস ব্যবহার করুন
- তৃতীয় পক্ষের সাইট জুড়ে ব্র্যান্ডিং কার্যকর করা : একটি ইউনিফাইড ভিজ্যুয়াল থিম প্রয়োগ করতে এমবেডেড ওয়েবসাইটগুলিতে কাস্টম CSS এবং জাভাস্ক্রিপ্ট ইনজেক্ট করুন।
- নেভিগেশন এবং লিঙ্ক আচরণ সীমাবদ্ধ করুন : স্ক্রিপ্ট ইনজেকশনের সাথে নির্দিষ্ট
<a>ট্যাগ আচরণকে আটকান বা অক্ষম করুন। - ক্র্যাশ বা নিষ্ক্রিয়তার পরে স্বয়ংক্রিয় পুনরুদ্ধার করুন : ব্যর্থতার অবস্থার জন্য এমবেড করা বিষয়বস্তু নিরীক্ষণ করুন (উদাহরণস্বরূপ, ফাঁকা স্ক্রীন, স্ক্রিপ্ট ত্রুটি) এবং একটি সময় শেষ হওয়ার পরে প্রোগ্রামেটিকভাবে পুনরায় লোড করুন বা পুনরায় সেট করুন।
কোড নমুনা
স্ক্রিপ্ট ইনজেকশন : নিয়ন্ত্রিত ফ্রেমে জাভাস্ক্রিপ্ট ইনজেকশন করতে executeScript() ব্যবহার করুন, আপনাকে আচরণ কাস্টমাইজ করতে, ওভারলে যোগ করতে বা এমবেড করা তৃতীয় পক্ষের পৃষ্ঠাগুলি থেকে ডেটা বের করতে দেয়। আপনি একটি স্ট্রিং হিসাবে ইনলাইন কোড প্রদান করতে পারেন বা এক বা একাধিক স্ক্রিপ্ট ফাইল উল্লেখ করতে পারেন (IWA প্যাকেজের মধ্যে আপেক্ষিক পাথ ব্যবহার করে)। পদ্ধতিটি একটি প্রতিশ্রুতি প্রদান করে যা স্ক্রিপ্টের সম্পাদনের ফলাফলের সমাধান করে - সাধারণত শেষ বিবৃতির মান।
document.getElementById('scriptBtn').addEventListener('click', () => {
controlledframe.executeScript({
code: `document.body.style.backgroundColor = 'lightblue';
document.querySelectorAll('a').forEach(link => link.style.pointerEvents = 'none');
document.title; // Return a value
`,
// You can also inject files:
// files: ['./injected_script.js'],
}) .then((result) => {
// The result of the last statement in the script is usually returned.
console.log('Script execution successful. Result (e.g., page title):', result); }).catch((error) => {
console.error('Script execution failed:', error);
});
});
স্টাইল ইনজেকশন : একটি নিয়ন্ত্রিত ফ্রেমের মধ্যে লোড করা পৃষ্ঠাগুলিতে কাস্টম শৈলী প্রয়োগ করতে insertCSS() ব্যবহার করুন।
document.getElementById('cssBtn').addEventListener('click', () => {
controlledframe.insertCSS({
code: `body { font-family: monospace; }`
// You can also inject files:
// files: ['./injected_styles.css']
})
.then(() => {
console.log('CSS injection successful.');
})
.catch((error) => {
console.error('CSS injection failed:', error);
});
});
নেটওয়ার্ক রিকোয়েস্ট ইন্টারসেপশন : এম্বেড করা পৃষ্ঠা থেকে নেটওয়ার্ক অনুরোধগুলি পর্যবেক্ষণ এবং সংশোধন করতে WebRequest API ব্যবহার করুন, যেমন অনুরোধ ব্লক করা, হেডার পরিবর্তন করা বা লগিং ব্যবহার।
// Get the request object
const webRequest = controlledframe.request;
// Create an interceptor for a specific URL pattern
const interceptor = webRequest.createWebRequestInterceptor({
urlPatterns: ["*://evil.com/*"],
blocking: true,
includeHeaders: "all"
});
// Add a listener to block the request
interceptor.addEventListener("beforerequest", (event) => {
console.log('Blocking request to:', event.url);
event.preventDefault();
});
// Add a listener to modify request headers
interceptor.addEventListener("beforesendheaders", (event) => {
console.log('Modifying headers for:', event.url);
const newHeaders = new Headers(event.headers);
newHeaders.append('X-Custom-Header', 'MyValue');
event.setRequestHeaders(newHeaders);
});
কাস্টম কনটেক্সট মেনু যোগ করা : এম্বেডেড ফ্রেমের মধ্যে কাস্টম রাইট-ক্লিক মেনু যোগ, অপসারণ এবং পরিচালনা করতে contextMenus API ব্যবহার করুন। এই উদাহরণটি দেখায় কিভাবে একটি নিয়ন্ত্রিত ফ্রেমের মধ্যে একটি কাস্টম "কপি নির্বাচন" মেনু যোগ করতে হয়। যখন পাঠ্য নির্বাচন করা হয় এবং ব্যবহারকারী ডান-ক্লিক করে, মেনু প্রদর্শিত হয়। এটিতে ক্লিক করা নির্বাচিত পাঠ্যটিকে ক্লিপবোর্ডে অনুলিপি করে, এমবেড করা সামগ্রীর মধ্যে সহজ, ব্যবহারকারী-বান্ধব মিথস্ক্রিয়া সক্ষম করে।
const menuItemProperties = {
id: "copy-selection",
title: "Copy selection",
contexts: ["selection"],
documentURLPatterns: [new URLPattern({ hostname: '*.example.com'})]
};
// Create the context menu item using a promise
try {
await controlledframe.contextMenus.create(menuItemProperties);
console.log(`Context menu item "${menuItemProperties.id}" created successfully.`);
} catch (error) {
console.error(`Failed to create context menu item:`, error);
}
// Add a standard event listener for the 'click' event
controlledframe.contextMenus.addEventListener('click', (event) => {
if (event.menuItemId === "copy-selection" && event.selectionText) {
navigator.clipboard.writeText(event.selectionText)
.then(() => console.log("Text copied to clipboard."))
.catch(err => console.error("Failed to copy text:", err));
}
});
ডেমো
নিয়ন্ত্রিত ফ্রেমগুলির পদ্ধতিগুলির একটি ওভারভিউয়ের জন্য নিয়ন্ত্রিত ফ্রেম ডেমোটি দেখুন।
বিকল্পভাবে, IWA কিচেন সিঙ্ক , একাধিক ট্যাব সহ একটি অ্যাপ বৈশিষ্ট্যযুক্ত, প্রতিটি একটি ভিন্ন IWA API যেমন নিয়ন্ত্রিত ফ্রেম, সরাসরি সকেট এবং আরও অনেক কিছু প্রদর্শন করে।
উপসংহার
নিয়ন্ত্রিত ফ্রেমগুলি আইসোলেটেড ওয়েব অ্যাপস (IWAs) এ তৃতীয় পক্ষের ওয়েব সামগ্রী এম্বেড, প্রসারিত এবং ইন্টারঅ্যাক্ট করার একটি শক্তিশালী এবং নিরাপদ উপায় অফার করে৷ আইফ্রেমের সীমাবদ্ধতা অতিক্রম করে, তারা নতুন ক্ষমতা সক্ষম করে যেমন এমবেড করা বিষয়বস্তুর ভিতরে স্ক্রিপ্ট চালানো, নেটওয়ার্ক অনুরোধে বাধা দেওয়া এবং কাস্টম প্রসঙ্গ মেনু প্রয়োগ করা—সবকিছুই কঠোর বিচ্ছিন্নতা সীমানা বজায় রেখে। যাইহোক, যেহেতু এই API গুলি এম্বেড করা বিষয়বস্তুর উপর গভীর নিয়ন্ত্রণ অফার করে, তাই এগুলি অতিরিক্ত নিরাপত্তা সীমাবদ্ধতার সাথে আসে এবং শুধুমাত্র IWA-এর মধ্যে উপলব্ধ, যা ব্যবহারকারী এবং বিকাশকারী উভয়ের জন্যই শক্তিশালী গ্যারান্টি প্রয়োগ করার জন্য ডিজাইন করা হয়েছে। বেশিরভাগ ব্যবহারের ক্ষেত্রে, বিকাশকারীদের প্রথমে স্ট্যান্ডার্ড <iframe> উপাদানগুলি ব্যবহার করার কথা বিবেচনা করা উচিত, যা অনেক পরিস্থিতিতে সহজ এবং যথেষ্ট। নিয়ন্ত্রিত ফ্রেমগুলিকে মূল্যায়ন করা উচিত যখন iframe-ভিত্তিক সমাধানগুলি এমবেডিং বিধিনিষেধ দ্বারা অবরুদ্ধ করা হয় বা প্রয়োজনীয় নিয়ন্ত্রণ এবং মিথস্ক্রিয়া ক্ষমতার অভাব থাকে৷ আপনি কিওস্ক অভিজ্ঞতা তৈরি করছেন, তৃতীয় পক্ষের সরঞ্জামগুলিকে একীভূত করছেন বা মডুলার প্লাগইন সিস্টেমগুলি ডিজাইন করছেন, নিয়ন্ত্রিত ফ্রেমগুলি একটি কাঠামোগত, অনুমতিপ্রাপ্ত এবং সুরক্ষিত পরিবেশে সূক্ষ্ম-দানাযুক্ত নিয়ন্ত্রণ সক্ষম করে—এগুলিকে পরবর্তী প্রজন্মের উন্নত ওয়েব অ্যাপ্লিকেশনগুলিতে একটি গুরুত্বপূর্ণ হাতিয়ার করে তোলে৷