个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
30
4
我有一个网络应用程序。它在 Google Chrome 中运行，不需要在任何其他浏览器中运行。
我有在服务器上生成并在 AJAX 请求中发送回客户端的 PDF 数据。
我从 PDF 数据创建了一个 blob。
我使用 window.URL.createObjectURL 从 blob 创建一个 URL，然后将其加载到以前创建的用于显示 PDF 的窗口(我的 preview_window)中。
为了加载 URL，我设置了 preview_window.location.href。
我想调用 revokeObjectURL 以避免在窗口中生成和预览新的 PDF 时浪费越来越多的资源。
问题是在设置 preview_window.location.href 后立即调用它为时过早，并阻止了 PDF 的显示。因此，我想仅在加载 URL 后调用 revokeObjectURL。
为此，我尝试将 preview_window.onload 设置为回调，但它永远不会被调用。
我想知道:
<html>
<head>
<title>Show PDF Demo</title>
<script>
var build_blob = function(mime_type, data) {
var buf = new ArrayBuffer(data.length);
var ia = new Uint8Array(buf);
for (var i = 0; i < data.length; i++) ia[i] = data.charCodeAt(i);
var blob = new Blob([ buf ], { type: mime_type });
return blob;
};
window.onload = function(e) {
document.getElementById('preview_button').onclick = function(e) {
// open the window in the onclick handler so we don't trigger popup blocking
var preview_window = window.open(null, 'preview_window');
// use setTimeout to simulate an asynchronous AJAX request
setTimeout(function(e) {
var pdf_data = atob(
"JVBERi0xLjQKMSAwIG9iago8PCAvVHlwZSAvQ2F0YWxvZwovT3V0bGluZXMgMiAwIFIKL1BhZ2Vz" +
"IDMgMCBSCj4+CmVuZG9iagoyIDAgb2JqCjw8IC9UeXBlIC9PdXRsaW5lcwovQ291bnQgMAo+Pgpl" +
"bmRvYmoKMyAwIG9iago8PCAvVHlwZSAvUGFnZXMKL0tpZHMgWzQgMCBSXQovQ291bnQgMQo+Pgpl" +
"bmRvYmoKNCAwIG9iago8PCAvVHlwZSAvUGFnZQovUGFyZW50IDMgMCBSCi9NZWRpYUJveCBbMCAw" +
"IDUwMCAyMDBdCi9Db250ZW50cyA1IDAgUgovUmVzb3VyY2VzIDw8IC9Qcm9jU2V0IDYgMCBSCi9G" +
"b250IDw8IC9GMSA3IDAgUiA+Pgo+Pgo+PgplbmRvYmoKNSAwIG9iago8PCAvTGVuZ3RoIDczID4+" +
"CnN0cmVhbQpCVAovRjEgMjQgVGYKMTAwIDEwMCBUZAooU01BTEwgVEVTVCBQREYgRklMRSkgVGoK" +
"RVQKZW5kc3RyZWFtCmVuZG9iago2IDAgb2JqClsvUERGIC9UZXh0XQplbmRvYmoKNyAwIG9iago8" +
"PCAvVHlwZSAvRm9udAovU3VidHlwZSAvVHlwZTEKL05hbWUgL0YxCi9CYXNlRm9udCAvSGVsdmV0" +
"aWNhCi9FbmNvZGluZyAvTWFjUm9tYW5FbmNvZGluZwo+PgplbmRvYmoKeHJlZgowIDgKMDAwMDAw" +
"MDAwMCA2NTUzNSBmCjAwMDAwMDAwMDkgMDAwMDAgbgowMDAwMDAwMDc0IDAwMDAwIG4KMDAwMDAw" +
"MDEyMCAwMDAwMCBuCjAwMDAwMDAxNzkgMDAwMDAgbgowMDAwMDAwMzY0IDAwMDAwIG4KMDAwMDAw" +
"MDQ2NiAwMDAwMCBuCjAwMDAwMDA0OTYgMDAwMDAgbgp0cmFpbGVyCjw8IC9TaXplIDgKL1Jvb3Qg" +
"MSAwIFIKPj4Kc3RhcnR4cmVmCjYyNQolJUVPRg=="
);
/*
Warning: for my Chrome (Version 44.0.2403.155 m), the in-built PDF viewer doesn't seem
to work with a blob when this html page is loaded from the local filesystem. I have only
got this to work when fetching this page via HTTP.
*/
var pdf_blob = build_blob('application/pdf', pdf_data);
var pdf_url = window.URL.createObjectURL(pdf_blob);
preview_window.onload = function(e) {
console.log("preview_window.onload called"); // never happens
window.URL.revokeObjectURL(pdf_url);
};
preview_window.location.href = pdf_url;
console.log("preview_window.location.href set");
}, 500);
};
};
</script>
</head>
<body>
<button id="preview_button">Show Preview</button>
</body>
</html>
最佳答案
如您所见，您无法设置 open()从开启者编辑窗口的 onload 事件。
您必须在第二页中注入(inject)一些脚本，该脚本将调用它的 window.opener。职能。
但由于您打开的是 pdf 文件，浏览器将重新解析整个页面，并且您注入(inject)的代码将消失。
正如您在评论中发现的那样，解决方案是将 blob 的 url 注入(inject) iframe 中，然后等待此 iframe 的加载事件。
方法如下:
index.html
<script>
// The callback that our pop-up will call when loaded
function imDone(url){
window.URL.revokeObjectURL(url);
}
var build_blob = function(mime_type, data) {
var buf = new ArrayBuffer(data.length);
var ia = new Uint8Array(buf);
for (var i = 0; i < data.length; i++) ia[i] = data.charCodeAt(i);
var blob = new Blob([ buf ], { type: mime_type });
return blob;
};
var preview_window=null;
window.onload = function(e) {
document.getElementById('preview_button').onclick = function(e) {
if(preview_window===null || preview_window.closed){
// open the window in the onclick handler so we don't trigger popup blocking
preview_window = window.open('html2.html', 'preview_window');
}
// avoid reopening the window since it may cache our last blob
else preview_window.focus();
// use setTimeout to simulate an asynchronous AJAX request
setTimeout(function(e) {
var pdf_data = /* Your pdf data */
var pdf_blob = build_blob('application/pdf', pdf_data);
var pdf_url = window.URL.createObjectURL(pdf_blob);
// Simple loop if our target document is not ready yet
var loopLoad = function(url){
var doc = preview_window.document;
if(doc){
var iframe = doc.querySelector('iframe');
if(iframe)iframe.src = url;
else setTimeout(function(){loopLoad(url);},200);
}
else setTimeout(function(){loopLoad(url);},200)
};
loopLoad(pdf_url);
}, 0);
};
};
</script>
<html>
<head>
<title>Iframe PDF Demo</title>
<style>
body, html, iframe{margin:0; border:0}
</style>
</head>
<body>
<iframe width="100%" height="100%"></iframe>
<script>
document.querySelector('iframe').onload = function(){
//first check that our src is set
if(this.src.indexOf('blob')===0)
// then call index.html's callback
window.opener.imDone(this.src);
}
</script>
</body>
</html>
关于javascript - 如何仅在 URL 加载后调用 revokeObjectURL？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32180732/
30
4
0
我正在为网站编写高级图片上传功能。为了在浪费时间和客户端和服务器资源将图像上传到服务器之前允许执行所有图像配置，我尝试使用 HTML 5 功能来支持在所有图像裁剪后批量上传的完全客户端功能集并进行了其
我有一个网络应用程序。它在 Google Chrome 中运行，不需要在任何其他浏览器中运行。 我有在服务器上生成并在 AJAX 请求中发送回客户端的 PDF 数据。 我从 PDF 数据创建了一个 b
我正在使用 blob 下载文件，问题是我想在下载文件后保留对象 URL，而不对代码库进行重大更改。 所以选项之一是不调用 URL.revokeObjectURL(); 依靠浏览器的垃圾收集器来避免任何
如果我理解正确，URL.createObjectURL 创建一个表示文件或 blob 的 URL。因为 URL 只是一个字符串，所以浏览器无法知道您何时使用完 URL 代表的资源，因此提供了一个 UR
我正在制作一个 html 界面，通过拖放和多选文件在服务器上上传图像。我想在将图片发送到服务器之前显示这些图片。所以我首先尝试使用 FileReader 但我遇到了一些问题，例如 this post
-----更新------ 我注释掉了 window.URL.revokeObjectURL( imgSrc ); 现在调用在所有浏览器中都有效。似乎该网址在 Chrome 中被撤销得太早了。我仍然很
我是一名优秀的程序员,十分优秀！