জাভাস্ক্রিপ্ট ব্যবহার করে কিভাবে নতুন ট্যাবে URL খুলবেন
একটি নতুন ট্যাবে URL খোলা অনেক ওয়েব ডেভেলপারদের জন্য একটি সাধারণ প্রয়োজন। যদিও জাভাস্ক্রিপ্ট পদ্ধতি `window.open(url, '_blank');` ব্যাপকভাবে প্রস্তাবিত, এটি প্রায়ই একটি নতুন ট্যাবের পরিবর্তে একটি পপআপ উইন্ডোতে পরিণত হয়, যা হতাশাজনক হতে পারে।
এই নিবন্ধটি একটি নতুন ট্যাবে একটি URL খোলার চেষ্টা করার সময় সম্মুখীন হওয়া চ্যালেঞ্জগুলি অন্বেষণ করে এবং পছন্দসই আচরণ নিশ্চিত করার জন্য ব্যবহারিক সমাধান প্রদান করে৷ ব্রাউজারের আচরণ এবং জাভাস্ক্রিপ্টের সঠিক ব্যবহার বোঝার মাধ্যমে, আপনি বিভিন্ন ব্রাউজারে সামঞ্জস্যপূর্ণ ফলাফল অর্জন করতে পারেন।
| আদেশ | বর্ণনা |
|---|---|
| <a href="URL" target="_blank"></a> | HTML অ্যাঙ্কর ট্যাগ একটি নতুন ট্যাবে একটি লিঙ্ক খুলতে ব্যবহৃত হয়। |
| window.open(url, '_blank'); | একটি নতুন ব্রাউজার উইন্ডো বা ট্যাব খুলতে JavaScript পদ্ধতি। |
| win.focus(); | নতুন উইন্ডো বা ট্যাব ফোকাসে আনতে জাভাস্ক্রিপ্ট পদ্ধতি। |
| onclick="function()" | জাভাস্ক্রিপ্ট অ্যাট্রিবিউট একটি স্ক্রিপ্ট চালানোর জন্য যখন একটি উপাদান ক্লিক করা হয়. |
| $('#element').click(function() {...}); | একটি উপাদানের ক্লিক ইভেন্টে একটি ইভেন্ট হ্যান্ডলারকে আবদ্ধ করার জন্য jQuery পদ্ধতি। |
| window.open('URL', '_blank').focus(); | একটি নতুন ট্যাবে একটি URL খুলতে এবং এটিতে ফোকাস করার জন্য jQuery সম্মিলিত পদ্ধতি। |
নতুন ট্যাবে URL খোলার জন্য জাভাস্ক্রিপ্ট কৌশল বোঝা
প্রদত্ত স্ক্রিপ্টগুলি জাভাস্ক্রিপ্ট এবং jQuery ব্যবহার করে নতুন ট্যাবে URL খোলার বিভিন্ন উপায় প্রদর্শন করে৷ প্রথম উদাহরণটি বৈশিষ্ট্য সহ একটি সাধারণ HTML অ্যাঙ্কর ট্যাগ ব্যবহার করে target="_blank". এটি একটি নতুন ট্যাবে একটি লিঙ্ক খোলার সবচেয়ে সহজ উপায়, এবং এটি জাভাস্ক্রিপ্টের পরিবর্তে HTML এর উপর নির্ভর করে৷ সেট করে target বৈশিষ্ট্য "_blank", ব্রাউজারকে বর্তমান উইন্ডো বা একটি নতুন উইন্ডোর পরিবর্তে একটি নতুন ট্যাবে লিঙ্কটি খুলতে নির্দেশ দেওয়া হয়েছে।
দ্বিতীয় উদাহরণটি একটি বোতাম উপাদান সহ খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে। দ্য window.open(url, '_blank') পদ্ধতি একটি মধ্যে বলা হয় onclick ইভেন্ট হ্যান্ডলার বোতামের সাথে সংযুক্ত। এই পদ্ধতিটি প্রোগ্রাম্যাটিকভাবে একটি নতুন ট্যাবে নির্দিষ্ট URL খোলে এবং এর সাথে ফোকাসে নিয়ে আসে win.focus() পদ্ধতি এই পদ্ধতিটি প্রায়শই এমন পরিস্থিতিতে ব্যবহৃত হয় যেখানে ব্যবহারকারীর ক্রিয়াকলাপের উপর ভিত্তি করে নতুন ট্যাবে লিঙ্কগুলি খোলার প্রয়োজন হয়, যেমন HTML এ স্ট্যাটিক লিঙ্কগুলির পরিবর্তে একটি বোতামে ক্লিক করা।
নতুন ট্যাবে উন্নত URL পরিচালনার জন্য jQuery ব্যবহার করা
তৃতীয় উদাহরণটি কম কোড এবং আরও বহুমুখিতা সহ অনুরূপ কার্যকারিতা অর্জনের জন্য jQuery-কে অন্তর্ভুক্ত করে। jQuery $('#openTab').click(function() {...}); পদ্ধতিটি একটি ক্লিক ইভেন্ট হ্যান্ডলারকে আইডি সহ বোতামের সাথে আবদ্ধ করে openTab. বোতামটি ক্লিক করা হলে, window.open('https://www.example.com', '_blank').focus(); কমান্ড কার্যকর করা হয়। এই পদ্ধতিটি একটি নতুন ট্যাবে ইউআরএল খোলার এবং নতুন ট্যাবটিকে ফোকাসে আনার সমন্বয় করে, বিশুদ্ধ জাভাস্ক্রিপ্ট উদাহরণের মতো কিন্তু jQuery-এর সিনট্যাক্স এবং ইভেন্ট হ্যান্ডলিং ক্ষমতার অতিরিক্ত সুবিধার সাথে।
jQuery ব্যবহার করে ইভেন্ট পরিচালনাকে সহজ করতে পারে এবং ডেভেলপারদের জন্য আরও নমনীয়তা প্রদান করতে পারে, বিশেষ করে যখন গতিশীল বিষয়বস্তু বা একই ধরনের কার্যকারিতা প্রয়োজন এমন একাধিক উপাদান নিয়ে কাজ করা হয়। সামগ্রিকভাবে, এই উদাহরণগুলি দেখায় যে কীভাবে কার্যকরভাবে HTML, JavaScript এবং jQuery ব্যবহার করতে হয় নতুন ট্যাবে URL খুলতে, একটি ভাল ব্যবহারকারীর অভিজ্ঞতা এবং বিভিন্ন ব্রাউজারে সামঞ্জস্যপূর্ণ আচরণ নিশ্চিত করে৷
JavaScript এবং HTML ব্যবহার করে নতুন ট্যাবে URL খোলা
HTML অ্যাঙ্কর ট্যাগ সহ জাভাস্ক্রিপ্ট
<!DOCTYPE html><html><head><title>Open URL in New Tab</title></head><body><a href="https://www.example.com" target="_blank">Open Example.com in a new tab</a></body></html>
প্রোগ্রামগতভাবে নতুন ট্যাবে URL খুলতে JavaScript ব্যবহার করা
নতুন ট্যাবে URL খুলতে JavaScript কোড
<!DOCTYPE html><html><head><title>Open URL in New Tab</title><script>function openInNewTab(url) {var win = window.open(url, '_blank');win.focus();}</script></head><body><button onclick="openInNewTab('https://www.example.com')">Open Example.com in a new tab</button></body></html>
নতুন ট্যাবে URL খোলার জন্য jQuery ব্যবহার করা
jQuery বাস্তবায়ন
<!DOCTYPE html><html><head><title>Open URL in New Tab</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body><button id="openTab">Open Example.com in a new tab</button><script>$('#openTab').click(function() {window.open('https://www.example.com', '_blank').focus();});</script></body></html>
নতুন ট্যাবে URL খোলার জন্য উন্নত কৌশল
যদিও মৌলিক পদ্ধতি পছন্দ target="_blank" এবং window.open(url, '_blank') নতুন ট্যাবে ইউআরএল খোলার জন্য বেশিরভাগ পরিস্থিতি কভার করে, বিবেচনা করার জন্য আরও উন্নত কৌশল রয়েছে। এরকম একটি কৌশল ইভেন্ট শ্রোতাদের ব্যবহার করে এবং অ্যাঙ্কর ট্যাগের ডিফল্ট অ্যাকশন প্রতিরোধ করে। এই পদ্ধতিটি ব্যবহারকারীর অভিজ্ঞতার উপর বৃহত্তর নিয়ন্ত্রণ প্রদান করে এবং একক-পৃষ্ঠার অ্যাপ্লিকেশন (এসপিএ) বা গতিশীল বিষয়বস্তু পরিচালনা করার সময় বিশেষভাবে উপযোগী হতে পারে।
বিবেচনা করার আরেকটি দিক হল ব্রাউজার-নির্দিষ্ট আচরণ পরিচালনা করা। বিভিন্ন ব্রাউজার ব্যাখ্যা করতে পারে window.open কমান্ড ভিন্নভাবে, কখনও কখনও একটি নতুন ট্যাবের পরিবর্তে একটি নতুন উইন্ডোতে পরিণত হয়। এটি মোকাবেলার জন্য, বিকাশকারীরা বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করতে পারে এবং শর্তসাপেক্ষে ব্যবহারকারীর ব্রাউজারের উপর ভিত্তি করে পদ্ধতি প্রয়োগ করতে পারে। এটি বিভিন্ন পরিবেশ জুড়ে একটি সামঞ্জস্যপূর্ণ অভিজ্ঞতা নিশ্চিত করে। উপরন্তু, পপ-আপ ব্লকার পরিচালনা করা অপরিহার্য, কারণ অনেক ব্রাউজার ডিফল্টরূপে পপ-আপ ব্লক করে, যা নতুন ট্যাব খোলার ক্ষেত্রে হস্তক্ষেপ করতে পারে।
নতুন ট্যাবে URL খোলার বিষয়ে প্রায়শই জিজ্ঞাসিত প্রশ্ন
- আমি কিভাবে নিশ্চিত করতে পারি যে একটি URL একটি নতুন ট্যাবে খোলে, একটি নতুন উইন্ডো নয়?
- ব্যবহার করুন window.open(url, '_blank').focus() এবং নিশ্চিত করুন যে পপ-আপ ব্লকাররা হস্তক্ষেপ করছে না।
- আমি কি ব্যবহারকারীর ইন্টারঅ্যাকশন ছাড়াই একটি নতুন ট্যাবে একটি URL খুলতে পারি?
- বেশিরভাগ ব্রাউজার নিরাপত্তার কারণে এটি ব্লক করে। ব্যবহারকারীর মিথস্ক্রিয়া, যেমন একটি বোতামে ক্লিক করা প্রয়োজন।
- পপ-আপগুলি ব্লক করে এমন ব্রাউজারগুলিকে আমি কীভাবে পরিচালনা করব?
- পপ-আপ ব্লকার অক্ষম করতে বা ব্যতিক্রম তালিকায় আপনার সাইট যোগ করতে ব্যবহারকারীদের জানান।
- পার্থক্য কি target="_blank" এবং window.open?
- target="_blank" লিঙ্কের জন্য একটি HTML বৈশিষ্ট্য, যখন window.open গতিশীল কর্মের জন্য একটি জাভাস্ক্রিপ্ট পদ্ধতি।
- একটি নতুন ট্যাবে একটি URL খুলতে আমি কিভাবে jQuery ব্যবহার করব?
- ব্যবহার করে একটি ক্লিক ইভেন্ট বাঁধাই $('#element').click(function() { window.open(url, '_blank').focus(); });
- আমি কি একই সাথে নতুন ট্যাবে একাধিক URL খুলতে পারি?
- হ্যাঁ, ফোন করে window.open একটি লুপ বা পৃথক ফাংশন কল একাধিক বার.
- কেন window.open কখনও কখনও একটি ট্যাবের পরিবর্তে একটি নতুন উইন্ডো খুলুন?
- ব্রাউজার সেটিংস এবং আচরণ এই কারণ হতে পারে. বিভিন্ন ব্রাউজারে পরীক্ষা করুন এবং সেই অনুযায়ী সামঞ্জস্য করুন।
- আমি কিভাবে নিশ্চিত করব যে নতুন ট্যাব ফোকাস করছে?
- ব্যবহার করুন win.focus() পরে window.open ট্যাবটিকে অগ্রভাগে আনতে।
নতুন ট্যাবে ইউআরএল খোলার জন্য জাভাস্ক্রিপ্ট টেকনিকের সারসংক্ষেপ
উপসংহারে বলা যায়, নতুন ট্যাবে ইউআরএল খোলার কাজটি বিভিন্ন পদ্ধতির মাধ্যমে করা যেতে পারে, সাধারণ এইচটিএমএল অ্যাট্রিবিউট থেকে শুরু করে আরও উন্নত জাভাস্ক্রিপ্ট এবং jQuery কৌশল। ব্যবহার target="_blank" স্ট্যাটিক লিঙ্কের জন্য সহজবোধ্য, যখন window.open(url, '_blank') ইন্টারেক্টিভ উপাদানগুলির জন্য গতিশীল নিয়ন্ত্রণ প্রদান করে। এই পদ্ধতিগুলি বোঝা এবং প্রয়োগ করার মাধ্যমে, বিকাশকারীরা বিভিন্ন ব্রাউজার জুড়ে একটি নিরবচ্ছিন্ন ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করতে পারে এবং পপ-আপ ব্লকারের মতো সম্ভাব্য সমস্যাগুলি পরিচালনা করতে পারে।