จะรวมไฟล์ JavaScript หรือไลบรารีในคอนโซล Chrome ได้อย่างไร

มีวิธีที่ง่ายกว่า (เนทีฟหรือไม่) ในการรวมไฟล์สคริปต์ภายนอกในเบราว์เซอร์ Google Chrome หรือไม่?

ขณะนี้ฉันทำเช่นนี้:

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

appendChild() เป็นวิธีพื้นเมืองมากขึ้น:

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

คุณใช้เฟรมเวิร์ก AJAX หรือไม่? ใช้ jQuery มันจะเป็น:

$.getScript('script.js');

หากคุณไม่ได้ใช้กรอบงานใด ๆ ให้ดูคำตอบของ Harmen

(อาจจะไม่คุ้มค่าที่จะใช้ jQuery เพียงทำสิ่งนี้ง่ายๆ ( หรืออาจจะเป็น ) แต่ถ้าคุณมีมันโหลดอยู่แล้วคุณก็อาจใช้มันเช่นกันฉันเคยเห็นเว็บไซต์ที่โหลด jQuery เช่น Bootstrap แต่ก็ยัง ใช้ DOM API โดยตรงในลักษณะที่ไม่สามารถพกพาได้เสมอแทนที่จะใช้ jQuery ที่โหลดไปแล้วและหลายคนไม่ทราบว่าแม้getElementById()จะใช้งานไม่ได้กับเบราว์เซอร์ทั้งหมด - ดูคำตอบนี้สำหรับรายละเอียด )

UPDATE:

เป็นเวลาหลายปีแล้วที่ฉันเขียนคำตอบนี้และฉันคิดว่ามันคุ้มค่าที่จะชี้ให้เห็นว่าวันนี้คุณสามารถใช้:

• SystemJS
• ModuleLoader
• jspm.io

เพื่อโหลดสคริปต์แบบไดนามิก สิ่งเหล่านี้อาจเกี่ยวข้องกับคนที่อ่านคำถามนี้

ดูเพิ่มเติม: Fluent 2014 พูดคุยโดย Guy ฟอร์ด: เวิร์กโฟลว์การปฏิบัติสำหรับ ES6 โมดูล

ในเบราว์เซอร์สมัยใหม่คุณสามารถใช้การดึงข้อมูลเพื่อดาวน์โหลดทรัพยากร ( Mozilla docs ) จากนั้น eval เพื่อเรียกใช้งาน

ตัวอย่างเช่นในการดาวน์โหลด 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 */ })

ใน Chrome ตัวเลือกที่ดีที่สุดของคุณอาจเป็นแท็บตัวอย่างภายใต้แหล่งที่มาในเครื่องมือสำหรับนักพัฒนา

มันจะช่วยให้คุณสามารถเขียนและเรียกใช้โค้ดตัวอย่างเช่นในหน้า about: blank

ข้อมูลเพิ่มเติมที่นี่: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=th

ตามคำตอบของ @ 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 () ได้ถูกกำหนดแล้ว

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

หากใครก็ตามไม่สามารถโหลดได้เพราะสคริปต์ของ HES ละเมิดนโยบายความปลอดภัยของเนื้อหา "หรือ" เพราะไม่ปลอดภัย - ไม่ได้รับอนุญาต "ฉันจะแนะนำให้ใช้โมดูลฉีดขนาดเล็กของฉันในฐานะเครื่องมือตัวอย่างเครื่องมือ จากนั้นคุณจะสามารถโหลดดังนี้:

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 - ซึ่งอนุญาตให้ CORS จากคอนโซลและหลีกเลี่ยงนโยบายสคริปต์-rr
2. มันใช้ตัวเลือกแบบซิงโครนัสของ xhr ซึ่งช่วยให้คุณสามารถอยู่ในบริบทของคอนโซล / ตัวอย่างดังนั้นคุณจะได้รับอนุญาตให้ Eval สคริปต์และไม่ได้รับการปฏิบัติในลักษณะที่ไม่ปลอดภัย

ฉันใช้สิ่งนี้เพื่อโหลดโควัตถุที่น่าพิศวงในคอนโซล

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

ติดตั้งtampermonkeyและเพิ่ม UserScript ต่อไปนี้ด้วยหนึ่ง (หรือมากกว่า) @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;

})();

เมื่อใดก็ตามที่คุณต้องการห้องสมุดบนคอนโซลหรือในส่วนย่อยจะเปิดใช้งาน UserScript และรีเฟรชเฉพาะ

การแก้ปัญหามลพิษ namespace ป้องกัน คุณสามารถใช้เนมสเปซที่กำหนดเองเพื่อหลีกเลี่ยงการเขียนทับตัวแปรโกลบอลที่มีอยู่ในหน้าโดยไม่ได้ตั้งใจ