반응형
Vuejs 2: 스크립트 태그 javascript 파일을 DOM에 동적으로 포함(및 실행)하려면 어떻게 해야 합니까?
Vuejs를 사용하고 있으며, 다음과 같이 JWPlayer 비디오를 삽입하기 위해 DOM에 스크립트 태그를 삽입해야 합니다.
<body>
<!-- HTML content -->
<script src="//content.jwplatform.com/players/KZVKrkFS-RcvCLj33.js"></script>
<!-- More HTML content -->
<script src="//content.jwplatform.com/players/ANOTHER-ID-ANOTHER-PLAYERID.js"></script>
</body>
결과 없이 v-html 디렉티브를 사용하여 html 태그를 렌더링했습니다.v-bind:src도 좋지만 둘 다 코드를 실행하지 않습니다.이 솔루션을 찾았지만 역시 작동하지 않았습니다.VueJS 구성 요소에 외부 JS 스크립트를 추가하는 방법
이 솔루션을 사용했지만 스크립트 태그(비디오마다 1개씩)는 (머리 부분이 아닌) 본문에 삽입해야 합니다.div 태그 컨테이너를 생성하여 비디오를 삽입해야 합니다.문제는 내장된 JWPlayer 파일에 문서가 포함되어 있다는 것입니다.write() 스테이트먼트.브라우저 콘솔에는 다음과 같은 메시지가 나타납니다. "문서화하기 위한 호출입니다.비동기식으로 로드된 외부 스크립트에서 write()가 무시되었습니다."
이것을 달성할 수 있는 방법이 있을까요?
제공한 링크는 작동합니다.
JWPlayer를 사용하기 전에 스크립트가 로드될 때까지 기다리면 됩니다.
const script = document.createElement('script')
script.onload = () => {
// Now you can use JWPlayer in here
}
script.src = '//content.jwplatform.com/players/MEDIAID-PLAYERID.js'
document.head.appendChild(script)
또한 필요한 첫 번째 컴포넌트에 대해 이 작업을 한 번만 수행합니다.이 시점부터 JWPlayer가 로드되어 다른 스크립트태그를 삽입하지 않고 사용할 수 있습니다.
언급URL : https://stackoverflow.com/questions/47767841/vuejs-2-how-to-include-and-run-a-script-tag-javascript-file-in-the-dom-dynami
반응형
'programing' 카테고리의 다른 글
| Android에서 PDF 파일을 렌더링하는 방법 (0) | 2022.07.18 |
|---|---|
| VueJS: 동일한 파일을 선택해도 입력 파일 선택 이벤트가 발생하지 않습니다. (0) | 2022.07.18 |
| Objective-C에서 ENUM을 정의하고 사용하려면 어떻게 해야 합니까? (0) | 2022.07.11 |
| C에 휘발성이 필요한 이유는 무엇입니까? (0) | 2022.07.11 |
| Java에서 final 키워드를 사용하면 퍼포먼스가 향상됩니까? (0) | 2022.07.11 |