javascript - 在 DOM 加载后执行 append 的 <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>

当模式弹出时，我看到了我点击的帖子/图片的正确标题，并且我看到的脚本标签与检查器中应该显示的完全一样，但脚本标签从未运行。

我应该以其他方式注入(inject)此脚本吗？ (这是在 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);

模态组件——点击其中一个帖子缩略图时触发

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);

然后繁荣、脚本运行和视频加载。

这非常有趣，因为“为什么”，对吧？

编辑:另外，尝试其他脚本注入(inject)方式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 中完成注入(inject).

codepen