iframe 下载 html 源代码而不是显示它

Posted 2023-03-05

【中文标题】iframe 下载 html 源代码而不是显示它

【英文标题】：iframe downloads the html source instead of displaying it

【发布时间】：2018-11-29 15:28:53

【问题描述】：

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

我使用以下代码：

<iframe src="resource.previewUrl" allowfullscreen webkitallowfullscreen mozallowfullscreen   frameborder="0" margin margin ></iframe>

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

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

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

【问题讨论】：

很可能您的 index.html 文件的内容类型设置为 application/octet-stream。如果是这种情况，请将其内容类型更改为text/html，然后它应该可以正常显示。

内容类型已在 index.html 的 中设置为 text/html ，如 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

我认为这行不通。 Blob 的内容类型应为text/html。

谢谢，现在我明白你的意思了。你是对的。我更改了它，现在它不会下载它，而是将其显示为文件的纯文本。不过，这是一个进步。再次感谢！

你能分享 blob 的实际 URL 吗？

【参考方案1】：

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

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

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

【讨论】：

另外，如果您还没有将 Content-Disposition 设置为“内联”的话。