CODEWITHSUNDEEP
javascriptiframeonload
Sjf
Sjf

Reputation: 25

Iframe onload seems to not work in time

after dynamicly creating some iframes, setting src and onload, I expect that the contents would be available for putting it to an array and sort the array. Next would be removing the iframes (interesting content already put in array) and create a table on my HTML-page. When no alert is set before sorting, the array is empty as the onload fires just before finishing the script. When an alert is place before sorting,I found the onload-procedure fired, array was populated and everything works fine?!! But I don't want to put an alert, can anyone explain what I did wrong? It's my first script so please help me to understand.

function LoadFile( ) {
var FName, PName, myID, myFrame;
var myBody  = document.getElementById("StartList");
for ( var i = 0; i < FileList.length; i++ ) {
    // Read input file into frame
    FName   = FileList[i].FName;
    PName   = FName + ".html";
    myID    = "iframe" + i;
    // Create frame.
    myFrame = document.createElement("iframe");
    myFrame.setAttribute("id", myID);
    myFrame.setAttribute("width","0");
    myFrame.setAttribute("height","0");
    myFrame.setAttribute('src', PName);
    //Attach onload-event to frame, triggering ReadTableInfo.
    if (myFrame.attachEvent){
        myFrame.attachEvent("onload", function(){
            ReadTableInfo();
        });
    } else {
        myFrame.onload = function(){
            ReadTableInfo();
        };
    }
    myBody.appendChild(myFrame);
}
}

function ReadTableInfo() {
var a = document.getElementsByTagName("iframe")[idx];
var p = FileList[idx].FName;
var b = (a.contentWindow || a.contentDocument);
var td;
if ( b.document) {
    b = b.document;
    // Get and process table with functions and procedures.
    var myTable = b.getElementsByTagName("Table")[5];
    var myList  = myTable.getElementsByTagName("TR");
    var Name = "";
    var Desc = "";
    for ( var j = 0; j < myList.length; j++) {
        Name = myTable.getElementsByTagName("TR") [j].getElementsByTagName("A")[0].innerHTML;
        if ( myTable.getElementsByTagName("TR")[j].getElementsByTagName("TD")[1] != null) {
            td = myTable.getElementsByTagName("TR")[j].getElementsByTagName("TD")[1];
            Desc = td.textContent || td.innerText || "";
        }
        if ( searchval == "" || ( TestVal.test(Name) && searchkey == 1 ) || ( TestVal.test(Desc) && searchkey == 2 ) ) {
            ProcList[ProcList.length++] = new  AddProcList(Name.toLowerCase(), p.toLowerCase(), Desc);
        }
        Name = "";
        Desc = "";
    }
    idx++;
}
}

function UpdateList( opt ) {
searchval = document.getElementById("edtSearchVal").value;
TestVal = new RegExp(".", "i");
if ( searchval !== "" ) {
    if ( opt == 2 ) {
        TestVal = new RegExp(searchval, "i"); // searchpattern for RegExp descriptions
    } else {
        TestVal = new RegExp(searchval.replace(" ","_"), "i"); // searchpattern for RegExp.
    }
}
switch ( opt ) {
    case 1: searchkey = 1;
            break;
    case 2: searchkey = 2;
            break;
    default: 
            searchkey = 3;
}
Init();
// Get package names from index.
SetFileList();  // Determines which external files to examine.
LoadFile();     // Loads the external files into iframes to be used later.

alert("Start generating list, this may take a while."); // Necessary to read frames! Don't know why???

var sortkeys = {FName:"a",PName:"a"}; // Sorting order of ProcList, which will be the listorder.
ProcList.keySort(sortkeys);           // Sort ProcList.
TableCreate();     // Make new table with all entries in ProcList
}

Thanks for any comments, just here to learn from others :))

Upvotes: 0

Views: 343

Answers (1)

amit
amit

Reputation: 337

your LoadFile(); is loading content to iframe , and alert() is giving just enough time for iframe content to load completely, hence rest of the code works. If you remove alert then rest of the code is executed immediately before iframe content is loaded. I would suggest to put onload even inside iframe page as well. Then propagate this event to parent window. To access parent container window you can do window.parent inside iframe.

Upvotes: 1

Related Questions