jQuery से पहले लिंक को रोकना

jQuery लोड होने से पहले मैं क्लिक ईवेंट पर लिंक कैसे रोक सकता हूं?
कारण मेरे पास कुछ लिंक हैं जो AJAX को jQuery AJAX फ़ंक्शंस के माध्यम से कॉल करते हैं और यदि उपयोगकर्ता jQuery फ्रेमवर्क लोड होने से पहले उन्हें क्लिक करता है तो ब्राउजर jQuery एजेक्स फ़ंक्शन को ट्रिगर नहीं कर सकता है और लिंक href = "..." धन्यवाद का पालन करेगा।jQuery से पहले लिंक को रोकना

संपादित करें: क्या मैं इसका उपयोग कर सकता हूं? आप के लिए

<head> 
... 
    <script type="text/javascript"> 
    window.onload = prevCl(); 
    function prevCl() { 
    var links = document.links[]; 
    links.onclick = check(); 
    } 
    function check() { 
    if (typeof jQuery == 'undefined') { 
    return false; 
    } 
    } 
    </script> 
</head>

स्रोत

2010-09-28 Ali

आप एक यूआई दृष्टिकोण कोशिश कर सकते हैं। शायद एक preloader बनाएँ। – sheeks06

मैंने एक उदाहरण के साथ शॉन होगन का जवाब अपडेट किया है। वह इस बारे में बिल्कुल सही है कि इस बारे में कैसे जाना है। –

चार विकल्प:

विकल्प 0

जाओ पढ़ Sean Hogan's answer, उन्होंने बताया कि इस प्रतिनिधिमंडल के साथ किया जा सकता है और मैं एक साथ एक उदाहरण रखा (DOH!) कार्यान्वयन।

विकल्प 1

आप लिंक "#" के href कर सकते हैं जब तक jQuery लोड किया जाता है, और फिर (यदि उपयुक्त हो) क्या यह वास्तव में होना चाहिए के लिए इसे बदल। केवल यदि आप वास्तव में href एक href बनाने की जरूरत है, फिर

jQuery(function($) { 
    $("a[data-href]").each(function() { 
     var $this = $(this); 
     $this.attr("href", $this.attr("data-href")); 
    }); 
});

है कि पिछले बिट: आप उदाहरण के स्टोर कर सकते हैं क्या href एक data- विशेषता में होना चाहिए, .:

<a href='javascript:;' data-href='realtarget.html'>blah</a>

फिर

। यदि आप जावास्क्रिप्ट के माध्यम से क्लिक को संभालने में कामयाब रहे हैं, तो इसकी आवश्यकता नहीं है।

यदि सत्यापन आपके विकास चक्र का एक महत्वपूर्ण हिस्सा है, तो यह ध्यान रखना महत्वपूर्ण है कि फॉर्म data-xyz में विशेषताओं HTML4 में अमान्य हैं और इससे पहले (ब्राउज़र वास्तव में परवाह नहीं करते हैं, लेकिन फिर भी, यदि आप सत्यापन का उपयोग करते हैं ...) । वे एचटीएमएल 5 के रूप में मान्य हो जाते हैं।

विकल्प 2

उपयोग इनलाइन onclick jQuery लोड हो रहा है से पहले क्लिक रोकना और मूल रूप से कहते हैं कि "क्षमा करें, एक पल" जिम्मेदार बताते हैं।

function sorryLoading() { 
    alert("Sorry, the page is still loading, one moment please."); 
    return false; 
}

... और फिर लिंक पर: आपकी फ़ाइल का शीर्ष पर एक script टैग में तो

<a href='realtarget.html' class='sorry' onclick='return sorryLoading();'>blah</a>

... तो jQuery लोड पर onclick निकालें:

jQuery(function($) { 
    $("a.sorry").removeClass('sorry').attr("onclick", "").click(yourRealClickHandler); 
});

(आप पिछले बिट छोड़ सकते हैं — click कॉल,210 — अगर वे ऐसा नहीं करते सब बंद एक ही क्लिक हैंडलर आश्चर्यजनक रूप से चयनकर्ता "है।)

मैं ऊपर एक वर्ग का उपयोग किया है इन कड़ियों और दूसरों अन्यथा एक इनलाइन onclick हो सकता है (के बीच अंतर करने, एक [onclick ] "वास्तव में विंडोज़ पर लिनक्स और आईई 6 और आईई 8 के लिए क्रोम, ओपेरा और फ़ायरफ़ॉक्स पर काम करता है)।

सुनिश्चित करें कि jQuery के लिए स्क्रिप्ट टैग में है:

विकल्प 3

के बाद से यह लग रहा है जैसे आप पेज jQuery लोड जब तक गैर कार्यात्मक होना चाहता हूँ, यहाँ एक और तरीका है आपके पृष्ठ के head अनुभाग (नीचे नहीं, जहां मैं आमतौर पर इसे डालने की अनुशंसा करता हूं)।
अपने पृष्ठ के बहुत नीचे, बस body टैग बंद करने से पहले, बिना आपके क्लिक संचालकों ऊपर हुक उन्हें एक jQuery.ready कॉल में लपेटकर (या इसके किसी भी शॉर्टकट)। सुनिश्चित करेंगे कि jQuery ही पेज से पहले गाया जा रहा है भरी हुई है # 1 और # 2 जल्द से जल्द के रूप में संचालकों ऊपर हुक होगा:

कारण है इस। Google इस पृष्ठ के अंत में एक टैग का उपयोग करने की सिफारिश करता है (ready फ़ंक्शन या इसी तरह के बजाय) और कहता है कि उस बिंदु पर, डोम तत्व खोजे जाने के लिए तैयार होंगे।

को अलग से, ज़ाहिर है, आप यह सुनिश्चित करना है कि समय के दौरान जो लिंक क्या उपयोगकर्ता की उम्मीद नहीं करते बिल्कुल के रूप में पृष्ठ-लोड अनुकूलन सामान सब करने के द्वारा ही संभव के रूप में संक्षिप्त है चाहते हैं आप कर सकते हैं। एक लिंक पर क्लिक करना और ऐसा नहीं करना जो ऐसा लगता है, खराब उपयोगकर्ता अनुभव के लिए बनाता है।

स्रोत

2010-09-28 09:48:43

धन्यवाद लेकिन यह एक विशाल डोम हेरफेर है और एसईओ और पेज लोडिंग की गति के बारे में अपने मुद्दे हैं। :) – Ali

@Ali: एसईओ के बारे में अच्छा बिंदु। जैसा कि आपने इंगित किया था, मैं एक और विकल्प जोड़ रहा था। –

धन्यवाद टी जे। लेकिन मेरे पास feeeeeeeeeeew लिंक हैं, मुझे लगता है कि जावास्क्रिप्ट इसे कर सकता है लेकिन बिना किसी फ्रेमवर्क के जावास्क्रिप्ट पर अच्छा नहीं है, मैंने एक समारोह लिखने की कोशिश की लेकिन काम नहीं किया। (क्या आप इस प्रश्न को मेरे प्रश्न में देख सकते हैं? मैंने इसे संपादित किया) – Ali

मैंने कोशिश नहीं की है, लेकिन सिद्धांत रूप में, किसी भी तत्व के लिए jquery के बिना एक ईवेंट हैंडलर जोड़ें जो डिफ़ॉल्ट कार्रवाई (लिंक खोलना) को रोकता है जब तक jquery undfinied है? jQuery live() और delegate() तरीकों में से डोम बराबर:

getElementsByTagNames('a').addEventListener('click',function (event) { 
    if (typeof jQuery == 'undefined') { 
    event.preventDeafault(); 
    } 
},false)

स्रोत

2010-09-28 10:50:15 Hannes

आप घटना प्रतिनिधिमंडल इस्तेमाल कर सकते हैं।

निम्नलिखित काम कर सकते हैं:

<head> 

<script> 
function linkMatcher(node) { // modify this if not all links are disabled 
if (node.href) return true; 
else return false; 
} 

document.onclick = function(e) { 
e = e || window.event; 
var target = e.target || e.srcElement; 
for (var node=target; node!=document; node=node.parentNode) { 
    if (node.tagName == "A") return !linkMatcher(node); 
} 
} 
</script> 
</head>

संपादित करें: इस लिंक को स्थायी रूप से अक्षम करता है। ईवेंट-हैंडलर को हटाकर उन्हें फिर से सक्षम किया जा सकता है, उदा। document.onclick = null।

complete, live example नीचे विंडोज के लिए लिनक्स के साथ-साथ IE6 और IE8 के लिए क्रोम, ओपेरा, और Firefox पर काम करता है। यह कक्षा "प्रतीक्षा" श्रेणी के लिंक पर क्लिक को रोकता है (यदि आप पसंद करते हैं तो आप सभी लिंक कर सकते हैं) और क्लिक किए गए पहले लिंक को याद करते हैं। फिर यह एक लंबे लोड विलंब (पांच सेकंड) को अनुकरण करता है और फिर लिंक पर jQuery हैंडलर को हुक करता है और क्लिक को रोकने वाले दस्तावेज़-स्तरीय हैंडलर को हटा देता है, और उसके बाद क्लिक किए गए लिंक पर jQuery हैंडलर को ट्रिगर करता है (ध्यान दें कि यह केवल ट्रिगर्स हैंडलर, अंतर्निहित डिफ़ॉल्ट व्यवहार नहीं — लेकिन जब आप अपनी AJAX सामग्री को ट्रिगर करना चाहते हैं, तो मुझे लगता है कि यह ठीक है)। — टीजे।Crowder

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>Link Click Delay Test Page</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
    body { 
    font-family: sans-serif; 
    } 
    p { 
    margin: 0px; 
    } 
</style> 
<script type='text/javascript'> 
    // A scoping function to avoid creating global symbols 
    (function() { 
    // Figure out what to hook clicks on 
    var container = 
     document.body || 
     document.documentElement || 
     document; 

    // Hook clicks that reach the bottom level 
    hookClicks(); 
    function hookClicks() { 
     if (container.attachEvent) { 
     container.attachEvent("onclick", handleClick); 
     } 
     else if (document.addEventListener) { 
     container.addEventListener("click", handleClick, false); 
     } 
    } 

    // Set up an unhook function for jQuery to call 
    window.unhookClicks = unhookClicks; 
    function unhookClicks() { 
     if (container.attachEvent) { 
     container.detachEvent("onclick", handleClick); 
     } 
     else if (document.addEventListener) { 
     container.removeEventListener("click", handleClick, false); 
     } 
    } 

    // Handle clicks 
    function handleClick(event) { 
     var target; 

     // Handle Microsoft vs. W3C event passing style 
     event = event || window.event; 

     // Get the target (again handling Microsoft vs. W3C style) 
     target = event.target || event.srcElement; 

     // Do we have a target that's an A with the class "wait"? 
     if (target && 
      target.tagName.toUpperCase() === "A" && 
      (" " + target.className + " ").indexOf(" wait ") >= 0 
     ) { 
     // It's a link we want to prevent for the moment 
     // Remember the element that was clicked if there 
     // isn't already one (or replace it, depends on the 
     // UX you want to provide 
     if (!window.pendingLink) { 
      window.pendingLink = target; 
     } 

     // Prevent it from being processed 
     if (event.preventDefault) { // If W3C method... 
      event.preventDefault(); 
     } 

     // This should work if preventDefault doesn't 
     return false; 
     } 
    } 
    })(); 
</script> 
</head> 
<body> 
    <p><a href='http://www.google.com' class='wait'>Google</a> 
    - This one waits 
    <br><a href='http://news.bbc.co.uk' class='wait'>BBC News</a> 
    - This one also waits 
    <br><a href='http://www.cnn.com'>CNN</a> 
    - This one doesn't wait, it goes immediately 
    </p> 
</body> 
</html>

जावास्क्रिप्ट (जहां अपने jQuery ready हैंडलर है):

jQuery(function($) { 

    // Use setTimeout to fake a long delay loading 
    setTimeout(function() { 

    // Hook up our proper click handling 
    // Obviously, replace this with whatever does the ajax 
    $("a.wait").click(function(event) { 
     alert("The jQuery handler for " + this.href + " link was triggered."); 
    }); 

    // If we have clicks disabled, enable them 
    if (window.unhookClicks) { 
     window.unhookClicks(); 
     window.unhookClicks = undefined; 
    } 

    // Do we have a pending link to follow? 
    if (window.pendingLink) { 
     // Yes, grab it and clear it 
     var $link = $(window.pendingLink); 
     window.pendingLink = undefined; 

     // Trigger any jQuery event handlers on it. 
     // Note that this will NOT follow the link, 
     // just trigger jQuery event handlers that 
     // are on the link. 
     $link.click(); 
    } 

    // We've loaded! 
    $("<p>Finally loaded!</p>").appendTo(document.body); 

    // End of fake delay function 
    }, 5000); 

});

स्रोत

2010-09-28 10:55:36

** दोह! ** बेशक, पेज स्तर पर क्लिक करते समय दस्तावेज़ स्तर पर क्लिक को पकड़ना ऐसा करने का तरीका है। मैंने एक पूर्ण, लाइव उदाहरण (और 'अटैचमेंट' के बजाय 'attachEvent'/'addEventListener' का उपयोग करके) की स्वतंत्रता ली है। –

jQuery से पहले लिंक को रोकना

उत्तर

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