javascript -- Worker加载跨域

worker 加载js脚本跨域解决方案

错误代码如下
Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at 'host' cannot be accessed from origin 'host'.

解决方案
传入blob url

传入bol url可以用webpack worker-loader ，这里我们讲如何原生实现

写一个根据URL获取blob的请求，然后转URL

实现代码如下

export const getBlobUrl = (url) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.responseType = 'blob'
  xhr.onload = function () {
    if (this.status === 200) {
      const blob = this.response
      const b = URL.createObjectURL(blob)
      resolve(b)
    }
  }
  xhr.send()
})

使用即可

---

上面是利用blob类型指定获取，下面搞个我们手动转换的代码, 可以修改第三方的代码QAQ，如下

function dataURItoBlob(byteString) {
  var mimeString = 'application/javascript'
  var arrayBuffer = new ArrayBuffer(byteString.length) //创建缓冲数组
  var intArray = new Uint8Array(arrayBuffer) //创建视图

  for (var i = 0; i < byteString.length; i++) {
      intArray[i] = byteString.charCodeAt(i)
  }
  return new Blob([intArray], {type: mimeString})
}
export const getBlobUrl = (url) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.onload = function () {
    if (this.status === 200) {
      let text = this.response
      text = 'console.log(WorkerGlobalScope);' + text
      const blob = dataURItoBlob(text)
      const b = URL.createObjectURL(blob)
      resolve(b)
    }
  }
  xhr.send()
})

---

忘了讲故事，
这个来源于加载js是第三方的，里面的代码在某些手机上面报错了QAQ，而你没有权限。。

---

在这里我遇到一个问题 Uncaught ReferenceError: window is not defined

找不到window

QAQ 哭哭惹。

--END--

作者：谢秀岳
链接：https://www.jianshu.com/p/d4b66e3dbfff
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。