Home / Questions / 155362
Accepted
fredyfx
Asked: 2020-04-13 11:23:19 +0800 CST 2020-04-13 11:23:19 +0800 CST

在 JavaScript 中完全加载 location.href 后如何执行事件？

  • 772

HttpGet确切地说，在后端，我有一个使用 GET 方法返回 PDF 文件的方法。为了访问这个文件，我有一个location.href = "Url";指定 URL 的函数，一切都很好，文件被启动给用户。

问题是用户有一个很好的模式，说等待，他的等待可以更长或更短，不管这个模式仍然存在。渲染时间变化很大，可以是 3 秒，也可以是 30 秒。

以下代码具有默认行为，因此模式在 17500 毫秒内关闭，换句话说：17.5 秒。

HTML：

<a href="#" onclick="ExportarPDF();" id="PDFdoc">
    <input type="button" id="btnFullPDF" value="Ejecutar Reporte" class="btn btn-info mostrarLoadingModal" />
</a>

JavaScript：

function ExportarPDF(){           
    var url = $("#magicButton").attr("href");
    console.log("url");
    console.log(url);
    location.href= url;
    setTimeout(function(){
        $("#modalLoading").modal('hide');
    },17500);
}

我怎么知道什么时候location.href已经成功完成加载？还有其他方法吗？知道了这一点，我可以在用户拥有“保存文件”窗口和圣药时关闭模式。

javascript

1 Answers

  1. Best Answer

    在尝试了各种选项之后，我设法制作了一个完全适合我正在寻找的选项，为此，我对原始流程进行了修改。

    <div id="magicButton">
    <a href="#" onclick="ExportarPDF();" id="PDFdoc">
        <input type="button" id="btnFullPDF" value="Ejecutar Reporte" class="btn btn-info mostrarLoadingModal" />
    </a>
</div>
<div id="magicframe" style="display:none;"></div>

    从另一个函数中，我定义了带有所有参数的 URL，并href为div“magicButton”分配了一个属性（是的，对于 div，这是一种 HTML 灵活性，可以做一些奇怪的事情），所以你有一个想法，在函数中是以下行：

    $("#magicButton").attr("href", aquiLaUrlGeneradaDinamicamente);

    在 Javascript 中

    function ExportarPDF(){           
    var url = $("#magicButton").attr("href");
    console.log("url");
    console.log(url);

    //Aqui verifico si existe el elemento 
    //y de ser cierto, elimino dicho elemento 
    //para evitar posibles errores.
    var existeReportePDFDiv = $("#ReportePDF").length > 0;
    if (existeReportePDFDiv ) {
       $("#ReportePDF").remove();
    }

    //Aqui está la magia: Solucionado con un iframe y jQuery con su método load
    $("<iframe />", { id: "ReportePDF"}).attr("src", url).appendTo('#magicframe');
    $("#ReportePDF").load(function () {
        //Este es el modal del clásico: "Loading Please Wait"
        $("#modalLoading").modal('hide');                
    });
}
    • 3