কীভাবে Chrome কনসোলে জাভাস্ক্রিপ্ট ফাইল বা লাইব্রেরি অন্তর্ভুক্ত করবেন?

Question

গুগল ক্রোম ব্রাউজারে কোনও বাহ্যিক স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করার জন্য কি কোনও সহজ (দেশীয় সম্ভবত?) উপায় আছে?

বর্তমানে আমি এটি এইভাবে করছি:

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

Comments

আপনার অর্থ আপনি যে বিকাশকারী ওয়েব পৃষ্ঠাগুলি বিকাশকারী সরঞ্জাম খুলেছেন সেখানে কোনও ফাইল অন্তর্ভুক্ত করার জন্য দ্রুত সমাধান চান?

— খ্রিস্টান টেলনেস

আমি এটি করার জন্য একটি অ্যাড-অন করেছি: গুগল স্টোর থেকে ডাউনলোড করুন

— w00d

ফায়ারব্যাগ কনসোলের মাধ্যমে লোড জাভাস্ক্রিপ্টের

— গ্যাক

আমি এটি কনসোল ডকুমেন্টে নকআউট লোড করতে ব্যবহার করি। রাইটিং ("<স্ক্রিপ্ট 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 = ফাংশন (পাথ) script var স্ক্রিপ্ট = ডকুমেন্ট.ক্রেটইলেট ('স্ক্রিপ্ট'); স্ক্রিপ্ট.টাইপ = 'পাঠ্য / জাভাস্ক্রিপ্ট'; স্ক্রিপ্ট.সিআরসি = পথ; document.head.appendChild (স্ক্রিপ্ট); load _লোডস্ক্রিপ্ট (' ডকুমেন্টক্লাউড. github.com/underscore/:30core-min.js ' ); _লোডস্ক্রিপ্ট (' backbonejs.org/backbone-min.js' );

— অজয় ভোসলে

আমি পেয়েছি:TypeError: Property 'appendChild' of object #<HTMLHeadElement> is not a function

— মুহাম্মদ হেউডি

অজয়, ধন্যবাদ, তবে আপনার কয়েকটি সিনট্যাক্স ত্রুটি রয়েছে। কনসোলে আন্ডারস্কোর করতে নীচের পাঠ্যটিকে অনুলিপি / অনুলিপি করুন। বা অন্যান্য লিওব এর

— টিপাকটোপা

ধন্যবাদ! আমি script.innerHTML = ব্যবহৃত javascript_codeসরাসরি জাভাস্ক্রিপ্ট কোড উদ্বুদ্ধ করতে </ code> এ

— Jonathan_Ng

Answer 2

আপনি কি কিছু এজেএক্স কাঠামো ব্যবহার করেন? JQuery ব্যবহার করে এটি হবে:

$.getScript('script.js');

আপনি যদি কোনও কাঠামো ব্যবহার না করে থাকেন তবে হারম্যানের উত্তর দেখুন।

(সম্ভবত এটি কেবলমাত্র একটি সাধারণ জিনিস ( বা এটি হ'ল ) করার জন্য jQuery ব্যবহার করা ভাল নয় তবে আপনি যদি ইতিমধ্যে এটি লোড করে থাকেন তবে আপনি এটিও ব্যবহার করতে পারেন I আমি এমন ওয়েবসাইটগুলি দেখেছি যেগুলিতে jQuery বোঝা রয়েছে যেমন বুটস্ট্র্যাপ সহ তবে এখনও DOM API সরাসরি এমনভাবে ব্যবহার করুন যা ইতিমধ্যে লোড হওয়া jQuery এর পরিবর্তে সর্বদা পোর্টেবল হয় না, এবং অনেক লোক এমনকি getElementById()সমস্ত ব্রাউজারে অবিচ্ছিন্নভাবে কাজ করে না এই বিষয়টি সম্পর্কে সচেতন নয় - দেখুন বিশদগুলির জন্য এই উত্তরটি দেখুন। )

হালনাগাদ:

আমি এই উত্তরটি লেখার পরে বছর হয়ে গেছে এবং আমি মনে করি এটি এখানে এখানে উল্লেখ করা উপযুক্ত যা আজ আপনি ব্যবহার করতে পারেন:

• SystemJS
• ModuleLoader
• jspm.io

পরিবর্তনশীল স্ক্রিপ্ট লোড করতে। যারা এই প্রশ্নটি পড়ছেন তাদের সাথে প্রাসঙ্গিক হতে পারে।

আরও দেখুন: গাই বেডফোর্ডের ফ্লুয়েট ২০১৪ আলোচনা: ইএস Mod মডিউলগুলির জন্য ব্যবহারিক কার্যপ্রবাহ ।

Comments

এটি কোন ফোল্ডার থেকে স্ক্রিপ্টটি লোড করবে?

— কিওয়ার্টি

আপনি যদি এটির মতো $.getScript('script.js');বা এটি ব্যবহার করেন $.getScript('../scripts/script.js');তবে এটি নথির সাথে সম্পর্কিত তবে এটি পরম ইউআরএলগুলিও লোড করতে পারে, যেমন eg $.getScript('https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js');

— আরএসপি

যদি jquery ব্যবহার করে থাকেন তবে পৃষ্ঠায় jquery ইনস্টল করতে আপনি একটি বুকমার্কলেট তৈরি করতে পারেন, superuser.com/questions/1460015/…

— বার্লপ

Answer 3

আধুনিক ব্রাউজারে আপনি ব্যবহার করতে পারেন আনা রিসোর্স ডাউনলোড করতে ( মোজিলা ডক্স ) এবং তারপরে এটি কার্যকর করতে al

উদাহরণস্বরূপ 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:".

— ভ্যাসিলিস

@ ভ্যাসিলিস আমি এটি পরীক্ষা করেছি এবং স্নিপেট এখনও ক্রোম ক্যানারি (64.0.3241.0) এ কাজ করে।

— ম্যাকিয়েজ বুকোভস্কি

আমার মনে হয় ভ্যাসিলিস সমস্যাটি কারণ তিনি যে অ্যাপ্লিকেশনটি ব্যবহার করছেন সেটিতে একটি সামগ্রী সুরক্ষা নীতি রয়েছে। ক্রোম আমার জন্যও কাজ করে।

— সলমনস_একুলিয়াসেসেস

@Vassilis আমার উত্তর নিচে (ব্যবহার stackoverflow.com/a/57814219/6553339 ) এই ত্রুটি এড়াতে

— shmulik ফ্রিডম্যান

Answer 4

ক্রোমে, আপনার সেরা বিকল্পটি বিকাশকারী সরঞ্জামগুলির সূত্রগুলির অধীনে স্নিপেট ট্যাব হতে পারে।

এটি আপনাকে কোড লিখতে এবং চালানোর অনুমতি দেয়, উদাহরণস্বরূপ, প্রায়: ফাঁকা পৃষ্ঠায়।

এখানে আরও তথ্য: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Comments

যতক্ষণ এই তাত্ত্বিক প্রশ্নের উত্তর হতে পারে, এটা বাঞ্ছনীয় হবে উত্তর অপরিহার্য অংশের এখানে অন্তর্ভুক্ত করা, এবং রেফারেন্স এর জন্য লিঙ্ক প্রদান।

— এনামুল হাসান

আমি ভেবেছিলাম আমার প্রথম দুটি লাইনই উত্তরের প্রয়োজনীয় অংশ। তারা কীভাবে ক্রোমে স্নিপেটে যেতে হবে তা বর্ণনা করে। তারপরে আমি গুগল ডকুমেন্টেশন সহ পরিপূরক হয়েছি।

— আতিরেদো

হ্যাঁ ব্যক্তিগতভাবে, আমি মনে করি এটি সেরা উত্তর, কারণ এটি বর্তমান পৃষ্ঠাটির বিরুদ্ধে কোনও জাভাস্ক্রিপ্ট সংরক্ষণ এবং চালানোর জন্য ডেভস এবং সহজ উপায়ও দেখায় ... দুর্দান্ত!

— ব্র্যাড পার্কগুলি 16

Answer 5

@ Maciej-bukowski উপরে the এর উত্তরের অনুসরণ হিসাবে , আধুনিক ব্রাউজারগুলিতে এখন (বসন্ত 2017) যা অ্যাসিঙ্ক সমর্থন করে / অপেক্ষায় থাকে আপনি নিম্নোক্তভাবে লোড করতে পারেন। এই উদাহরণে আমরা লোড html2 ক্যানভাস লাইব্রেরি লোড করুন:

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);

আপনি যদি স্নিপেট চালনা করেন এবং তারপরে আপনার ব্রাউজারের কনসোলটি খোলেন আপনার এইচটিএমএল 2 ক্যানভাস () এখন ফাংশনটি সংজ্ঞায়িত করা উচিত।

Comments

সুরক্ষা নীতিটি কমপক্ষে version version সংস্করণ হিসাবে ক্রোম নতুন ট্যাব পৃষ্ঠায় এটিকে কাজ করা থেকে বিরত রাখে Un বিষয়বস্তু সুরক্ষা নীতি নির্দেশনা: "স্ক্রিপ্ট-

— এসসিআর

@Tatsh আমার উত্তর ব্যবহার আপনার ত্রুটি (এড়াতে stackoverflow.com/a/57814219/6553339 )

— shmulik ফ্রিডম্যান

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

যদি কেউ, হিপি স্ক্রিপ্ট স্ক্রিপ্ট-এসসিআর "বিষয়বস্তু সুরক্ষা নীতি" লঙ্ঘন করে বা "অনিরাপদ-কারণ" অনুমোদিত নয় "লোড করতে ব্যর্থ হয় তবে আমি আমার সুন্দর-ছোট মডিউল-ইনজেক্টরটিকে একটি ডিভাইস স্নিপেট হিসাবে ব্যবহার করার পরামর্শ দেব, তাহলে আপনি এটির মতো লোড করতে সক্ষম হবেন:

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 এ লাইব্রেরিটি লোড করে - যা কনসোল থেকে সিওআরএসকে অনুমতি দেয় এবং স্ক্রিপ্ট- এসসিআর নীতি এড়ায় ।
2. এটি এক্সএইচআর- এর সিঙ্ক্রোনাস বিকল্পটি ব্যবহার করে যা আপনাকে কনসোল / স্নিপেটের প্রসঙ্গে থাকতে পারে, সুতরাং আপনার কাছে স্ক্রিপ্টটি খোলার অনুমতি থাকবে এবং অনিরাপদ-বিভাজন হিসাবে আচরণ করা হবে না।

Comments

এটি আমার পক্ষে কাজ করে না: স্ক্রিপ্ট ' Raw.githack.com/shmuelf/PowerJS/master/src/… ' লোড করতে অস্বীকার করেছে কারণ এটি নিম্নলিখিত বিষয়বস্তু সুরক্ষা নীতি নির্দেশনা লঙ্ঘন করেছে: "স্ক্রিপ্ট-

— এসসিআর

Answer 8

আমি কনসোলে কো নকআউট অবজেক্টটি লোড করতে এটি ব্যবহার করি

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নির্দিষ্ট পৃষ্ঠার ইউআরএল (বা সমস্ত পৃষ্ঠার মিল :) সহ একটি (বা আরও) দিয়ে নিম্নলিখিত ইউজারস্ক্রিপ্ট যুক্ত করুন : 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;

})();

যখনই আপনার কনসোলে লাইব্রেরির প্রয়োজন হবে বা স্নিপেটে নির্দিষ্ট ইউজারস্ক্রিপ্ট সক্ষম করুন এবং রিফ্রেশ করুন।

এই দ্রবণটি নামস্থান দূষণ রোধ করে । পৃষ্ঠায় বিদ্যমান বৈশ্বিক ভেরিয়েবলগুলির দুর্ঘটনাক্রমে ওভাররাইট এড়াতে আপনি কাস্টম নেমস্পেসগুলি ব্যবহার করতে পারেন।