在DOM加载后在append上执行<script>标记

Question

我正试图在一个模态中观看视频，而无需亲自访问视频页面。

＆＃xA;＆＃xA;

我正在使用Vue.js并通过一系列Ajax调用我能够在那里大部分时间。

＆＃xA;＆＃xA;

Codpen： https://codepen.io/nolaandy/pen/BrbBzO

＆＃xA;＆＃xA;

如果点击顶部的“vs Suns”，你会得到所有视频帖子的列表。然后单击任何图像，弹出模态组件并动态接收帖子的标题。

＆＃xA;＆＃xA;

我想在那里运行视频，所以我尝试运行此脚本标记：

＆＃xA;＆＃xA;

 ＆lt; script class =“_ nbaVideoPlayerScout”data-team =“warriors”data-videoId =“/ video / {{{aad videoId from post ajax call}}”data-width =“768”data-height =“732”src =“https ：//www.nba.com/scout/team/cvp/videoPlayerScout.js“＆GT;＆LT; /脚本＆GT;＆＃XA;  

＆＃XA;＆＃XA;

当弹出模态，我看到我点击的帖子/图像的正确标题，我看到脚本标签与检查器中的标签完全相同，但脚本标签永远不会运行。

＆＃xA;＆ #xA;

我应该注入这个脚本吗？ （这是在axios响应调用中）

＆＃xA;＆＃xA;

 让theVideoId = response.data.content [0] .videoID＆＃xA;＆＃xA;＆＃xA ;让s = document.createElement（'script'）＆＃xA; s.setAttribute（'class'，'_ nbaVideoPlayerScout'）＆＃xA; s.setAttribute（'data-team'，'warriors'）＆＃xA; s.setAttribute（'data-videoId'，'/ video /'+ theVideoId）＆＃xA; s.setAttribute（'data-width'，'768'）＆＃xA; s.setAttribute（'data-height'， '732'）＆＃xA; s.setAttribute（'src'，'https://www.nba.com/scout/team/cvp/videoPlayerScout.js')
document.getElementById('popupVideo'） .appendChild（s）;＆＃xA;  

＆＃xA;＆＃xA;

MODAL COMPONENT - 点击其中一个帖子缩略图

＆＃xA ;＆＃xA;

  const videoModal = Vue.component（'VideoModal'，{＆＃xA; props：{＆＃xA; id：{＆＃xA; type：String，＆＃xA; required ：true＆＃xA;}＆＃xA;}，＆＃xA; data：function（）{＆＃xA; return {＆＃xA; post：[]，＆＃xA;}＆＃xA;}，＆＃ xA; mounted（）{＆＃xA; const singleApi ='https://cors-anywhere.herokuapp.com/www.nba.com/warriors/api/1.1/json?textf ORMAT = HTML＆安培; NID ='＆＃XA; axios.get（singleApi + this.id）.then（（response）=＆gt; {＆＃xA; this.post = response.data.content [0]＆＃xA; console.log（'THE RESPONSE'，回复）＆＃xA;＆＃xA;让theVideoId = response.data.content [0] .videoID＆＃xA;＆＃xA;＆＃xA; let s = document.createElement（'script'）＆＃xA; s。 setAttribute（'class'，'_ nbaVideoPlayerScout'）＆＃xA; s.setAttribute（'data-team'，'warriors'）＆＃xA; s.setAttribute（'data-videoId'，'/ video /'+ theVideoId） ＆＃xA; s.setAttribute（'data-width'，'768'）＆＃xA; s.setAttribute（'data-height'，'732'）＆＃xA; s.setAttribute（'src'，'https ：//www.nba.com/scout/team/cvp/videoPlayerScout.js'）＆＃xA; document.getElementById（'popupVideo'）。appegChild（s）;＆＃xA;}）。catch（（error） =＆gt; {＆＃xA; console.log（错误）＆＃xA;}）＆＃xA;＆＃xA;}，＆＃xA;方法：{＆＃xA; goBack：function（）{＆＃xA; router.go（-1）＆＃XA; }＆＃xA;}，＆＃xA;模板：`＆lt; div＆gt;＆＃xA;＆lt; div id =“video-popup”＆gt;＆＃xA; ＆lt; button class =“close-video-popup”@ click =“goBack”＆gt; close me＆lt; / button＆gt;＆＃xA; ＆lt; div class =“video-popup-wrapper”＆gt;＆＃xA; ＆lt; div class =“video-popup  -  title”＆gt; {{post.title}}＆lt; / div＆gt;＆＃xA; ＆lt; div class =“video-popup  -  video”id =“popupVideo”＆gt;＆lt; / div＆gt;＆＃xA; ＆lt; div class =“video-popup  -  share”＆gt;＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;`＆＃ XA;}）＆＃XA;  

＆＃XA;

Answer 1

我一时兴起做了这个改变：

// document.getElementById('scriptMe').appendChild(s);
document.body.appendChild(s);

繁荣，脚本运行和视频加载。

哪个超级有趣，因为“为什么”，对吧？

编辑： 此外，尝试其他脚本注入方法discussed here。

document.write方法

document.write(s.outerHTML) // s is a script node

也有效。实际上，您可以将该脚本节点嵌入到div中，它也可以。

createContextualFragment方法

// var $container = document.getElementById('scriptMe'); // does not work
var $container = document.body
var range = document.createRange()
$container.appendChild(range.createContextualFragment(script_str))

有效，其中script_str是一个html字符串文字。这将同时适用于"<script>....</script>"或"<div id="myDiv"><script>...</script></div>"

但我测试的所有方法最终都需要在body中完成注射。

codepen