未触发javascript-window.onload
我正在尝试的是一个工具,它将导出一个pdf文件 有两种情况: <> Li >我不需要检查任何东西,在用户点击导出按钮之后,它将打开一个新的空白窗口,因为我正在使用头文件下载文件,在空白页完成加载后,它将关闭。 案例1的脚本未触发javascript-window.onload,javascript,jquery,web,Javascript,Jquery,Web,我正在尝试的是一个工具,它将导出一个pdf文件 有两种情况: Li >我不需要检查任何东西,在用户点击导出按钮之后,它将打开一个新的空白窗口,因为我正在使用头文件下载文件,在空白页完成加载后,它将关闭。 案例1的脚本 $('body').on("click", '.export-invoice-pdf', function () { // get id let id = $(this).closest('tr').data('id'); let newWindow =
$('body').on("click", '.export-invoice-pdf', function () {
// get id
let id = $(this).closest('tr').data('id');
let newWindow = window.open(
'url' + id,
"_blank"
);
newWindow.onload = function() {
newWindow.close();
};
});
这个很好用
$('body').on("click", '.export-invoice-pdf', function () {
// get id
let id = $(this).closest('tr').data('id');
let newWindow = window.open(
'',
"_blank"
);
//Ajax call to check if there is an available file
$.ajax({
type: 'POST',
url: 'url',
data: {'orderId': orderId},
dataType: 'json',
encode: true,
}).success(function (data) {
console.log('1');
if (data.hasFile === true) {
//if has file do the samething as case 1
newWindow.location.href = 'url' + orderId;
newWindow.onload = function() {
newWindow.close();
};
} else {
alert('no file to export');
}
}).error(function () {
});
});
现在这不起作用了。事实上,我的第一个问题是它没有创建新窗口,因为它将其视为弹出窗口,但经过一个小时的研究,我得到了修复。现在关窗是我的问题
我已经在里面查过了,现在还不只是在这里,但很遗憾,我没能找到关于这个问题的答案。感谢您的任何帮助
更新:对我有效的方法是使用XMLHttpRequest,这样我就不必打开一个新的空白选项卡,这样我的php标题就可以为我提供PDF文件 以下是我正在使用的代码:
let xhr = new XMLHttpRequest();
//we use responseType arraybuffer so that the pdf file won't be blank
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status === 200) {
var blob = new Blob([this.response], {type:"application/pdf"});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "nameofpdf.pdf";
link.click();
}
};
xhr.send();
我使用的url是由一个控制器处理的,该控制器给了我仍然使用php头的pdf文件。试试这个
$('body').on("click", '.export-invoice-pdf', function () {
//Ajax call to check if there is an available file
$.ajax({
type: 'POST',
url: 'url',
data: {'orderId': orderId},
dataType: 'json',
encode: true,
}).success(function (data) {
console.log('1');
if (data.hasFile === true) {
//if has file do the samething as case 1
// get id
const id = $(this).closest('tr').data('id');
Object.assign(document.createElement('a'), {
target: '_blank',
'url' + orderId,
}).click();
// make user close the tab
} else {
alert('no file to export');
}
}).error(function () {
});
});
如果直接用户操作未调用
window.open()
,则弹出窗口阻止程序通常不允许弹出窗口(或以编程方式单击动态创建的超链接等)。每个浏览器都有一个稍微不同的阻止弹出窗口的机制
在您的案例1中,首先,由于用户单击了导出按钮,所有代码都在主线程上运行。这个很好用
在案例2中,打开窗口可能无法在所有浏览器中工作,因为它是从另一个线程调用的。Ajax成功处理程序将在onclick事件完成后很久异步调用
要纠正这一点,可以使用同步请求在主线程上执行所有代码。
您可以使用或异步选项$.ajax({async:false})
。它确保您的代码在所有浏览器更改弹出窗口阻止算法时都能正常工作
实施上述建议有助于解决未触发window.onload()
的问题,但还有另一个改进,即在导航之前添加onload
处理程序:
//if has file do the samething as case 1
newWindow.onload = function() {
newWindow.close();
};
newWindow.location.href = 'url' + orderId;
或者最好在主线程中添加它,就在后面
let newWindow = window.open(
'',
"_blank"
);
newWindow.onload = function() {
newWindow.close();
};
希望有帮助。考虑使用iframe进行此操作。这是一个非常有效的解决方案,可以防止需要侦听另一个窗口事件,这是一种不好的做法,不需要
function downloadFile(fileUrl) {
var downloadIframe = $('#download-iframe');
if (downloadIframe) {
downloadIframe.remove();
}
$('<iframe>', {
id: 'download-iframe',
src: fileURL
}).hide().appendTo('body');
}
函数下载文件(fileUrl){
var downloadIframe=$(“#download iframe”);
如果(下载帧){
downloadIframe.remove();
}
$('', {
id:“下载iframe”,
src:fileURL
}).hide().appendTo('body');
}
为什么不在ajax成功后打开新窗口?@AndrejsGubars,因为如果我将其与案例1中的相同位置放在一起,它将视为弹出窗口,并将被阻止。我所做的是为它做一些变通。问题是在没有网页的情况下打开窗口,会扼杀你用它做任何事情的能力。您不只是将其放入iframe中的原因是什么?@andrejsgubar您可以在控制台上打印“newWindow”值并查看它是否已定义或不为空。尝试此方法后,很遗憾它无法打开新选项卡,浏览器会说弹出窗口已被阻止。@joseff您无法阻止浏览器阻止弹出窗口-这是一个非常有用的浏览器功能用户。在第一次被阻止后,你可以启用它,它不会再次被封锁在同一个域上。@ Shahar,我的代码正在工作,它将打开空白窗口并下载所需的文件。唯一的问题是当关闭新打开的窗口时,不知道为什么它不工作。控制台中是否有错误?我会尝试将让newWindow
放在函数外部,以确保它首先不是范围问题。@Josefph我认为它不起作用的原因是,在您注册newWindow.onload
事件时,它可能已经发生了。意思是newWindow.close()代码>将永远不会被调用。相反,您可以注册newWindow.close()调用window.open()
后立即进行编码>并决定稍后处理-例如,设置一个变量shouldCloseWIndow=true
,然后在if(data.hasFile==true)
上首先检查该变量。谢谢。我很晚才再次看到这篇文章。但我开始工作的想法是使用XMLHttpRequest,这样我就不必打开新选项卡来下载文件。