it-swarm.com.de

Fügen Sie jQuery in die JavaScript-Konsole ein

Gibt es eine einfache Möglichkeit, jQuery in Websites einzufügen, die es nicht verwenden? Auf einer Website möchte ich beispielsweise die Anzahl der Zeilen in einer Tabelle erhalten. Ich weiß, dass das mit jQuery wirklich einfach ist.

$('element').length;

Die Site verwendet kein jQuery. Kann ich es von der Kommandozeile aus hinzufügen?

661
mrtsherman

Führen Sie dies in der JavaScript-Konsole Ihres Browsers aus, dann sollte jQuery verfügbar sein ...

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

HINWEIS: Wenn die Site Skripts enthält, die mit jQuery (andere Bibliotheken usw.) kollidieren, können immer noch Probleme auftreten.

Aktualisieren:

Das Beste zu verbessern, das Erstellen eines Lesezeichens macht es wirklich bequem, lassen Sie es uns tun, und ein kleines Feedback ist auch großartig:

  1. Klicken Sie mit der rechten Maustaste auf die Lesezeichenleiste und klicken Sie auf Add Page
  2. Nennen Sie es wie Sie möchten, z. Fügen Sie jQuery ein und verwenden Sie die folgende Zeile als URL:

javascript: (Funktion (e, s) {e.src = s; e.onload = function () {jQuery.noConflict (); console.log ('jQuery injed')}; document.head.appendChild (e); }) (document.createElement ('script'), '// code.jquery.com/jquery-latest.min.js')

Unten ist der formatierte Code:

javascript: (function(e, s) {
    e.src = s;
    e.onload = function() {
        jQuery.noConflict();
        console.log('jQuery injected');
    };
    document.head.appendChild(e);
})(document.createElement('script'), '//code.jquery.com/jquery-latest.min.js')

Hier wird die offizielle jQuery-CDN-URL verwendet. Sie können jedoch Ihre eigene CDN/Version verwenden.

1225
jondavidjohn

Führen Sie dies in Ihrer Konsole aus

var script = document.createElement('script');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script);

Es erstellt ein neues Skript-Tag, füllt es mit jQuery und hängt es an den Kopf an.

193
genesis

Verwenden Sie die jQueryify-Broschüre:

http://marklets.com/jQuerify.aspx

Anstatt den Code in die anderen Antworten einzufügen, wird er zu einem anklickbaren Lesezeichen.

63
meder omuraliev

Kopieren Sie http://code.jquery.com/jquery-latest.min.js Dateiinhalt und fügen Sie ihn in die Konsole ein. Funktioniert perfekt.

62

Zusätzlich zu @ jondavidjohns Antwort können wir es auch als Lesezeichen mit URL als Javascript-Code setzen.

Name: Include Jquery

URL:

javascript:var jq = document.createElement('script');jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(jq); setTimeout(function() {jQuery.noConflict(); console.log('jQuery loaded'); }, 1000);void(0);

und fügen Sie es dann der Symbolleiste von Chrome oder Firefox hinzu, sodass Sie das Skript nicht immer wieder einfügen, sondern nur auf das Bookmarklet klicken.

Screenshot of bookmark

28
manish_s

Ich bin ein Rebell.

Lösung: Verwenden Sie nicht jQuery. jQuery ist eine Bibliothek, um die DOM-Inkonsistenzen zwischen den Browsern zu abstrahlen. Da Sie sich in Ihrer eigenen Konsole befinden, brauchen Sie diese Art von Abstraktion nicht.

Für dein Beispiel:

$$('element').length

($$ ist ein Alias ​​für document.querySelectorAll in der Konsole.)

Für jedes andere Beispiel: Ich bin sicher, ich kann alles finden. Besonders wenn Sie einen modernen Browser verwenden (Chrome, FF, Safari, Opera).

Außerdem würde das Wissen, wie das DOM funktioniert, niemanden verletzen, es würde nur Ihr jQuery-Niveau erhöhen (ja, wenn Sie mehr über Javascript lernen, sind Sie bei jQuery besser).

22

Ich habe gerade ein jQuery 3.2.1-Lesezeichen mit Fehlerbehandlung erstellt (nur laden, wenn es nicht bereits geladen ist, Version erkennen, wenn es bereits geladen ist, Fehlermeldung, wenn beim Laden ein Fehler aufgetreten ist). Getestet in Chrome 27. Es gibt keinen Grund, das "alte" jQuery 1.9.1 im Chrome Browser zu verwenden, da jQuery 2.0 ist API-kompatibel mit 1.9 .

Führen Sie einfach Folgendes in der Entwicklerkonsole von Chrome aus oder ziehen Sie es in Ihre Lesezeichenleiste :

javascript:((function(){if(typeof(jQuery)=="undefined"){window.jQuery="loading";var a=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){console.log("jQuery "+jQuery.fn.jquery+" loaded successfully.")};a.onerror=function(){delete jQuery;alert("Error while loading jQuery!")};document.getElementsByTagName("head")[0].appendChild(a)}else{if(typeof(jQuery)=="function"){alert("jQuery ("+jQuery.fn.jquery+") is already loaded!")}else{alert("jQuery is already loading...")}}})())

Der lesbare Quellcode ist hier verfügbar

12
fnkr

Die Antwort von top, von jondavidjohn ist gut, aber ich möchte sie an einigen Punkten anpassen:

  • Verschiedene Browser geben eine Warnung aus, wenn ein Skript von http auf eine Seite in https geladen wird.
  • Wenn Sie nur das Protokoll von jquery.com in https ändern, wird eine Warnung angezeigt, wenn Sie es direkt aus der URL-Leiste des Browsers versuchen: This is probably not the site you are looking for!
  • Ich benutze gern das CDN von Google, wenn ich mit der Konsole mit Google-Sites wie Google Mail experimentiere.

Mein einziges Problem ist, dass ich eine Versionsnummer angeben muss, bei der ich in der Konsole wirklich immer die neueste Version haben möchte.

var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();
8
hippietrail

Per diese Antwort :

fetch('https://code.jquery.com/jquery-latest.min.js').then(r => r.text()).then(r => eval(r))

Aus irgendeinem Grund muss ich es zweimal ausführen, um das neue '$' zu erhalten (was ich auch mit den anderen Methoden zu tun habe), aber es funktioniert.

Dies ist das Äquivalent, wenn Ihr Browser nicht so modern ist:

fetch('http://code.jquery.com/jquery-latest.min.js').then(function(r){return r.text()}).then(function(r){eval(r)})
6
vt5491

Es ist ziemlich einfach, dies manuell auszuführen, wie die anderen Antworten erklären. Es gibt aber auch das jQuerify Plug-in .

5
Ken Redler

FWIW, Firebug bettet den speziellen Befehl include ein, und Jquery ist standardmäßig mit einem Alias ​​versehen: https://getfirebug.com/wiki/index.php/Include

In Ihrem Fall müssen Sie also nur Folgendes eingeben: 

include("jquery");

Florent

5
fflorent

diese Antwort basiert auf der Antwort von @genesis. Zuerst habe ich die Lesezeichenversion @jondavidjohn ausprobiert, und sie funktioniert nicht. Deshalb ändere ich sie hier (füge sie zu deinem Lesezeichen hinzu):

javascript:(function(){var s = document.createElement('script');s.src = "//code.jquery.com/jquery-2.2.4.min.js";document.getElementsByTagName('head')[0].appendChild(s);console.log('jquery loaded')}());

vorsicht, wird nicht in Chrom getestet, sondern in Firefox und nicht in Konfliktumgebungen getestet.

3
whale_steward

Eine der kürzesten Möglichkeiten wäre, den untenstehenden Code einfach in die Konsole einzufügen.

var jquery = document.createElement('script'); 
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.head.appendChild(jquery);
2
RegarBoy

Wenn Sie nach einem Userscript suchen, habe ich folgendes geschrieben: http://userscripts.org/scripts/show/123588

Damit können Sie jQuery sowie die Benutzeroberfläche und alle gewünschten Plugins hinzufügen. Ich verwende es auf einer Website, die 1.5.1 und keine Benutzeroberfläche hat. Dieses Skript gibt mir stattdessen 1.7.1, plus Benutzeroberfläche und keine Konflikte in Chrome oder FF. Ich habe Opera nicht selbst getestet, aber andere haben mir gesagt, dass es dort auch für sie funktioniert hat. Daher sollte dies eine vollständige Browser-anwenderübergreifende User-Script-Lösung sein, wenn dies der Fall ist.

1
BrianFreud

Wenn Sie jQuery häufig über die Konsole verwenden möchten, können Sie problemlos ein Benutzerskript schreiben. __ Installieren Sie zunächst Tampermonkey, wenn Sie Chrome oder Greasemonkey verwenden, wenn Sie Firefox verwenden. Schreiben Sie ein einfaches Userscript mit einer Use-Funktion wie folgt:

var scripts = [];

function use(libname) {
    var src;
    if (scripts.indexOf(libname) == -1) {
        switch (libname.toLowerCase()) {
            case "jquery":
                src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
                break;
            case "angularjs":
                src = "//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js";
                break;
        }
    } else {
        console.log("Library already in use.");
        return;
    }
    if (src) {
        scripts.append(libname);
        var script = document.createElement("script");
        script.src = src;
        document.body.appendChild(scr);
    } else {
        console.log("Invalid Library.");
        return;
    }
}
1
Asif Mallik

Ab Chrome v.70 wird jQuery über Source geladen und ist bereit, wenn Ihre Seite ist. Geben Sie einfach direkt in die Entwicklerkonsole ein und das Skript wird analysiert.

0
gondwe

intuitiver Einzeiler

document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E’))

Sie können die src-Adresse ändern.
Ich habe auf ReferenceError verwiesen: Variable kann nicht gefunden werden: jQuery

0
plhn

Schlüsselfertige Lösung :

Geben Sie Ihren Code in die yourCode_here-Funktion ein. Und verhindern Sie HTML ohne HEAD - Tag.

(function(head) {
  var jq = document.createElement('script');
  jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
  ((head && head[0]) || document.firstChild).appendChild(jq);
})(document.getElementsByTagName('head'));

function jQueryReady() {
  if (window.jQuery) {
    jQuery.noConflict();
    yourCode_here(jQuery);
  } else {
    setTimeout(jQueryReady, 100);
  }
}

jQueryReady();

function yourCode_here($) {
  console.log("OK");
  $("body").html("<h1>Hello world !</h1>");
}

0
A-312

Hier ist alternativer Code:

javascript:(function() {var url = '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; var n=document.createElement('script');n.setAttribute('language','JavaScript');n.setAttribute('src',url+'?rand='+new Date().getTime());document.body.appendChild(n);})();

diese können Sie entweder direkt in Console einfügen oder eine neue Bookmark-Seite erstellen (in Chrome mit der rechten Maustaste auf die Bookmark Bar , Add Page ... ) und diesen Code als URL einfügen.

Um zu testen, ob das funktioniert hat, siehe unten.

Vor:

$()
Uncaught TypeError: $ is not a function(…)

Nach dem:

$()
[]
0
kenorb