Javascript iframe src 设置大的 base64 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28766667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframe src set large base64 data
提问by rozochkin
I have iframe for PDF preview and ton of base64 data (more than 10mb).
我有用于 PDF 预览的 iframe 和大量 base64 数据（超过 10mb）。
<iframe src="" type="application/pdf"></iframe>'
How can i use this data? When i try to set a data:
我如何使用这些数据？当我尝试设置数据时：
$("iframe").attr("src", data);
Some browsers are crashing.
一些浏览器正在崩溃。
I don't have src link. This data received by ajax. Any suggestions?
我没有 src 链接。这个数据由ajax接收。有什么建议？
回答by Oliv
Try this: Maybe it's too late:
试试这个：也许为时已晚：
<iframe src="data:application/pdf;base64,YOUR_BINARY_DATA" height="100%" width="100%"></iframe>
回答by FellowMD
If you need to fetch via AJAX, to set headers or something, check out URL.createObjectURL(). Given a chunk of bytes, it can give you something suitable for the srcof the iframe.
如果您需要通过 AJAX 获取、设置标题或其他内容，请查看URL.createObjectURL(). 给定一大块字节，它可以为您提供适合srciframe 的内容。
var xhr = new XMLHttpRequest();
xhr.open('GET', 'some.pdf');
xhr.onreadystatechange = handler;
xhr.responseType = 'blob';
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.send();
function handler() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
// this.response is a Blob, because we set responseType above
var data_url = URL.createObjectURL(this.response);
document.querySelector('#output-frame-id').src = data_url;
} else {
console.error('no pdf :(');
}
}
}
The object URLs are pretty interesting. They're of the form blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. You can actually open them in a new tab and see the response, and they're discarded when the context that created them is closed.
对象 URL 非常有趣。他们的形式blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170。您实际上可以在新选项卡中打开它们并查看响应，当创建它们的上下文关闭时，它们将被丢弃。
Here's a full example: https://github.com/courajs/pdf-poc
这是一个完整的例子：https: //github.com/courajs/pdf-poc
回答by steady rain
Not sure what in particular is the problem, but here's a jsFiddle that is an example how you can use iframe+ setting its srcusing jQuery:
不确定具体是什么问题，但这里有一个 jsFiddle，它是一个示例，说明如何使用iframe+src使用 jQuery设置它：
There might be other issues causing browser crashes on your end that are unrelated to setting srcon iframe.
可能还有其他问题导致浏览器崩溃，这些问题与srciframe上的设置无关。
回答by dfsq
I don't have src link. This data received by ajax.
我没有 src 链接。这个数据由ajax接收。
If you load data with AJAX you should be able to feed the sameurl directly to iframe, bypassing AJAX data load and $("iframe).attr("src", data)phases. If this AJAX request returns just base64 data, then you don't need to make request. Just set set iframe's src to thisurl directly and it should work.
如果您使用 AJAX 加载数据，您应该能够将相同的url 直接提供给 iframe，绕过 AJAX 数据加载和$("iframe).attr("src", data)阶段。如果此 AJAX 请求仅返回 base64 数据，则您无需发出请求。只需将设置 iframe 的 src直接设置为这个url，它应该可以工作。
