React iframe 在 IE 15 Windows 10 上显示包含 base64 PDF 数据的空白页

Question

React iframe在IE 15 Windows 10上显示带有base64 pdf数据的空白页。我用浏览器堆栈测试了它。如果我提供一个真正的 pdf 文件，它将在 IE 中工作。

这是我的测试项目。

主代码如下：

function App() {
const meta = 'data:application/pdf;base64,';
const data = meta +  
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G';
return (
<div className="App">
<Iframe src={data}
width="450px"
height="450px"
id="myId"
className="myClassname"
display="initial"
position="relative"/>
</div>
);
}

Answer 1

IE不支持将数据URL作为src属性的iframe。你可以在犬中检查它。它表明支持仅限于图像和链接资源，如IE中的CSS或JS。另请查看此文档：

数据 URI 仅支持以下元素和/或 属性。

• 对象(仅限图像(
• 图像
• 输入类型=图像
• 链接
• 接受 URL 的 CSS 声明，例如 background、backgroundImage 等。