loadDoc.js

/**
 * Created by victorunda on 4/4/16.
 */

//VPU 2016, Mar 31
function loadDoc() {

    var vucall = confirm("Do you want to continue?");

    // Get a handle to the iframe element
    if (vucall == true) {
        //The setAttribute() method adds the specified attribute to an element.
        var iframe = document.createElement("IFRAME");
        iframe.setAttribute("src", "victor_bash.php");
        vuColorGreen();
        //The getElementById() method accesses the first element with the specified id.
        //The appendChild() method appends a node as the last child of a node.
        document.getElementById("bashlist").appendChild(iframe);

        //ContentDocument property returns the Document object generated by a frame or iframe element.
        //The contentWindow property returns the Window object generated by an iframe element (through the window object...)
        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        vuColorGreen();
        // readyState get the loading status of the current document.
        if (iframeDoc.readyState == 'complete') {

            //disabled the loading button.
            $("#confirm").prop('disabled', true);

            //loaded and reload the DOM. spinner img
            document.getElementById('img').innerHTML ='<i class="fa fa-spinner fa-spin"></i>';

            // the iframe and contenwindow: loaded.
            iframe.contentWindow.onload = function () {
                alert("I am loaded");

            };

            //After is loaded shall disabled the loading button.
            afterLoading();
            $("#confirm").prop('disabled', false);

            //Reload the current document and return.
            // Alternatives:
            //takes an additional argument skipCache so that with using window.location.reload(true) the browser will skip the cache and reload the page from the server.
            //window.location.reload(false) will do the opposite, and load the page from cache if possible.
            setTimeout(function(){
                location.reload(false); // clear DOM
            }, 3000);


            return;
        }

        var timeoutID;
        timeoutID = window.setTimeout(slowAlert, 100);
        // If we are here, it is not loaded. The status: in 1000 = (1)second,
        // see the function slowAlert and function clearAlert.
        //=======================================================
        //setTimeout(function(loadDoc){alert("Time Out");}, 1000);
        //window.setTimeout('loadDoc1();', 100);
        //=======================================================



    function afterLoading() {
        alert("The data has been loaded successfully.");
        //  $("#confirm").prop('disabled', true);
        // scond function to check true || false
        vuColorGreen();
    }
}

//Handle the timeout
function slowAlert() {
    alert("That was really slow!");
    location.reload();
}

    function vuColorRed() {
        document.getElementById('vuColorHtml').style.backgroundColor ="#A93226";

    }

    function vuColorGreen(){
            document.getElementById('vuColorHtml').style.backgroundColor ="#1D8348";
        }

    function vuColorGray(){
        document.getElementById('vuColorHtml').style.backgroundColor ="#808080";
    }
}
// EXTRA========================
//    function clearAlert() {
//        window.clearTimeout(timeoutID);
//    }
// you can create a second button (clearAlert).