JavaScript ഉപയോഗിച്ച് പുതിയ ടാബുകളിൽ URL-കൾ എങ്ങനെ തുറക്കാം
ഒരു പുതിയ ടാബിൽ URL-കൾ തുറക്കുക എന്നത് പല വെബ് ഡെവലപ്പർമാരുടെയും ഒരു സാധാരണ ആവശ്യകതയാണ്. JavaScript രീതി `window.open(url, '_blank');` എന്നത് പരക്കെ നിർദ്ദേശിക്കപ്പെടുന്നുണ്ടെങ്കിലും, ഇത് പലപ്പോഴും ഒരു പുതിയ ടാബിനേക്കാൾ ഒരു പോപ്പ്അപ്പ് വിൻഡോയിൽ കലാശിക്കുന്നു, അത് നിരാശാജനകമായേക്കാം.
ഈ ലേഖനം ഒരു പുതിയ ടാബിൽ ഒരു URL തുറക്കാൻ ശ്രമിക്കുമ്പോൾ നേരിടുന്ന വെല്ലുവിളികൾ പര്യവേക്ഷണം ചെയ്യുകയും ആവശ്യമുള്ള സ്വഭാവം ഉറപ്പാക്കുന്നതിനുള്ള പ്രായോഗിക പരിഹാരങ്ങൾ നൽകുകയും ചെയ്യുന്നു. ബ്രൗസർ പെരുമാറ്റങ്ങളും JavaScript-ൻ്റെ ശരിയായ ഉപയോഗവും മനസ്സിലാക്കുന്നതിലൂടെ, വ്യത്യസ്ത ബ്രൗസറുകളിലുടനീളം നിങ്ങൾക്ക് സ്ഥിരമായ ഫലങ്ങൾ നേടാനാകും.
| കമാൻഡ് | വിവരണം |
|---|---|
| <a href="URL" target="_blank"></a> | ഒരു പുതിയ ടാബിൽ ഒരു ലിങ്ക് തുറക്കാൻ ഉപയോഗിക്കുന്ന HTML ആങ്കർ ടാഗ്. |
| window.open(url, '_blank'); | ഒരു പുതിയ ബ്രൗസർ വിൻഡോ അല്ലെങ്കിൽ ടാബ് തുറക്കുന്നതിനുള്ള JavaScript രീതി. |
| win.focus(); | പുതിയ വിൻഡോ അല്ലെങ്കിൽ ടാബ് ഫോക്കസിലേക്ക് കൊണ്ടുവരുന്നതിനുള്ള JavaScript രീതി. |
| onclick="function()" | ഒരു ഘടകത്തിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ ഒരു സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യുന്നതിനുള്ള JavaScript ആട്രിബ്യൂട്ട്. |
| $('#element').click(function() {...}); | ഒരു എലമെൻ്റിൻ്റെ ക്ലിക്ക് ഇവൻ്റുമായി ഇവൻ്റ് ഹാൻഡ്‌ലറെ ബന്ധിപ്പിക്കുന്നതിനുള്ള jQuery രീതി. |
| window.open('URL', '_blank').focus(); | ഒരു പുതിയ ടാബിൽ ഒരു URL തുറന്ന് അതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നതിനുള്ള jQuery സംയോജിത രീതി. |
പുതിയ ടാബുകളിൽ URL-കൾ തുറക്കുന്നതിനുള്ള JavaScript ടെക്നിക്കുകൾ മനസ്സിലാക്കുന്നു
നൽകിയിരിക്കുന്ന സ്ക്രിപ്റ്റുകൾ JavaScript, jQuery എന്നിവ ഉപയോഗിച്ച് പുതിയ ടാബുകളിൽ URL-കൾ തുറക്കുന്നതിനുള്ള വിവിധ മാർഗങ്ങൾ കാണിക്കുന്നു. ആദ്യ ഉദാഹരണം ആട്രിബ്യൂട്ടിനൊപ്പം ഒരു ലളിതമായ HTML ആങ്കർ ടാഗ് ഉപയോഗിക്കുന്നു target="_blank". ഒരു പുതിയ ടാബിൽ ഒരു ലിങ്ക് തുറക്കുന്നതിനുള്ള ഏറ്റവും ലളിതമായ മാർഗമാണിത്, ഇത് ജാവാസ്ക്രിപ്റ്റിനേക്കാൾ HTML-നെ ആശ്രയിക്കുന്നു. സജ്ജീകരിക്കുന്നതിലൂടെ target കടപ്പാട് "_blank", നിലവിലെ വിൻഡോ അല്ലെങ്കിൽ പുതിയ വിൻഡോയ്ക്ക് പകരം ഒരു പുതിയ ടാബിൽ ലിങ്ക് തുറക്കാൻ ബ്രൗസറിന് നിർദ്ദേശം നൽകിയിട്ടുണ്ട്.
രണ്ടാമത്തെ ഉദാഹരണം ഒരു ബട്ടൺ ഘടകത്തോടുകൂടിയ ശുദ്ധമായ JavaScript ഉപയോഗിക്കുന്നു. ദി 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(); കമാൻഡ് എക്സിക്യൂട്ട് ചെയ്യുന്നു. ഈ രീതി ഒരു പുതിയ ടാബിൽ URL തുറക്കുന്നതും പുതിയ ടാബ് ഫോക്കസിലേക്ക് കൊണ്ടുവരുന്നതും സംയോജിപ്പിക്കുന്നു, ശുദ്ധമായ ജാവാസ്ക്രിപ്റ്റ് ഉദാഹരണത്തിന് സമാനമാണ്, എന്നാൽ jQuery യുടെ വാക്യഘടനയുടെയും ഇവൻ്റ് കൈകാര്യം ചെയ്യുന്നതിനുള്ള കഴിവുകളുടെയും അധിക സൗകര്യവും.
jQuery ഉപയോഗിക്കുന്നതിലൂടെ ഇവൻ്റ് കൈകാര്യം ചെയ്യൽ ലളിതമാക്കാനും ഡെവലപ്പർമാർക്ക് കൂടുതൽ വഴക്കം നൽകാനും കഴിയും, പ്രത്യേകിച്ചും ഡൈനാമിക് ഉള്ളടക്കം അല്ലെങ്കിൽ സമാനമായ പ്രവർത്തനം ആവശ്യമുള്ള ഒന്നിലധികം ഘടകങ്ങൾ കൈകാര്യം ചെയ്യുമ്പോൾ. മൊത്തത്തിൽ, പുതിയ ടാബുകളിൽ URL-കൾ തുറക്കുന്നതിന് HTML, JavaScript, jQuery എന്നിവ എങ്ങനെ ഫലപ്രദമായി ഉപയോഗിക്കാമെന്ന് ഈ ഉദാഹരണങ്ങൾ കാണിക്കുന്നു, വ്യത്യസ്ത ബ്രൗസറുകളിലുടനീളം മികച്ച ഉപയോക്തൃ അനുഭവവും സ്ഥിരമായ പെരുമാറ്റവും ഉറപ്പാക്കുന്നു.
JavaScript, HTML എന്നിവ ഉപയോഗിച്ച് പുതിയ ടാബുകളിൽ URL-കൾ തുറക്കുന്നു
HTML ആങ്കർ ടാഗുകളുള്ള JavaScript
<!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') പുതിയ ടാബുകളിൽ URL-കൾ തുറക്കുന്നതിനുള്ള മിക്ക സാഹചര്യങ്ങളും ഉൾക്കൊള്ളുന്നു, കൂടുതൽ വിപുലമായ സാങ്കേതിക വിദ്യകൾ പരിഗണിക്കേണ്ടതുണ്ട്. ഇവൻ്റ് ലിസണർമാരെ ഉപയോഗിക്കുന്നതും ആങ്കർ ടാഗുകളുടെ ഡിഫോൾട്ട് പ്രവർത്തനം തടയുന്നതും അത്തരത്തിലുള്ള ഒരു സാങ്കേതികതയിൽ ഉൾപ്പെടുന്നു. ഈ രീതി ഉപയോക്തൃ അനുഭവത്തിൽ കൂടുതൽ നിയന്ത്രണം നൽകുന്നു, ഒറ്റ പേജ് ആപ്ലിക്കേഷനുകളിൽ (SPAs) അല്ലെങ്കിൽ ഡൈനാമിക് ഉള്ളടക്കം കൈകാര്യം ചെയ്യുമ്പോൾ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാകും.
പരിഗണിക്കേണ്ട മറ്റൊരു വശം ബ്രൗസർ-നിർദ്ദിഷ്ട സ്വഭാവങ്ങൾ കൈകാര്യം ചെയ്യുക എന്നതാണ്. വ്യത്യസ്ത ബ്രൗസറുകൾ വ്യാഖ്യാനിച്ചേക്കാം window.open വ്യത്യസ്‌തമായി കമാൻഡ് ചെയ്യുക, ചിലപ്പോൾ ഒരു പുതിയ ടാബിന് പകരം ഒരു പുതിയ ജാലകം ലഭിക്കും. ഇത് പരിഹരിക്കുന്നതിന്, ഡവലപ്പർമാർക്ക് ഫീച്ചർ കണ്ടെത്തൽ ഉപയോഗിക്കാനും ഉപയോക്താവിൻ്റെ ബ്രൗസറിനെ അടിസ്ഥാനമാക്കിയുള്ള രീതികൾ സോപാധികമായി പ്രയോഗിക്കാനും കഴിയും. ഇത് വിവിധ പരിതസ്ഥിതികളിൽ സ്ഥിരതയുള്ള അനുഭവം ഉറപ്പാക്കുന്നു. കൂടാതെ, പോപ്പ്-അപ്പ് ബ്ലോക്കറുകൾ കൈകാര്യം ചെയ്യുന്നത് അത്യന്താപേക്ഷിതമാണ്, കാരണം പല ബ്രൗസറുകളും ഡിഫോൾട്ടായി പോപ്പ്-അപ്പുകൾ തടയുന്നു, ഇത് പുതിയ ടാബുകൾ തുറക്കുന്നതിൽ ഇടപെടും.
പുതിയ ടാബുകളിൽ URL-കൾ തുറക്കുന്നതിനെക്കുറിച്ച് പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ
- ഒരു URL പുതിയ ടാബിൽ തുറക്കുന്നുവെന്ന് എനിക്ക് എങ്ങനെ ഉറപ്പാക്കാനാകും, പുതിയ വിൻഡോയല്ല?
- ഉപയോഗിക്കുക window.open(url, '_blank').focus() പോപ്പ്-അപ്പ് ബ്ലോക്കറുകൾ ഇടപെടുന്നില്ലെന്ന് ഉറപ്പാക്കുക.
- ഉപയോക്തൃ ഇടപെടൽ കൂടാതെ എനിക്ക് ഒരു പുതിയ ടാബിൽ ഒരു URL തുറക്കാനാകുമോ?
- സുരക്ഷാ കാരണങ്ങളാൽ മിക്ക ബ്രൗസറുകളും ഇത് തടയുന്നു. ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്യുന്നത് പോലെയുള്ള ഉപയോക്തൃ ഇടപെടൽ ആവശ്യമാണ്.
- പോപ്പ്-അപ്പുകൾ തടയുന്ന ബ്രൗസറുകൾ എങ്ങനെ കൈകാര്യം ചെയ്യാം?
- പോപ്പ്-അപ്പ് ബ്ലോക്കറുകൾ പ്രവർത്തനരഹിതമാക്കാൻ ഉപയോക്താക്കളെ അറിയിക്കുക അല്ലെങ്കിൽ ഒഴിവാക്കൽ ലിസ്റ്റിലേക്ക് നിങ്ങളുടെ സൈറ്റ് ചേർക്കുക.
- എന്താണ് തമ്മിലുള്ള വ്യത്യാസം target="_blank" ഒപ്പം window.open?
- target="_blank" ലിങ്കുകൾക്കായുള്ള ഒരു HTML ആട്രിബ്യൂട്ട് ആണ് window.open ചലനാത്മക പ്രവർത്തനങ്ങൾക്കുള്ള ഒരു JavaScript രീതിയാണ്.
- ഒരു പുതിയ ടാബിൽ ഒരു URL തുറക്കാൻ ഞാൻ എങ്ങനെ jQuery ഉപയോഗിക്കും?
- ഉപയോഗിച്ച് ഒരു ക്ലിക്ക് ഇവൻ്റ് ബൈൻഡ് ചെയ്യുക $('#element').click(function() { window.open(url, '_blank').focus(); });
- എനിക്ക് പുതിയ ടാബുകളിൽ ഒന്നിലധികം URL-കൾ ഒരേസമയം തുറക്കാനാകുമോ?
- അതെ, വിളിച്ചുകൊണ്ട് window.open ഒരു ലൂപ്പിലോ പ്രത്യേക ഫംഗ്‌ഷൻ കോളുകളിലോ ഒന്നിലധികം തവണ.
- എന്തുകൊണ്ട് ചെയ്യുന്നു window.open ചിലപ്പോൾ ടാബിന് പകരം പുതിയ വിൻഡോ തുറക്കുമോ?
- ബ്രൗസർ ക്രമീകരണങ്ങളും പെരുമാറ്റവും ഇതിന് കാരണമാകാം. വ്യത്യസ്ത ബ്രൗസറുകളിൽ പരീക്ഷിച്ച് അതിനനുസരിച്ച് ക്രമീകരിക്കുക.
- പുതിയ ടാബ് ഫോക്കസ് ചെയ്തിട്ടുണ്ടെന്ന് ഞാൻ എങ്ങനെ ഉറപ്പാക്കും?
- ഉപയോഗിക്കുക win.focus() ശേഷം window.open ടാബ് മുൻവശത്തേക്ക് കൊണ്ടുവരാൻ.
പുതിയ ടാബുകളിൽ URL-കൾ തുറക്കുന്നതിനുള്ള JavaScript ടെക്നിക്കുകൾ സംഗ്രഹിക്കുന്നു
ഉപസംഹാരമായി, പുതിയ ടാബുകളിൽ URL-കൾ തുറക്കുന്നത് ലളിതമായ HTML ആട്രിബ്യൂട്ടുകൾ മുതൽ കൂടുതൽ നൂതനമായ JavaScript, jQuery ടെക്നിക്കുകൾ വരെ വിവിധ രീതികളിലൂടെ നേടാനാകും. ഉപയോഗിക്കുന്നത് target="_blank" സ്റ്റാറ്റിക് ലിങ്കുകൾക്ക് നേരെയുള്ളതാണ്, അതേസമയം window.open(url, '_blank') സംവേദനാത്മക ഘടകങ്ങൾക്ക് ചലനാത്മക നിയന്ത്രണം നൽകുന്നു. ഈ രീതികൾ മനസ്സിലാക്കുകയും നടപ്പിലാക്കുകയും ചെയ്യുന്നതിലൂടെ, വിവിധ ബ്രൗസറുകളിൽ ഉടനീളം തടസ്സമില്ലാത്ത ഉപയോക്തൃ അനുഭവം ഡെവലപ്പർമാർക്ക് ഉറപ്പാക്കാനും പോപ്പ്-അപ്പ് ബ്ലോക്കറുകൾ പോലുള്ള സാധ്യതയുള്ള പ്രശ്നങ്ങൾ കൈകാര്യം ചെയ്യാനും കഴിയും.