Jsdom: आप बाहरी स्क्रिप्ट कैसे लोड करते हैं?

को निर्मित 7 जुल॰ 2017 · 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 7 जुल॰ 2017

🚀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 7 जुल॰ 2017

🚀2 👍2

समझा! तुम लोग शानदार हो - अच्छा काम करते रहो!

cg433n 7 जुल॰ 2017

सूचना: ऊपर दिए गए डेमो की 2 विशेषताएं जोखिम भरी हैं।

npm request मूल्यह्रास है। npm install request में परिणाम:
> npm WARN पदावनत अनुरोध@2.88.2 : अनुरोध बहिष्कृत कर दिया गया है, देखें https://github.com/request/request/issues/3142
setImmediate लंबे समय में जोखिम भरा है ।

एफएस हैक

वैकल्पिक रूप से, मैं फ़ाइलों से जेएस कोड पढ़ने और लोड करने के लिए fs का उपयोग करने की अनुशंसा करता हूं, #3023 में @EricRicketts ' FS.read() दृष्टिकोण पर आधारित Stackoverflow और @Domenic के addEventListener() में देखें #1914. मेरे द्वारा प्रस्तावित कार्यशील डेमो में शामिल हैं:

स्ट्रिंग के रूप में एचटीएमएल में बाहरी जेएस लोड करने के लिए fs.readFileSync का उपयोग करें
कई बाहरी जेएस फाइलों को संभालने के लिए लूप
बाहरी जेएस 'कार्यों को फायर करने के मामले का उपयोग करें
टर्मिनल चर को नोड में पास करने के मामले का उपयोग करें, फिर बाहरी जेएस कार्यों के लिए

यह आपको xhr / API कॉल करने से रोकने की संभावना है और इसलिए केवल आंशिक रूप से समस्या का समाधान करता है।

यूआरएल

मैं यूआरएल काम पाने का तरीका नहीं समझ सका।
आदर्श रूप से, एक अद्यतन न्यूनतम JSDOM url वर्किंग डेमो के माध्यम से बाहरी.js फ़ाइलों को लोड करना स्वागत योग्य होगा। :दिल:

hugolpz 2 सित॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स