Jsdom: كيف تقوم بتحميل البرامج النصية الخارجية؟

تم إنشاؤها على ٧ يوليو ٢٠١٧ · 3تعليقات · مصدر: jsdom/jsdom

يمكن لـ jsdom تشغيل نصوص مضمنة داخل علامة <head> للمستند ، ولكن كيف تجعلها تشغل البرامج النصية المرتبطة في رأس المستند عبر <script src=""> ؟

للخيارات التي أستخدمها:

{
    url: url,
    resources: 'usable',
    runScripts: 'dangerously',
}

معلومات أساسية:

إصدار Node.js: 8.1.2
إصدار jsdom: 11.1.0

حالة التكاثر الأدنى:

// index.js
const request = require('request')
const jsdom = require('jsdom')
const {JSDOM} = jsdom
const url = 'http://localhost:8000'

request(url, (error, response, body) => {
  const options = {
    url: url,
    resources: 'usable',
    runScripts: 'dangerously',
  }

  const dom = new JSDOM(body, options)

  console.log(dom.window.document.body.children.length) // Expecting to see `1`
  console.log(dom.window.document.body.innerHTML) // Expecting to see `<h1>Hello world</h1>`
})

// external.js
document.addEventListener('DOMContentLoaded', () => {
  document.write('<h1>Hello world!</h1>')
})

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JSDOM test</title>
    <script src="external.js"></script>
  </head>
  <body>
  </body>
</html>

أكمل مثال العمل الأدنى: https://github.com/cg433n/jsdom-test

مصدر

cg433n

التعليق الأكثر فائدة

المشكلة هنا هي أن DOMContentLoaded حدث غير متزامن. أنت تقوم بتسجيل الدخول قبل أن تتاح له فرصة حدوث ذلك. أنت بحاجة إلى الانتظار حتى إطلاق النار ؛ عندها فقط سيحدث document.write() .

ربما يجب أن يعمل شيء مثل هذا:

const dom = new JSDOM(body, options)

dom.window.document.addEventListener('DOMContentLoaded', () => {
  // We need to delay one extra turn because we are the first DOMContentLoaded listener,
  // but we want to execute this code only after the second DOMContentLoaded listener
  // (added by external.js) fires.
  setImmediate(() => {
    console.log(dom.window.document.body.children.length) // Expecting to see `1`
    console.log(dom.window.document.body.innerHTML) // Expecting to see `<h1>Hello world</h1>`
  });
});

domenic في ٧ يوليو ٢٠١٧

🚀2 👍2

ال 3 كومينتر

ربما يجب أن يعمل شيء مثل هذا:

const dom = new JSDOM(body, options)

dom.window.document.addEventListener('DOMContentLoaded', () => {
  // We need to delay one extra turn because we are the first DOMContentLoaded listener,
  // but we want to execute this code only after the second DOMContentLoaded listener
  // (added by external.js) fires.
  setImmediate(() => {
    console.log(dom.window.document.body.children.length) // Expecting to see `1`
    console.log(dom.window.document.body.innerHTML) // Expecting to see `<h1>Hello world</h1>`
  });
});

domenic في ٧ يوليو ٢٠١٧

🚀2 👍2

فهمت! أنتم يا رفاق رائعون - استمروا في العمل الجيد!

cg433n في ٧ يوليو ٢٠١٧

ملاحظة: سمتان من العرض التوضيحي أعلاه محفوفة بالمخاطر.

npm request مستهلك. النتائج npm install request في:
> npm WARN مهمل [email protected] : تم إهمال الطلب ، راجع https://github.com/request/request/issues/3142
يعتبر setImmediate محفوفًا بالمخاطر على المدى الطويل .

اختراق FS

بدلاً من ذلك ، أوصي باستخدام fs لقراءة وتحميل أكواد js من الملفات ، راجع Stackoverflow بناءً على نهجEricRicketts ' FS.read() في # 3023 و Domenic addEventListener() في # 1914. يتضمن عرض العمل الذي أقترحه ما يلي: