什么是必需
我有一个HTML / CSS文档,我想在另一个Webapp上加载并修改。
选择使用iframe,这样任何样式父级都不会泄漏到要编辑的文档中。
做了什么
原始文档保存在S3上。 S3已正确配置为CORS支持。
使用crossorigin =“anonymous”属性放置图像或视频标记时。发送正确的源头,S3在响应头中设置Access-Control-Allow-Origin。
问题
从同一个S3存储桶中加载iframe中的html文档时。我没有在响应头中获取Access-Control-Allow-Origin,因为没有设置CORS的原始头。
因此,如果请求中没有收到正确的原始标头,S3将不会发送Access-Control-Allow-Origin。
已尝试解决方案
我很满意只适用于现代浏览器的解决方案。因此已经研究过了 HTML5 iframe属性沙箱和无缝。但在这种情况下,他们似乎都没有帮助。
我还尝试通过xhr2加载内容,内容类型设置为文档并设置正确的原始标题。并将其添加到页面上的iframe中。这个问题是文档头部的css没有加载。
还有其他解决方案吗?我期待一个可以在iframe上设置的属性,但在w3c规范中却没有。
答案 0 :(得分:1)
我认为解决方案就是你已经尝试过的方法:
通过AJAX加载HTML,使用以下命令将其添加到iframe:
document.open() / document.write() / document.close()
然后重写所有相对链接到绝对链接
/css/style.css -> <origina-domain>/css/style.css
您需要为所有CSS,JS,图像等执行此操作。