मैं एक नई विंडो में एक लिंक कैसे खोल सकता हूं?


94

मेरे पास एक विशिष्ट लिंक के लिए एक क्लिक हैंडलर है, जिसके अंदर मैं निम्नलिखित के समान कुछ करना चाहता हूं:

window.location = url

मुझे वास्तव में एक नई विंडो में url खोलने के लिए इसकी आवश्यकता है, हालांकि, मैं यह कैसे करूं?

जवाबों:


204

आप पसंद कर सकते हैं:

window.open('url', 'window name', 'window settings')

jQuery:

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

तुम भी सेट कर सकते हैं targetकरने के लिए _blankवास्तव में।


लेकिन यह jquery कोड स्वचालित रूप से लक्ष्य पर नेविगेट नहीं करेगा
अमृत ​​एल्गरहि

26
_blank डिफॉल्ट टारगेट है, इसलिए window.open (url) का उपयोग करना चाहिए
themerlinproject

निश्चित रूप से मदद नहीं मिलेगी और ठीक उसी मुद्दे पर नहीं, लेकिन मैं एक फ़ाइल को डाउनलोड करने के लिए एक ही समाधान खोज रहा था (लिंक से नहीं बल्कि एक बटन) और क्रोम पर विंडो नहीं खुली और तब तक कोई डाउनलोड नहीं हुआ जब तक कि मैं बस window.location में परिवर्तित नहीं होता = 'url' जो स्थान नहीं बदलता है, लेकिन फ़ाइल डाउनलोड करें ...
gdoumenc

window.open (url) ठीक है :)
fudu

33

एक क्लिक हैंडलर के अंदर लक्ष्य को बल देने का तरीका यहां दिया गया है:

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});

5
क्लिक हैंडलर में jQuery चयनकर्ता का उपयोग करने की कोई आवश्यकता नहीं है इसलिए लाइन $(this).attr('target', '_blank'); को भी बदला जा सकता है this.target = "_blank";, यदि पृष्ठ पर एंकर लिंक को rel="external"विशेषताओं के लिए संशोधित किया जा सकता है तो आप पेज के लिए jQuery चयनकर्ता के a[rel="external"]बजाय एक वैश्विक क्लिक हैंडलर बना सकते हैं क्लिक करें हैंडलर प्रति लिंक के साथ चयनितa#link_id
himanshu

17

आपको उपयोग करने की आवश्यकता होगी window.open(url);

संदर्भ:
http://www.htmlcodetutorial.com/linking/linking_famsupp_120.html
http://www.w3schools.com/jsref/met_win_open.asp


5
ओह! W3schools का उपयोग या लिंक न करें, यह W3C से संबद्ध नहीं है। इसके बजाय MDN का उपयोग करें: developer.mozilla.org/en-US/docs/Web/API/Window.open
AB कैरोल

5
w3schools अच्छा है ('कुछ' w3c ट्रोल को नजरअंदाज करें) ... AN आधिकारिक स्रोत बना रहेगा ... यहां तक ​​कि w3c अब इसे फिर से समर्थन कर रहा है ;-)
Dawesi

4

आप इसके लिए jquery प्रोप () विधि का भी उपयोग कर सकते हैं।

$(function(){
  $('yourselector').prop('target', '_blank');
}); 

2

मुझे इस मुद्दे का एक दिलचस्प समाधान मिला। मैं ऐसे स्पैन बना रहा था जिनमें वेब सेवा से वापसी के आधार पर जानकारी होती है। मैंने स्पैन के चारों ओर एक लिंक लगाने की कोशिश करने के बारे में सोचा ताकि अगर मैंने उस पर क्लिक किया, तो "ए" क्लिक को कैप्चर करेगा।

लेकिन मैं स्पैन के साथ क्लिक पर कब्जा करने की कोशिश कर रहा था ... तो मैंने सोचा कि जब मैंने स्पैन बनाया तो ऐसा क्यों नहीं किया।

var span = $('<span id="something" data-href="'+url+'" />');

मैंने तब एक क्लिक हैंडलर को उस अवधि के लिए बाध्य किया, जिसने 'डेटा-href' विशेषता के आधार पर एक लिंक बनाया:

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

इसने मुझे सफलतापूर्वक एक स्पैन पर क्लिक करने और एक उचित url के साथ एक नई विंडो खोलने की अनुमति दी।



1

इस समाधान ने भी इस मामले पर विचार किया कि url खाली और अक्षम (ग्रे) खाली लिंक है।

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>


0

जागरूक रहें यदि आप क्लिक इवेंट के लिए इवेंट हैंडलर फ़ंक्शन के अंदर AJAX अनुरोधों को निष्पादित करना चाहते हैं । किसी कारण से Chrome (और शायद अन्य ब्राउज़र) एक नया टैब / विंडो नहीं खोलेगा।


0

यह बहुत अच्छा फिक्स नहीं है लेकिन यह काम करता है:

सीएसएस:

.new-tab-opener
{
    display: none;
}

HTML:

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

जावास्क्रिप्ट:

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

लाइव उदाहरण: http://jsfiddle.net/7eRLb/


0

Microsoft IE दूसरे तर्क के रूप में एक नाम का समर्थन नहीं करता है।

window.open('url', 'window name', 'window settings');

समस्या है window name। यह काम करेगा:

window.open('url', '', 'window settings')

Microsoft केवल निम्न तर्कों की अनुमति देता है, यदि उस तर्क का उपयोग किया जाए:

  • _blank
  • _media
  • _parent
  • _खोज
  • _self
  • _ऊपर

इस Microsoft साइट की जाँच करें


4
-1: आपकी लाइसेंस-उल्लंघन करने वाली प्रति / stackoverflow.com/a/1462500/560648 के बावजूद, यह सच नहीं है। तर्क है समर्थित । इसमें सिर्फ स्थान या डैश या अन्य विराम चिह्न नहीं हो सकते। उस प्रश्न पर अन्य उत्तर और टिप्पणियाँ पढ़ें।
लाइटनेस दौड़ ऑर्बिट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.