javascript - 向 IMG、VIDEO 和 AUDIO 请求添加自定义 header

Question

我正在做一个项目，我们需要在浏览器中为图像、视频和音频内容的 HTTP 请求添加一些自定义 header 。除了可能创建浏览器插件之外，我一直在环顾四周，并没有真正想出一个好的答案。

此时装饰 URL 不是一个选项，因为网关正在寻找 header 。

我可以通过 AJAX 请求获取内容并将 header 添加到 AJAX 请求，然后重新组装内容，对其进行 base64 编码，然后使用 data: 将其提供给图像、视频或音频元素src 的 URI .但这是非常低效的，尤其是对于我们认为内容可能高达 120MB 的视频。这种技术也不允许视频元素缓冲流。

因此，我正在寻找有关如何使用 native 浏览器行为的想法，但要注入(inject)所需的自定义 header 。我能有......吗
<img src="javascript:MyFunction(this)" />
或者
<video src="javascript:MyFunction(this)" />

Answer 1

您想使用浏览器的 native 功能来下载和呈现您的图像、音频和视频请求。简单的解决方案:使用 <iframe/> ，然后当您要下载某些内容时，将 src 设置为图像、音频或视频的 URL。例如...

<iframe src="https://wikipedia.com"/>

我在此代码片段中使用了一个简单的 URL，而不是实际的图像、视频或音频文件，因为不鼓励在线盗链。
通过使用 iframe，浏览器的所有自然下载和渲染元素都将可用，此外，您可以将 iframe 放置在应用程序的任何位置，从而完全控制浏览器的可靠性。