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

问题描述

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

如果我在Iframe中使用Blob网址，则可以轻松加载网站。 但是我想加载该网站，而不直接在iframe的src属性中使用blob网址。

我利用axios发出请求以获取Blob网址并获取数据，然后将其写入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，但是我的页面空白。

请帮助提供解决方案

1. 如何在iframe中加载此网站
2. 还有其他方法可以在网站中加载文件而不暴露iframe中的网址。

解决方法

这是因为HTML不能正确呈现，因此会出现此错误。

如果您确实要呈现HTML，则可以使用dangerouslySetInnerHTML属性：<td dangerouslySetInnerHTML={{__html: html}} /> React强制使用这种故意繁琐的语法，这样您就不会意外地将文本呈现为HTML并引入XSS错误。