URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
备注： 此特性在 Web Worker 中可用
备注： 此特性在 Service Worker 中不可用，因为它有可能导致内存泄漏。
语法
objectURL = URL.createObjectURL(object);
参数
-
object用于创建 URL 的
File对象、Blob对象或者MediaSource对象。
返回值
一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。
内存管理
在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。
浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
实例如下：
预览视频代码
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<div>
<video width="400" height="500" controls="controls" />
</div>
<input type="file" accept="video/*" />
<script type="text/javascript">
$("input").change(function(){
var files = this.files;
if(!files.length) return;
$("video").attr("src", window.URL.createObjectURL(files[0]));
$("video").get(0).play();
});
</script>
<textarea name="" id="text" cols="40" rows="10" />
<button id="save" type="button">保存</button>
<script>
document.querySelector("#save").addEventListener("click", saveFile);
function saveFile() {
var inputValue = document.querySelector("#text").value;
var blob = new Blob([inputValue], { type: "text/plain;charset=utf-8" });
const fileName = "test.txt";
if ("msSaveOorOpenBlob" in navigator) { //IE 浏览器
window.navigator.msSaveOorOpenBlob(blob, fileName);
}
else {
//不是IE浏览器
var url = window.URL.createObjectURL(blob);
var link = document.createElement("a");
link.href = url;
link.setAttribute("download", fileName);
link.click();
}
}
</script>
web worker 方式
<html>
<body>
<script id="worker" type="app/worker">
// worker线程中之行 ，该线程下没有windoww/global对象，
// 有this/self，但是代表 DedicatedWorkerGlobalScope
console.log("self", self);
self.onmessage = (e) => {
const { worker } = e.data;
self.postMessage({ message: "connected" });
};
</script>
<script type="module"> // 主线程
const workDocObjContent = document.querySelector("#worker").textContent;
const blob = new Blob([workDocObjContent]);
const url = window.URL.createObjectURL(blob);
const worker1 = new Worker(url, {
name: "zzz",
credentials: "same-origin",
}); // 开启work线程
console.log("worker1", worker1);
worker1.postMessage({ command: "connect" });
worker1.onmessage = (e) => {
console.log("index page receive", e.data);
};
</script>
</body>
</html>
ps：
1. worker1.postMessage({ workerTrans: worker1 });
// wrong ，不能把worker对象通过postMessage传给worker线程，会报错
2. <script id="worker" type="app/worker"> ...someCode run in worker process </script>
//表示该部分代码中woker线程中之行， 其中的代码也可以放到js中
