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

How to execute an event after fully loading a location.href in JavaScript?

  • 772

In the backend I have a method that returns a PDF file using the GET method, HttpGetto be exact. To access this file I have a function location.href = "Url";where I specify the URL and everything is fine, the file is launched to the user.

The problem is that the user has a nice modal that says to wait and his wait can be longer or shorter, regardless of this the modal is still there. The rendering time varies a lot, it can be 3 seconds or it can be 30.

The following code has a default behavior so that the modal closes in 17500 milliseconds, in other words: 17.5 seconds.

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);
}

How do I know when that location.hrefhas finished loading successfully? Is there any other way? Knowing this I can close the modal just at the time that the user has the "Save file" window and holy remedy.

javascript

1 Answers

  1. Best Answer

    After playing with various options, I managed to make one that fits perfectly to what I'm looking for, for this, I made a variation of the original flow.

    <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>

    From another function I define the URL with all its parameters and I assign an attribute hrefto the div"magicButton" (yes, to the div, this is an HTML flexibility to do strange things that work), so you have an idea, in the function is the following line:

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

    And in the 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