iframe下载html源而不是显示它

Question

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

我使用以下代码：

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

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

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

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

Answer 1

问题是由于Blob的content-type属性所致。如果未明确设置Blob的content-type属性，则Azure Blob存储将分配application/octet-stream。

在这种情况下，因为您没有设置此属性，即使对于HTML文件，也将内容类型设置为默认值，即application/octet-stream。由于浏览器（特别是Chrome）不了解如何处理此内容类型，因此它会下载而不是呈现它。

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