1. घर
  2. सवाल और जवाब
  3. जावास्क्रिप्ट के साथ लिंक क्लिक (टेक्स्ट, इमेजेस इत्यादि) का पता कैसे लगाएं?

जावास्क्रिप्ट के साथ लिंक क्लिक (टेक्स्ट, इमेजेस इत्यादि) का पता कैसे लगाएं?

2011-12-09 8 views
8

मैं एक क्रॉस-ब्राउज़र स्क्रिप्ट लिखने की कोशिश कर रहा हूं जो किसी पृष्ठ पर एक लिंक क्लिक किया जाता है (टेक्स्ट लिंक, छवि, या अन्यथा) ताकि मैं एक संदेश या विज्ञापन (एक इंटरस्टिशियल की तरह) दिखा सकूं और फिर निर्देशित कर सकूं मूल रूप से क्लिक किए गए गंतव्य यूआरएल के आगंतुक।जावास्क्रिप्ट के साथ लिंक क्लिक (टेक्स्ट, इमेजेस इत्यादि) का पता कैसे लगाएं?

स्क्रिप्ट को तृतीय पक्ष साइटों से काम करना है (जहां मालिक स्क्रिप्ट टैग अपनी साइट पर स्थापित करता है)।

मैं जावास्क्रिप्ट का उपयोग करके इसे कैसे पूरा कर सकता हूं?

क्या मैं एक ईवेंट श्रोता का उपयोग करता हूं? क्या मैं सभी लिंक ऑब्जेक्ट्स के माध्यम से पुन: प्रयास करता हूं? या कुछ और?

मेरी जावास्क्रिप्ट कौशल नौसिखिया/मध्यवर्ती हैं इसलिए विस्तृत उदाहरण/स्पष्टीकरण की सराहना की जाती है।

मैं यहाँ घटना श्रोता का उपयोग कर बंद शुरू कर दिया है, लेकिन अब तक मैं पेज पर सभी क्लिक का पता लगाने हूँ: addEventListener Code Snippet Translation and Usage for cross-browser detectioin

मैं एक JQuery विकल्प पर विचार करेंगे, लेकिन मैं तो बस पता नहीं कैसे यह तीसरे पक्ष की साइट पर काम करेगा यदि उस साइट में JQuery लाइब्रेरी नहीं है।

धन्यवाद सब कुछ।

स्रोत

2011-12-09 C King

+1

एक चीज जो आपको शायद अंततः सौदा करने वाली है, यह है कि कुछ साइटों के लिंक क्लिक के लिए अपने हैंडलर होंगे, और यह सुनिश्चित करने के लिए कठिन/असंभव होगा कि आपके हैंडलर को पहले कहा जाता है। – Pointy

+0

@ पॉइंटी - यह एक अच्छा मुद्दा है ... उस पर भी विचार नहीं किया। मुझे बस अपने कोड का उपयोग कर किसी को भी सामान्य चेतावनी और अस्वीकरण को इंगित करना होगा। –

उत्तर

5

मैंने सोचा कि मैं एक गैर jQuery कोशिश चाहते हैं: एक ही कोड है, लेकिन अपने वस्तु या एक समारोह नाम के लिए जाँच

if(typeof(jQuery) == undefined){ 
    var head = docuent.getElementsByTagName('head')[0]; 
    var script = document.createElement("script"); 
    script.setAttribute("type", "text/javascript"); 
    script.setAttribute("src", "http://yourserver.url/jquery.js"); 
    head.appendChild(script); 
}

स्रोत

2011-12-09 22:04:19

+0

+1 में लोड (डाउनलोड) होगा - वास्तव में अच्छा है, लेकिन 'var टैग = [];' ' var टैग = {}; '? गतिशील गुणों को सरणी पर रखना बुरा नहीं है? –

+0

आईई के लिए भी यदि आप घटना पर कोई "लक्ष्य" संपत्ति नहीं है तो शायद आप 'e.srcElement' की जांच करना चाहते हैं। – Pointy

+0

@AdamRackis, यह संभवतः है, लेकिन जब तक आपकी टिप्पणी (मैं जावास्क्रिप्ट के माध्यम से दुर्घटना से सीखा जावास्क्रिप्ट की तरह, तब तक मुझे अनजान था ... इसलिए मैं इसका उपयोग कर सकता हूं (खुशी से!), लेकिन जरूरी नहीं 'अच्छी तरह से')। –

7

एक समारोह के लिए जब भी एक लिंक गतिशील रूप से जोड़ा या नहीं है क्लिक किया गया फोन के लिए, आप jQuery के एक पुराने संस्करण उपयोग कर रहे हैं का उपयोग on()

$(document).on("click", "a", function() { 
    //this == the link that was clicked 
    var href = $(this).attr("href"); 
    alert("You're trying to go to " + href); 
});

, तो आप delegate() का प्रयोग करेंगे (ध्यान दें कि चयनकर्ता और घटना प्रकार के आदेश स्विच किया गया है)

$(document).delegate("a", "click", function() { 
    //this == the link that was clicked 
    var href = $(this).attr("href"); 
    alert("You're trying to go to " + href); 
});

स्रोत

2011-12-09 21:14:52

+0

इसके लिए धन्यवाद, मुझे नहीं पता था कि यह एक समारोह था। +1 – danludwig

+0

@olivehour - मेरी खुशी। –

+0

मैं इसे वापस लेता हूं - अब मुझे अपने सभी लाइव() कॉलों को बदलना है क्योंकि अब इसे बहिष्कृत किया गया है। आप को मारो! – danludwig

0

मैं यह है कि जिस तरह से यह केवल उन में लिंक के साथ एक टैग को प्रभावित करता है का उपयोग करें,

(function($){ 
$("a[href!='']").each(function(){ 
    $(this).click(function(){ 
    var href = $(this).attr("href") 
    }) 
}); 
})(jQuery);

लेकिन इस नोट पर आप अपने इच्छुक लोगों को तीसरे पक्ष की वेबसाइटों पर इसका उपयोग करने के लिए कहते हैं, इसलिए उनके पास jQuery नहीं हो सकता है, इसलिए आपको अपनी फ़ाइल के शीर्ष पर इस चेक की आवश्यकता हो सकती है लेकिन फिर आपको उपयोग के बाद अपनी फ़ाइल शामिल करने की आवश्यकता होगी

<html> 

    <head> 
      <script type="text/javascript"> 
      window.onload = function() { 
       var observed = document.getElementsByTagName('a'); 

       for (var i = 0; i < observed.length; i++) { 
       observed[i].addEventListener('click', function (e) { 
        var e=window.event||e; 

        alert('Clicked ' + e.srcElement.innerText); 

        if (e.preventDefault) { e.preventDefault() } else { e.returnValue=false } 
       }, false); 
       } 
      } 
      </script> 
    </head> 


    <body> 

      <a href="">foo</a> 
      <a href="">bar</a> 

    </body> 
</html>

स्रोत

2011-12-09 21:40:17

+0

मार्टिन, वह दूसरा भाग कोड का एक अच्छा सा है। बस भावी संदर्भ के लिए - स्क्रिप्ट टैग को जोड़ने के बाद, पृष्ठ को बाकी स्क्रिप्ट चलाने के लिए पुनः लोड करने की आवश्यकता होगी? –

+0

हां और नहीं पृष्ठ को उस कोड को समाप्त करने के बाद एक बार फिर से लोड करने की आवश्यकता नहीं है, जिसमें कोड समाप्त हो गया है, यह आपकी jQuery फ़ाइल –

0

यह मोटे तौर पर jQuery के उपयोग के बिना यह कैसे करना है (और गैर-अन्य पुस्तकालय समाधान भी, बस ... ठीक है, भरें जी कुछ मिनट):

function clickOrigin(e){ 
    var target = e.target; 
    var tag = []; 
    tag.tagType = target.tagName.toLowerCase(); 
    tag.tagClass = target.className.split(' '); 
    tag.id = target.id; 
    tag.parent = target.parentNode; 

    return tag; 
} 

var tagsToIdentify = ['img','a']; 

document.body.onclick = function(e){ 
    elem = clickOrigin(e); 

    for (i=0;i<tagsToIdentify.length;i++){ 
     if (elem.tagType == tagsToIdentify[i]){ 
      console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case).'); 
      return false; // or do something else. 
     } 
    } 
};

JS Fiddle demo।

img तत्वों एक a तत्व के भीतर नेस्ट पता लगाने के लिए ऊपर संशोधित, (जो मुझे लगता है कि क्या आप होने इच्छुक रहे हैं अपने प्रश्न फिर से पढ़ें):

function clickOrigin(e){ 
    var target = e.target; 
    var tag = []; 
    tag.tagType = target.tagName.toLowerCase(); 
    tag.tagClass = target.className.split(' '); 
    tag.id = target.id; 
    tag.parent = target.parentNode.tagName.toLowerCase(); 

    return tag; 
} 

var tagsToIdentify = ['img','a']; 

document.body.onclick = function(e){ 
    elem = clickOrigin(e); 

    for (i=0;i<tagsToIdentify.length;i++){ 
     if (elem.tagType == tagsToIdentify[i] && elem.parent == 'a'){ 
      console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case and one inside an "a" element, no less!).'); 
      return false; // or do something else. 
     } 
     else if (elem.tagType == tagsToIdentify[i]){ 
      console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case).'); 
      return false; // or do something else. 
     } 
    } 
};

JS Fiddle demo।

स्रोत

2011-12-09 21:51:10 user1090520

संबंधित मुद्दे

 संबंधित मुद्दे