如何将 Blob 设置为 iframe 的“ src ”

在Web开发中，有时候我们需要将一些动态生成的内容（比如从客户端生成的PDF文件或图像）直接显示到iframe中。当这些内容是二进制数据时，我们可以用Blob对象来处理，然后将这个Blob对象转换成一个URL，赋值给iframe的src属性。

步骤如下：

1. 创建Blob对象： 首先，您需要有一个Blob对象。Blob对象可以通过多种方式构建，比如从ArrayBuffer，字节数组等。

   javascript
   const blob = new Blob(["Hello, world!"], { type: 'text/plain' });

2. 创建Blob URL： 使用URL.createObjectURL()方法将Blob对象转换成一个可以访问的URL。这个方法会生成一个唯一的URL，指向内存中的这个Blob对象。

   javascript
   const blobUrl = URL.createObjectURL(blob);

3. 设置iframe的src： 将这个生成的URL设置为iframe的src属性。

   html
   <iframe src="" id="myiframe"></iframe>
   <script>
       document.getElementById('myiframe').src = blobUrl;
   </script>

安全性注意事项：

• 当使用Blob URL时，因为这个URL是指向客户端本地的资源，通常认为是安全的，但还是需要确保Blob的内容是可信的，避免XSS攻击。

释放Blob URL： 在不需要Blob URL时，应当使用URL.revokeObjectURL()来释放掉这个URL，以便浏览器可以回收相关资源。

javascript
URL.revokeObjectURL(blobUrl);

使用场景示例：

假设我们需要在客户端生成一张图，并显示在iframe中。

javascript
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 绘制一个简单的红色矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);

// 将Canvas转换为Blob
canvas.toBlob(function(blob) {
    const url = URL.createObjectURL(blob);
    document.getElementById('myiframe').src = url;

    // 可以在适当的时候释放URL
    // URL.revokeObjectURL(url);
}, 'image/png');

上述代码中，我们创建了一个canvas，绘制了图形，然后转换成Blob，最后将其显示在iframe中。这种方式可以用于动态生成的内容，例如客户端图像处理、PDF生成等。