Jsdom: 외부 스크립트는 어떻게 로드합니까?

에 만든 2017년 07월 07일 · 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 에 2017년 07월 07일

🚀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 에 2017년 07월 07일

🚀2 👍2

내가 참조! 여러분은 환상적입니다. 계속해서 좋은 일을 하십시오!

cg433n 에 2017년 07월 07일

알림: 위 데모의 2가지 기능은 위험합니다.

npm request 은(는) 감가상각됩니다. npm install request 결과:
> npm WARN deprecated [email protected] : 요청이 더 이상 사용되지 않습니다. https://github.com/request/request/issues/3142 참조
setImmediate 는 장기적으로 위험합니다 .

FS 해킹

또는 fs FS.read() 사용하여 파일에서 js 코드를 읽고 로드하는 것이 좋습니다 addEventListener() #1914. 내가 제안하는 작업 데모에는 다음이 포함됩니다.

fs.readFileSync 를 사용하여 외부 js를 html에 문자열로 로드
여러 외부 js 파일을 처리하는 루프
외부 js의 기능을 실행하는 사용 사례
터미널 변수를 노드에 전달한 다음 외부 js 함수에 전달하는 사용 사례

이는 xhr/API 호출을 수행하지 못하게 하여 부분적으로만 문제를 해결할 수 있습니다.

URL

URL 작업을 얻는 방법을 알 수 없었습니다.
이상적으로는 URL 작업 데모를 통해 external.js 파일을 로드하는 업데이트된 최소 JSDOM 을 환영합니다. :마음:

hugolpz 에 2020년 09월 02일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급