iframe下载html源而不是显示它

Question

我正在尝试在页面中嵌入html文件。

我使用以下代码：

<iframe src="{{resource.previewUrl}}" allowfullscreen webkitallowfullscreen mozallowfullscreen height="700" width="100%" frameborder="0" marginheight="0" marginwidth="0" ></iframe>

我通过angular获取的源是Azure blob存储中的index.html文件的地址：

_sc.resource.previewUrl = $sce.trustAsResourceUrl("http://portalxxxxxxx.blob.core.windows.net/path/to/index.html");

当我打开页面时，它会将index.html文件下载到我的计算机上，而不是显示它。如何强制显示？

Answer 1

问题在于 blob 的内容类型属性。如果未明确设置 Blob 的内容类型属性，Azure Blob 存储将分配application/octet-stream.

在您的情况下，因为您没有设置此属性，即使对于您的 HTML 文件，内容类型也设置为默认值，即application/octet-stream. 因为浏览器（尤其是 Chrome）不知道如何处理这种内容类型，所以它会下载它而不是渲染它。

将 blob 的内容类型更改为text/html应该可以解决问题。