我有 html 网站文件夹。我必须在 iframe 中动态加载该网站，保持 src 属性为空

Posted 2023-03-28

【中文标题】我有 html 网站文件夹。我必须在 iframe 中动态加载该网站，保持 src 属性为空

【英文标题】：I have html website folder. I have to load that website dynamically in iframe keeping src attribute empty

【发布时间】：2020-12-09 10:39:13

【问题描述】：

我已将这些文件存储在 Azure blob 中，并且可以使用 blob url 进行访问。 文件夹结构是这样的。 Folder structure

如果我在 iframe 中使用 blob url，我可以毫无问题地加载网站。 但我想加载该网站而不直接在 iframe 的 src 属性中使用 blob url。

我利用 axios 请求 blob url 并获取数据然后写入 iframe

axios.get("blob_url", headers:header)
            .then((response) => 
               var html =response.data
               const iframe =document.getElementById("di-fd-frame-xapi")

               iframe.contentWindow.document.open();
               iframe.contentWindow.document.write(html);
               iframe.contentWindow.document.close()
)

我能够获取 index.html 文件的内容并写入 iframe，但我得到的是空白页。

请帮忙提供解决方案

如何在 iframe 中加载此网站 有没有其他方法可以在网站中加载文件而不暴露 iframe 中的 url。

【问题讨论】：

不暴露框架中的url有什么好处？在浏览器的网络视图中我仍然会看到被调用的 url？

@RaimondKuipers 感谢您调查问题。实际上我可以在发出请求时设置标题，并且我可以控制在我们网站之外发出的任何请求。

您在浏览器控制台中看到任何错误吗？

@HarshitaSingh-MSFT Yaa“未捕获的语法错误：意外令牌'

这是因为 HTML 未呈现为文本，因此出现此错误。如果你真的想渲染 HTML，你可以使用dangerouslySetInnerHTML 属性：<td dangerouslySetInnerHTML=__html: html /> React 会强制使用这种繁琐的语法，这样你就不会意外地将文本渲染为 HTML 并引入 XSS 错误。请验证它是否有效，如果有效，我会将其作为答案发布。

【参考方案1】：

这是因为 HTML 未正确呈现，因此出现此错误。

如果你真的想渲染 HTML，你可以使用 dangerouslySetInnerHTML 属性：<td dangerouslySetInnerHTML=__html: html /> React 会强制使用这种繁琐的语法，这样你就不会意外地将文本渲染为 HTML 并引入 XSS 错误。