Return the iFrame element once it is loaded

Question

I have a function like the following and I need it to return the iframe element (or an element from the body of the iframe) once the iframe is loaded.

I've been reading on Promises and Async but so far my JS is outdated. Any pointers / help is appreciated. TIA.

get_my_element = await get_element_inside_iframe();
    console.dir(get_my_element); // await returns promise, without await returns undefined. I need the actual element instead.

async function get_element_inside_iframe() {
    myiFrame = document.getElementById('myiFrame');
    if (myiFrame == null) {
        myiFrame = document.createElement('iframe');
        myiFrame.setAttribute('id', 'myiFrame');
        myiFrame.setAttribute('seamless', '');
        myiFrame.setAttribute('srcdoc', '<html><head><style type="text/css">body {background:red}</style></head><body><div id="myelement">hello</div></body></html>');
        document.body.appendChild(myiFrame);
        myiFrame.addEventListener("load", function(){
            let element_inside_iframe = myiFrame.contentWindow.document.getElementById('myelement');
            return element_inside_iframe;
        });
    }
}

Please check post messages: https://gist.github.com/pbojinov/8965299 — Yasir, Feb 21 '18 at 18:05
You're not loading the iframe from a remote source, I don't think it's loaded asynchronously. — Barmar, Feb 21 '18 at 18:09

score 1 · Accepted Answer · answered Feb 22 '18 at 06:52

So finally as per this solution: https://stackoverflow.com/a/14220323/4124433

The following code works:

get_element_inside_iframe().then(
        function(val){
            console.log("value="+val);
        }).catch(function(e){
            console.log('error=' + e)
        });

async function get_element_inside_iframe() {
    return new Promise(function(resolve, reject) {
        myiFrame = document.getElementById('myiFrame');
        if (myiFrame == null) {
            myiFrame = document.createElement('iframe');
            myiFrame.setAttribute('id', 'myiFrame');
            myiFrame.setAttribute('seamless', '');
            myiFrame.setAttribute('srcdoc', '<html><head><style type="text/css">body {background:red}</style></head><body><div id="myelement">hello</div></body></html>');
            document.body.appendChild(myiFrame);
            myiFrame.addEventListener("load", function(){
                let element_inside_iframe = myiFrame.contentWindow.document.getElementById('myelement');
                return resolve(element_inside_iframe);
            });
        }
        else {
            resolve(myiFrame.contentWindow.document.getElementById('myelement'))
        }
    });
}

Return the iFrame element once it is loaded

1 Answers1