JavaScript 콘솔에 jQuery 포함
사용하지 않는 사이트의 Chrome JavaScript 콘솔에 jQuery를 쉽게 포함할 수 있는 방법이 있습니까?예를 들어 웹 사이트에서 표의 행 수를 알고 싶습니다.jQuery를 사용하면 이게 정말 쉽다는 거 알아요.
$('element').length;
이 사이트는 jQuery를 사용하지 않습니다.명령줄에서 추가할 수 있습니까?
브라우저의 JavaScript 콘솔에서 이 작업을 실행하면 jQuery를 사용할 수 있습니다.
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/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();
메모: 사이트에 jQuery(기타 libs 등)와 경합하는 스크립트가 있는 경우에도 문제가 발생할 수 있습니다.
업데이트:
북마크를 만드는 것이 더 편리하고, 더 좋은 결과를 얻을 수 있습니다.또한 피드백도 도움이 됩니다.
- 책갈피 줄에서 마우스 오른쪽 단추를 누른 후 페이지 추가를 누릅니다.
- 예를 들어, 원하는 이름을 지정하십시오.jQuery를 삽입하고 URL에 다음 행을 사용합니다.
javascript:(function(e,s){e.src=s;e.onload=function(){j}Query.noConflict();console.log('jQuery injected')}}, document.head.appendChild(e);}(document.createElement('script'),/code.jquery.com/jquery-latest.min.js')
포맷된 코드는 다음과 같습니다.
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')
여기에서는 공식 jQuery CDN URL을 사용합니다.자신의 CDN/버전을 자유롭게 사용하세요.
콘솔에서 실행
var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);
새 스크립트 태그를 만들고 jQuery로 채워 헤드에 추가합니다.
★★★★★★★★★★★★★★★★★★:
https://code.jquery.com/jquery-3.4.1.min.jshttpscode.jquery.com/.4.1.min.js
콘솔에 붙여 넣습니다.완벽하게 동작합니다.
jQueryify 소책자를 사용합니다.
https://web.archive.org/web/20190502132317/http://marklets.com/jQuerify.aspx
다른 응답에 코드를 복사하여 붙여넣는 대신 클릭 가능한 북마크가 됩니다.
@jondavidjohn의 답변에 더해 URL을 javascript 코드로 북마크로 설정할 수도 있습니다.
이름: 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);
그런 다음 이 스크립트를 Chrome 또는 Firefox 툴바에 추가하면 스크립트를 여러 번 붙여넣지 않고 북마클릿을 클릭하기만 하면 됩니다.
2020년 이후 방법, 사용:
(async () => {
await import('https://code.jquery.com/jquery-2.2.4.min.js')
// Library ready
console.log(jQuery)
})()없이, 동음음음 음음 음 without without 、import서약서를 반환한다..then():
import('https://code.jquery.com/jquery-2.2.4.min.js')
.then( () => {
console.log(jQuery)
}
)https://caniuse.com/es6-module-dynamic-import
나는 반항아다.
해결책: jQuery를 사용하지 마십시오.jQuery는 브라우저 간의 DOM 불일치를 추상화하기 위한 라이브러리입니다.사용자는 자신의 콘솔에 있기 때문에 이러한 추상화는 필요하지 않습니다.
예:
$$('element').length
)$$입니다.document.querySelectorAll★★★★★★★★★★★★★★★★★★★★★」
기타 예:난 뭐든 찾을 수 있다고 확신해.특히 최신 브라우저(Chrome, FF, Safari, Opera)를 사용하는 경우.
게다가 DOM이 어떻게 동작하는지를 알면 jQuery의 레벨이 높아집니다(네, javascript에 대해 더 많이 배우면 jQuery를 더 잘 할 수 있습니다).
오류 처리 기능이 있는 jQuery 3.2.1 북마클릿을 만들었습니다(아직 로드되지 않은 경우만 로드, 이미 로드된 경우 버전 감지, 로드 중 오류 메시지).Chrome 27에서 테스트 완료.jQuery 2.0은 1.9와 API 호환되므로 Chrome 브라우저에서 "구" jQuery 1.9.1을 사용할 필요가 없습니다.
Chrome의 개발자 콘솔에서 다음을 실행하거나 책갈피 바에 드래그 앤 드롭하기만 하면 됩니다.
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...")}}})())
Jondavidjohn의 가장 좋은 답변은 좋지만, 몇 가지 사항을 다루기 위해 수정하고 싶습니다.
- 를 로드하면 합니다.
httphttps. - ★★★★★★★★★
jquery.com에서 " " "로 이동합니다https바에서 .URL은 " " " 입니다.This is probably not the site you are looking for! - Gmail과 같은 구글 사이트에서 실험할 때 구글의 CDN을 사용하는 것을 좋아합니다.
유일한 문제는 콘솔에 항상 최신 버전을 원하는 버전 번호를 포함해야 한다는 것입니다.
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();
fetch('https://code.jquery.com/jquery-latest.min.js').then(r => r.text()).then(r => eval(r))
어떤 이유에서인지 새로운 '$'를 얻기 위해 두 번 실행해야 하는데(다른 메서드와도 함께 해야 함) 동작합니다.
브라우저가 최신 버전이 아니라면 다음과 같습니다.
fetch('http://code.jquery.com/jquery-latest.min.js').then(function(r){return r.text()}).then(function(r){eval(r)})
다른 답변에서 설명하듯이 이 작업을 수동으로 수행하는 것은 매우 쉽습니다.jQuerify 플러그인도 있습니다.
는 WWIW, Firebug를 하고 있습니다.includejquery는 디폴트로 에일리어스 됩니다.https://getfirebug.com/wiki/index.php/Include
따라서 이 경우 다음과 같이 입력하기만 하면 됩니다.
include("jquery");
플로렌트
이 답변은 @genes의 답변에 근거해 처음에 북마크 버전 @jondavidjohn을 시도했지만 작동하지 않아 다음과 같이 변경합니다(북마크에 추가).
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')}());
주의: 크롬에서 테스트되지 않고 Firefox에서 작동하며 충돌 환경에서 테스트되지 않습니다.
최신 브라우저(Chrome, Firefox, Safari에서 테스트됨)는 달러 기호를 사용하여 일부 도우미 기능을 구현합니다.$jQuery와 매우 유사합니다(웹 사이트가 다음을 사용하여 정의하지 않은 경우).window.$).
이러한 유틸리티는 DOM 내의 요소를 선택하고 수정할 때 매우 유용합니다.
가장 짧은 방법 중 하나는 아래 코드를 콘솔에 복사하여 붙여넣는 것입니다.
var jquery = document.createElement('script');
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.head.appendChild(jquery);
사용자 스크립트에 대해 이 작업을 수행하고자 하는 경우, http://userscripts.org/scripts/show/123588을 참조하십시오.
jQuery, UI 및 원하는 플러그인을 포함할 수 있습니다.1.5.1로 UI가 없는 사이트에서 사용하고 있습니다.이 스크립트는 대신 1.7.1과 UI를 제공하며 Chrome 또는 FF에서 경합이 발생하지 않습니다.제가 직접 Opera를 테스트한 적은 없지만, 다른 사람들은 Opera가 자신들에게도 효과가 있다고 말했습니다.그래서 이것이 완전한 크로스 브라우저 사용자 스크립트 솔루션이라고 할 수 있습니다.
대체 코드는 다음과 같습니다.
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);})();
콘솔에서 직접 붙여넣거나 새 책갈피 페이지(Chrome에서 책갈피 표시줄을 마우스 오른쪽 버튼으로 클릭하고 페이지 추가...)를 만들어 URL로 이 코드를 붙여넣을 수 있습니다.
이것이 동작하는지 테스트하려면 , 이하를 참조해 주세요.
이전:
$()
Uncaught TypeError: $ is not a function(…)
그 후:
$()
[]
콘솔에서 jQuery를 자주 사용하려면 사용자 스크립트를 쉽게 작성할 수 있습니다.먼저 Chrome을 사용하는 경우 Tampermonkey를 설치하고 Firefox를 사용하는 경우 Greasemonkey를 설치합니다.다음과 같은 사용 기능으로 간단한 사용자 스크립트를 작성합니다.
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;
}
}
턴키 솔루션:
코드를 입력하다yourCode_here기능.또한 HEAD 태그가 없는 HTML을 방지합니다.
(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>");
}직관적인 원라이너
document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E’))
를 변경할 수 있습니다.src주소.
ReferenceError를 참조했습니다. 변수를 찾을 수 없습니다: jQuery
나는 신통한 해결책을 바탕으로 그것을 개선했다.
var also_unconflict = typeof $ != "undefined";
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
if(also_unconflict){
setTimeout(function(){
$=jQuery.noConflict();
console.log('jquery loaded, use jQuery instead of $')
}, 500)
}else{
console.log('jquery loaded, you can use $');
}
구글 크롬 콘솔 스니펫에서 이 기능을 사용하고 있습니다.
다른 옵션은 jQuery 콘텐츠를 스니펫(크롬)에 저장하고 원하는 사이트에서 실행할 수 있습니다(우클릭+실행 또는 CTRL+Enter).온 디맨드로 실행할 경우 반드시 jJaScript를 쿼리할 필요는 없습니다(예: SharePoint JSOM. 모든 JSOM 파일을 스니펫으로 저장하고 필요한 순서로 실행).
최선의 방법
var 스크립트 = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js"; document.getElementsByTagName('head')[0.appendChild(script);
언급URL : https://stackoverflow.com/questions/7474354/include-jquery-in-the-javascript-console
'source' 카테고리의 다른 글
| Python에서 "assert"의 용도는 무엇입니까? (0) | 2022.11.13 |
|---|---|
| SELECT INTO 및 "미등록 변수" 오류 (0) | 2022.11.13 |
| 2개의 번호 리스트 간의 코사인 유사성 (0) | 2022.11.13 |
| 문자의 ASCII 값을 가져오는 방법 (0) | 2022.11.13 |
| 잘못된 종류의 값을 보유한 키에 대한 WORLTYPE 작업 php (0) | 2022.11.13 |