CODEWITHSUNDEEP
javascripthtmliframeelectron
SoulOfSet
SoulOfSet

Reputation: 181

Issue with retrieving Iframe data first time

I have a function 

function serializeUpgradeData(){
     var workingFrame = document.querySelector('#upgradeFrame');
     var iframeWrapper = document.createElement('div');
     iframeWrapper.innerHTML = workingFrame.contentDocument.body.innerHTML;
     var tableData = iframeWrapper.querySelectorAll('div > table:nth-child(2) > tbody > tr');
     return tableData;
 }

This grabs data from an iframe that is added into the document with this function

function loadFileAsFrame(fileName){
    upgradeFrame.id ='upgradeFrame'
    upgradeFrame.style.display = 'none';
    document.body.appendChild(upgradeFrame);
    upgradeFrame.src = fileName;
}

Where upgradeFrame is defined as document.createElement('iframe')

Both of these are run from this

function openFileDialog(){
dialog.showOpenDialog({properties: ['openFile'], filters: [{name:'HTML', extensions:
                      ['html', 'htm']}]}, function (fileName) {

    loadFileAsFrame(fileName);
    var table = serializeUpgradeData()
    console.log(table);
});

}

Where the file is just an html document I am testing with. The first time this is ran iframeWrapper only retrieve <div></div>. If i do it a second time though with the same file it retrieves the data I want.

Note: This is also an electron app

Upvotes: 0

Views: 60

Answers (1)

Revln9
Revln9

Reputation: 847

I suspect that the function serializeUpgradeData is called when there is no 'upgradeFrame' yet, so the solution would be to use callbacks or promises, your call

  function loadFileAsFrame(fileName ,callback){
    upgradeFrame.id ='upgradeFrame'
    upgradeFrame.style.display = 'none';
    document.body.appendChild(upgradeFrame);
    upgradeFrame.src = fileName;
   callback(upgradeFrame)
}

Then use it ;

        function openFileDialog(){
        dialog.showOpenDialog({properties: ['openFile'], filters: [{name:'HTML', extensions:
                              ['html', 'htm']}]}, function (fileName) {

            loadFileAsFrame(fileName , function(upgradeFrame){
            serializeUpgradeData(upgradeFrame);
         });       
     });
}

finally 

function serializeUpgradeData(upgradeFrame){
     var workingFrame = upgradeFrame
     var iframeWrapper = document.createElement('div');
     iframeWrapper.innerHTML = workingFrame.contentDocument.body.innerHTML;
     var tableData = iframeWrapper.querySelectorAll('div > table:nth-child(2) > tbody > tr');
     return tableData;
 }

Now there is another way much simpler to do what you want to do If i understand correctly , you want to pick / choose an html file and display it in an electron window , for that you should use the browserWindow to create a new window and just give it the file url as an entry point . It will give more control , and less code to write.

Hope this helps

Upvotes: 1

Related Questions