Chrome कंसोल में जावास्क्रिप्ट फ़ाइल या लाइब्रेरी कैसे शामिल करें?

Question

क्या Google Chrome ब्राउज़र में एक बाहरी स्क्रिप्ट फ़ाइल को शामिल करने का एक सरल (मूल शायद?) तरीका है?

वर्तमान में मैं इसे इस तरह कर रहा हूं:

document.head.innerHTML += '<script src="http://example.com/file.js"></script>';

Comments

आपका मतलब है कि आप एक त्वरित वेब पेज पर एक फ़ाइल को शामिल करने के लिए एक त्वरित समाधान चाहते हैं, जहां आपने डेवलपर टूल खोले हैं?

— क्रिश्चियन टेलर

मैंने ऐसा करने के लिए एक ऐड-ऑन किया: गूगल स्टोर से डाउनलोड करें

— w00d

फायरबग कंसोल के माध्यम

— gak

मैं इस का उपयोग सांत्वना document.write ( "<script src = 'में नॉकआउट लोड करने के लिए cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/... )

— दीपक विश्वकर्मा

दुर्भाग्य से किसी स्थानीय जावास्क्रिप्ट फ़ाइल को कंसोल में लोड करने का कोई तरीका नहीं है, क्रोम स्थानीय फ़ाइलों का उपयोग करने की अनुमति नहीं देगा।

— शयन

Answer 1

appendChild() अधिक मूल तरीका है:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);

Comments

हरमन के उत्तर का विस्तार करने के लिए, मैंने इसे एक जेएस फ़ंक्शन के चारों ओर लपेटा और इसे निम्नानुसार उपयोग किया ... var _loadScript = function (path) {var script = document.createElement ('script'); script.type = 'text / javascript'; script.src = पाथ; document.head.appendChild (स्क्रिप्ट); } _loadScript (' documentcloud.github.com/underscore/underscore-min.js' ); _loadScript (' backbonejs.org/backbone-min.js' );

— अजय भोसले

मुझे मिला:TypeError: Property 'appendChild' of object #<HTMLHeadElement> is not a function

— मुहम्मद Hewedy

अजय, धन्यवाद, लेकिन आपके पास कुछ सिंटैक्स त्रुटि है। नीचे दिए गए पाठ को कॉपी / पेस्ट करें, कंसोल में अंडरस्कोर करें। या अन्य लीबी वर्जन _loadScript = function (पाथ) {var script = document.createElement ('स्क्रिप्ट') को

— TPAKTOPA

धन्यवाद! मैं script.innerHTML = इस्तेमाल किया javascript_codeप्रत्यक्ष जावास्क्रिप्ट कोड इंजेक्षन करने के लिए </ code>

— Jonathan_Ng

Answer 2

क्या आप कुछ AJAX फ्रेमवर्क का उपयोग करते हैं? JQuery का उपयोग करना यह होगा:

$.getScript('script.js');

यदि आप किसी फ्रेमवर्क का उपयोग नहीं कर रहे हैं, तो हरमन द्वारा उत्तर देखें।

(हो सकता है कि यह सिर्फ एक साधारण काम करने के लिए jQuery का उपयोग करने के लायक नहीं है ( या शायद यह है ) लेकिन अगर आपके पास पहले से ही लोड है तो आप इसे भी उपयोग कर सकते हैं। मैंने ऐसी वेबसाइटें देखी हैं जिनके पास jQuery लोड किया गया है जैसे बूटस्ट्रैप के साथ लेकिन फिर भी। DOM API का उपयोग सीधे ऐसे तरीके से करें जो हमेशा पोर्टेबल न हो, इसके लिए पहले से लोड किए गए jQuery का उपयोग करने के बजाय, और बहुत से लोग इस तथ्य से अवगत नहीं हैं कि getElementById()सभी ब्राउज़रों पर लगातार काम नहीं करता है - विवरण के लिए इस उत्तर को देखें। )

अपडेट करें:

मुझे इस उत्तर को लिखे हुए कई साल हो चुके हैं और मुझे लगता है कि यह यहाँ इंगित करने लायक है कि आज आप इसका उपयोग कर सकते हैं:

• SystemJS
• ModuleLoader
• jspm.io

स्क्रिप्ट को लोड करने के लिए। इस प्रश्न को पढ़ने वाले लोगों के लिए प्रासंगिक हो सकते हैं।

यह भी देखें: ES6 मॉड्यूल के लिए व्यावहारिक कार्यप्रवाह: Fluent 2014 लड़का बेडफोर्ड द्वारा बात ।

Comments

यह किस फ़ोल्डर से स्क्रिप्ट लोड करेगा?

— क्वर्टी

यदि आप इसका उपयोग करते हैं $.getScript('script.js');या $.getScript('../scripts/script.js');फिर यह दस्तावेज़ के सापेक्ष है, लेकिन यह पूर्ण यूआरएल को भी लोड कर सकता है, जैसे। $.getScript('https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js');

— आरपी

यदि jquery का उपयोग कर रहे हैं, तो आप पृष्ठ पर jquery स्थापित करने के लिए एक बुकमार्कलेट बना सकते हैं, superuser.com/questions/1460015/…

— barlop

Answer 3

आधुनिक ब्राउज़रों में आप संसाधन ( मोज़िला डॉक्स ) डाउनलोड करने के लिए भ्रूण का उपयोग कर सकते हैं और फिर इसे निष्पादित करने के लिए विकसित कर सकते हैं।

उदाहरण के लिए Angular1 डाउनलोड करने के लिए आपको टाइप करना होगा:

fetch('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js')
    .then(response => response.text())
    .then(text => eval(text))
    .then(() => { /* now you can use your library */ })

Comments

नवीनतम क्रोम evalनिम्न संदेश के साथ, के उपयोग को VM1929:11 Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

— रोक देता है

@Vassilis मैंने इसे चेक किया और स्निपेट अभी भी क्रोम कैनरी (64.0.3241.0) में काम करता है।

— मिकीज बकोवस्की

मुझे लगता है कि वासिलिस समस्या इसलिए है क्योंकि उसके द्वारा उपयोग किए जा रहे ऐप पर सामग्री सुरक्षा नीति है। क्रोम मेरे लिए भी काम करता है।

— सोलोमन_एक्लेस्टेसिस

@Vassilis इस त्रुटि से बचने के लिए मेरे उत्तर bellow ( stackoverflow.com/a/57814219/6553339 ) का उपयोग करें

— shmulik friedman

Answer 4

क्रोम में, आपका सबसे अच्छा विकल्प डेवलपर टूल में स्रोत के तहत स्निपेट्स टैब हो सकता है।

यह आपको कोड लिखने और चलाने की अनुमति देगा, उदाहरण के लिए, लगभग पेज में: रिक्त पृष्ठ।

अधिक जानकारी यहाँ: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Comments

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

— इनामुल हसन

मुझे लगा कि मेरी पहली दो पंक्तियाँ उत्तर का अनिवार्य हिस्सा थीं। वे ठीक से वर्णन करते हैं कि क्रोम में स्निपेट्स कैसे प्राप्त करें। फिर मैंने Google प्रलेखन के साथ पूरक किया।

— एटिरोडो

हाँ, मुझे लगता है कि यह सबसे अच्छा जवाब है, क्योंकि यह वर्तमान पृष्ठ के खिलाफ किसी भी जावास्क्रिप्ट को सहेजने और चलाने के लिए devs और आसान तरीका दिखाता है ... अच्छा!

— ब्रैड पार्क

Answer 5

^ ^ ^ ^ के ऊपर @ maciej-bukowski के उत्तर के अनुसरण के रूप में, अब (वसंत 2017) के रूप में आधुनिक ब्राउज़रों में जो async / प्रतीक्षा का समर्थन करते हैं, आप निम्नानुसार लोड कर सकते हैं। इस उदाहरण में हम लोड करते हैं html2canvas लाइब्रेरी:

async function loadScript(url) {
  let response = await fetch(url);
  let script = await response.text();
  eval(script);
}

let scriptUrl = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'
loadScript(scriptUrl);

यदि आप स्निपेट चलाते हैं और फिर अपने ब्राउज़र के कंसोल को खोलते हैं, तो आपको फ़ंक्शन HTML2canvas देखना चाहिए () अब परिभाषित है।

Comments

सुरक्षा नीति इसे काम करने से रोकती है, कम से कम क्रोम नए टैब पृष्ठ पर संस्करण 66 के रूप में। अनकैप्ड (वादे में) EvalError: किसी स्ट्रिंग का जावास्क्रिप्ट के रूप में मूल्यांकन करने से इनकार कर दिया क्योंकि 'असुरक्षित-eval' निम्नलिखित में स्क्रिप्ट का अनुमत स्रोत नहीं है। सामग्री सुरक्षा नीति निर्देश: "

— लिपि-

@ ततश मेरा उत्तर अपनी त्रुटि से बचने के लिए उपयोग करें ( stackoverflow.com/a/57814219/6553339 )

— shmulik friedman

Answer 6

var el = document.createElement("script"),
loaded = false;
el.onload = el.onreadystatechange = function () {
  if ((el.readyState && el.readyState !== "complete" && el.readyState !== "loaded") || loaded) {
    return false;
  }
  el.onload = el.onreadystatechange = null;
  loaded = true;
  // done!
};
el.async = true;
el.src = path;
var hhead = document.getElementsByTagName('head')[0];
hhead.insertBefore(el, hhead.firstChild);

Answer 7

यदि कोई भी, लोड करने में विफल रहता है क्योंकि स्क्रिप्ट स्क्रिप्ट-src "सामग्री सुरक्षा नीति" का उल्लंघन करती है या "क्योंकि असुरक्षित- eval की अनुमति नहीं है", तो मैं अपने सुंदर-छोटे मॉड्यूल-इंजेक्टर का उपयोग डेव-टूल्स स्निपेट के रूप में करने की सलाह दूंगा , तब आप इस तरह लोड कर पाएंगे:

imports('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js')
  .then(()=>alert(`today is ${moment().format('dddd')}`));

<script src="https://raw.githack.com/shmuelf/PowerJS/master/src/power-moduleInjector.js"></script>

यह समाधान काम करता है क्योंकि:

1. यह पुस्तकालय को xhr में लोड करता है - जो कॉर्स को कंसोल से अनुमति देता है, और स्क्रिप्ट-src नीति से बचा जाता है।
2. यह xhr के तुल्यकालिक विकल्प का उपयोग करता है जो आपको कंसोल / स्निपेट के संदर्भ में रहने की अनुमति देता है, इसलिए आपको स्क्रिप्ट को निकालने की अनुमति होगी, और असुरक्षित-अपवित्र के रूप में इलाज करने की अनुमति नहीं है।

Comments

यह मेरे लिए काम नहीं करता है: स्क्रिप्ट को 'लोड करने के लिए मना कर दिया गया है' raw.githack.com/shmuelf/PowerJS/master/src/… 'क्योंकि यह निम्नलिखित सामग्री सुरक्षा नीति के निर्देशों का उल्लंघन करता है: "स्क्रिप्ट- src ...

— थॉमसन

Answer 8

मैं इसे कंसोल में ko नॉकआउट ऑब्जेक्ट लोड करने के लिए उपयोग करता हूं

document.write("<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-3.5.0.debug.js'></script>");

या स्थानीय स्तर पर होस्ट

document.write("<script src='http://localhost/js/knockout-3.5.0.debug.js'></script>");

Answer 9

टैम्पोरमेक स्थापित करें और @matchविशिष्ट पृष्ठ url (या सभी पृष्ठों का एक मेल ) के साथ एक (या अधिक) के साथ निम्नलिखित यूजरस्क्रिप्ट जोड़ें https://*:

// ==UserScript==
// @name         inject-rx
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Inject rx library on the page
// @author       Me
// @match        https://www.some-website.com/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
     window.injectedRx = rxjs;
     //Or even:  window.rxjs = rxjs;

})();

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

यह समाधान नाम स्थान के प्रदूषण को रोकता है । आप पृष्ठ पर मौजूदा वैश्विक चर के आकस्मिक ओवरराइट से बचने के लिए कस्टम नेमस्पेस का उपयोग कर सकते हैं।