tcplayer-plugin/src/utils.js

基于腾讯云播放器的组件库，支持Vue2、Vue3和原生JS

// 动态加载资源（JS和CSS）
export function loadResource (sources, cb) {
    let arr = [...sources]
    if (!arr.length) {
        cb && cb()
        console.log('resouce loaded')
        return false
    }
    let item = arr.shift()
    if (!item) {
        loadResource(arr, cb)
        return false
    }
    if (item.endsWith('.js')) {
        getJS(item, () => {
            loadResource(arr, cb)
        })
    }else if (item.endsWith('.css')) {
        getCss(item, () => {
            loadResource(arr, cb)
        })
    }else {
        console.warn('no suport resource:',item)
        loadResource(arr, cb)
    }
}

// 动态加载JS文件
function getJS (url, callback) {
    if(document.querySelector(`script[src="${url}"]`)) {
      console.log(url,':已存在')
      callback && callback();
      return false
    }
    var script = document.createElement('script'),
        fn = callback || function(){};
    script.type = 'text/javascript'

      //IE
      if(script.readyState){
          script.onreadystatechange = function(){
              if( script.readyState == 'loaded' || script.readyState == 'complete' ){
                  script.onreadystatechange = null;
                  fn();
              }else{
                script.onreadystatechange = null;
                fn();
              }
          };
      }else{
          //其他浏览器
          script.onload = function(){
              fn();
          };
          script.onerror = function(err){
              fn();
              console.log(err)
          };
      }
      script.src = url;
      document.querySelector('body').appendChild(script)   
}

// 动态加载CSS文件
function getCss(url, callback){
    if(document.querySelector(`link[href="${url}"]`)){
      console.log(url,':已存在')
      callback && callback();
      return false
    }
    var css = document.createElement('link'),
        fn = callback || function(){};
        css.rel = 'stylesheet';
      //IE
      if(css.readyState){
          css.onreadystatechange = function(){
              if( css.readyState == 'loaded' || css.readyState == 'complete' ){
                  css.onreadystatechange = null;
                  fn();
              }else{
                css.onreadystatechange = null;
                fn();
              }
          };
      }else{
          //其他浏览器
          css.onload = function(){
              fn();
          };
          css.onerror = function(err){
              fn();
              console.log(err)
          };
      }
      css.href = url;
      document.querySelector('head').appendChild(css)   
}

// 解析DOM字符串
export function parseDom (html) {
    let ele = document.createElement('div')
    ele.innerHTML = html.trim()
    return ele.childNodes[0]
}

// 在指定元素后插入新元素
export function afterinsert(newElement, targetElement){
    const parent = targetElement.parentNode;　　//得到父节点
    if (parent.lastChild === targetElement) {
        parent.appendChild(newElement);　
    }else{　　
        parent.insertBefore(newElement,targetElement.nextSibling);　　//否则，当前节点的下一个节点之前添加
    }
}

// 判断是否是DOM元素
export function isElement(node) {
    return node && node.nodeType === 1;
}