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

Question

我正在尝试以模式观看 onClick 视频，而无需访问视频页面本身。

我正在使用 Vue.js，并且通过一系列 Ajax 调用，我能够完成大部分工作。

密码笔：https://codepen.io/nolaandy/pen/BrbBzO

如果您点击顶部的“vs Suns”，您会看到所有视频帖子的列表。然后点击任意一张图片，弹出模态组件，动态获取文章标题。

我也想在那里播放视频，所以我尝试运行这个脚本标签：

 < script class="_nbaVideoPlayerScout" data-team="warriors" data-videoId="/video/{{unique videoId from post ajax call}}" data-width="768" data-height="732" src="https://www.nba.com/scout/team/cvp/videoPlayerScout.js"></script>

当模式弹出时，我看到了我点击的帖子/图像的正确标题，并且我看到了与检查器中应有的完全一样的脚本标签，但脚本标签永远不会运行。

我应该以其他方式注入此脚本吗？ （这是在axios响应调用里面）

let theVideoId = response.data.content[0].videoID


let s = document.createElement('script')
s.setAttribute('class', '_nbaVideoPlayerScout')
s.setAttribute('data-team', 'warriors') 
s.setAttribute('data-videoId', '/video/' + theVideoId) 
s.setAttribute('data-width', '768') 
s.setAttribute('data-height', '732') 
s.setAttribute('src', 'https://www.nba.com/scout/team/cvp/videoPlayerScout.js')
document.getElementById('popupVideo').appendChild(s);

MODAL COMPONENT -- 在点击其中一个帖子缩略图时触发

const videoModal = Vue.component('VideoModal', {
props: {
    id: {
    type: String,
    required: true
    }
},
data: function () {
  return {
    post: [],
  }
},
mounted() {
  const singleApi = 'https://cors-anywhere.herokuapp.com/www.nba.com/warriors/api/1.1/json?textformat=html&nid='
  axios.get(singleApi + this.id).then((response) => {
    this.post = response.data.content[0]
    console.log('THE RESPONSE', response)

    let theVideoId = response.data.content[0].videoID


let s = document.createElement('script')
s.setAttribute('class', '_nbaVideoPlayerScout')
s.setAttribute('data-team', 'warriors') 
s.setAttribute('data-videoId', '/video/' + theVideoId) 
s.setAttribute('data-width', '768') 
s.setAttribute('data-height', '732') 
s.setAttribute('src', 'https://www.nba.com/scout/team/cvp/videoPlayerScout.js')
document.getElementById('popupVideo').appendChild(s);
  }).catch((error) => {
    console.log(error)
  })

},
methods: {
  goBack: function () {
    router.go(-1)
  }
},
template:`<div>
<div id="video-popup">
  <button class="close-video-popup" @click="goBack">close me</button>
  <div class="video-popup-wrapper">
    <div class="video-popup--title">{{post.title}}</div>
    <div class="video-popup--video" id="popupVideo"></div>
  <div class="video-popup--share"></div>
</div>
</div>
</div>`
})

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