Angenommen, wir hängen einen .click()Handler an ein anchor ( <a>) -Tag im $(document).readyRückruf an. Dieser Handler bricht die Standardaktion (nach href) ab und zeigt eine Warnung an.
Ich würde gerne wissen, wann genau der Rückruf ausgeführt wird und ob der Benutzer auf den Anker klicken kann (das Dokument wurde im Browser angezeigt), aber das Ereignis wurde noch nicht angehängt.
Hier sind verschiedene HTML-Seiten, die einen Anker enthalten, aber die Reihenfolge der Aufnahme der Skripte ist unterschiedlich. Was ist der Unterschied (wenn überhaupt) zwischen ihnen? Verhalten sich verschiedene Browser unterschiedlich?
Seite 1:
<html>
<head>
<title>Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('a').click(function() {
alert('overriding the default action');
return false;
});
});
</script>
</head>
<body>
<a href="http://www.google.com">Test</a>
</body>
</html>
Seite 2:
<html>
<head>
<title>Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
<a href="http://www.google.com">Test</a>
<script type="text/javascript">
$(function() {
$('a').click(function() {
alert('overriding the default action');
return false;
});
});
</script>
</body>
</html>
Seite 3:
<html>
<head>
<title>Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<a href="http://www.google.com">Test</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('a').click(function() {
alert('overriding the default action');
return false;
});
});
</script>
</body>
</html>
Ist es also möglich, dass ein Benutzer hrefdurch Klicken auf den Anker zum weitergeleitet wird und die Warnung nie sieht (wobei der Fall von deaktiviertem Javascript natürlich ignoriert wird)? Könnte dies in einem der von mir angegebenen Beispiele passieren?
Ich muss lediglich sicherstellen, dass der clickEreignishandler an den Anker angehängt wurde, bevor der Benutzer auf diesen Anker klicken kann. Ich weiß, dass ich ein leeres bereitstellen hrefund es dann schrittweise in Javascript verbessern kann, aber dies ist eine allgemeinere Frage.
Was passiert, wenn der HTML-Code schnell vom Webserver generiert wird, die Abfrage der jquery-Bibliothek jedoch einige Zeit dauert, um von einem entfernten Server abgerufen zu werden? Wird dies mein Szenario beeinflussen? Wie ist die Reihenfolge der Aufnahme der Skripte im Vergleich zum Laden des DOM? Könnten sie parallel durchgeführt werden?
quelle
onclickdenclickHandler direkt nach dem Link zu verwenden oder anzuhängen (nicht zu verwenden$(document).ready)?Es hängt von vielen Dingen ab. Wenn Sie beispielsweise eine Chunk-Codierung haben, ist es möglich, dass ein Benutzer einen Chunk erhält. Da das Dokument jedoch noch nicht fertig ist, wird der Listener nicht angehängt.
Das jQuery ready-Ereignis ist das DOMContentLoaded- Ereignis in W3C-kompatiblen Browsern (standardisiert in der HTML5-Spezifikation) und einige Alternativen dazu in anderen (wie Readystate im IE).
Da dies vor dem Rendern geschieht, wird davon ausgegangen, dass ein nach diesem Ereignis ausgeführter Rückruf die Benutzerinteraktion auf einer nicht bereitstehenden Seite verhindern kann.
Aber wie Peter Michaux in seinem Artikel aufgrund der unterschiedlichen Art und Weise, wie Browser dieses Ereignis implementieren, hervorhob, "ist eine robuste Technik zur frühen Belebung in den vier großen Browsern nicht möglich."
Ich würde also sagen, dass Sie sich nicht zu 100% auf ein jQuery-fähiges Ereignis verlassen können, aber die meiste Zeit wird es gut funktionieren .
quelle
In YUI gibt es die Methoden
onContentReady()undonAvailable(). Leider gibt es in jQuery kein Äquivalent dazu. Es gibt jedoch ein Plugin, das von ihnen inspiriert wurde:http://www.thunderguy.com/semicolon/2007/08/14/elementready-jquery-plugin/
Auf diese Weise können Sie die Ereignisse an den Anker binden, bevor das DOM vollständig geladen ist.
quelle
Ihr drittes Beispiel bietet die größte Chance, dass der Benutzer klickt, ohne dass der Override-Handler angehängt wurde. Der Browser lädt im Allgemeinen die einzelnen Dateien herunter und analysiert sie,
<script>bevor er zum nächsten übergeht . Sie beziehen jQuery von einer externen Quelle (Google) ein, die zwar wahrscheinlich zuverlässig ist, aber möglicherweise nicht verfügbar ist oder nur langsam geladen wird. Sie haben beide<script>Blöcke am Ende Ihres Dokuments<body>, sodass die vorherigen Bereiche der Seite wahrscheinlich bereits heruntergeladen und auf dem Bildschirm gerendert wurden, während diese beiden letzten Skripte verarbeitet werden. Während dieser Ansatz empfohlen wird, um dem Benutzer eine reaktionsschnelle Erfahrung beim Laden von Seiten zu bieten, könnten sie in diesem unsicheren Zeitraum klicken, und natürlich wäre der Override-Handler noch nicht angehängt worden.Es ist ein interessanter YUIblog Artikel über Skripte und Ladereihenfolge hier .
quelle
Natürlich ist es möglich, die Warnmeldung zu "betrügen" (auch wenn Javascript aktiviert ist). Versuchen Sie, den Link in das URL-Feld zu ziehen, und Sie werden sehen, dass er ohne diese Warnung ausgeführt wird. Dies ist besonders problematisch, wenn der Link die Löschaktion auslöst.
Über das document.ready Rückruf - Ich habe auch ein solches Problem. Lassen Sie mich erklären. Wir führen ein Projekt durch, bei dem alle Formulare in Popups angezeigt werden (jQuery-Fenster). Wenn das Popup (vorerst) geschlossen wird, wird die Seite neu geladen, und ich hatte Fälle, in denen ich zu einem anderen Bildschirm umgeleitet wurde, anstatt ein neues Popup zu öffnen.
Stimmen Sie dem Benutzer 384915 voll und ganz zu, wenn Sie Javascript direkt in das onClick-Ereignis oder noch besser in das href-Tag einfügen.
quelle