Can't capture "document.(...).tagName" in phonegap inside inAppBrowser

Question

I open and execute this function inside the opened browser via injected javascript (aka inappbrowser callbacks).

The function works because I see the alerts. The inappbrowser is opened via window.open(...):

var f_el_tname = document.body.getElementsByTagName("the_tag")[0];
  //the above alerted "undefined" in android browser and the correct value in the desktop
  //rewriting variable for debug purposes
f_el_tname = document.body.getElementsByTagName("the_tag");

alert(f_el_tname.length); //this gives "0" in phonegap android browser and "1" in desktop (correct)

for(var i = 0; i < f_el_tname.size; i++){
    alert(f_el_tname); //this does not even run
}

Why exactly is this happening? With "desktop" and "android" I'm referring to accessing the phonegap instance in the desktop or in android, so the code and context are virtually the same. Any idea on why?

EDIT :

I think this might be happening because document in document.body.getElementsByTagName("the_tag"); is referring to the app document and not the document inside the inappbrowser. How can I get the document inside the browser inside the loadstop callback?

The windows is opened by var ref = window.open(...);

EDIT 2: as requested, here is the code

var ref = window.open(url,'_blank','location=yes,toolbar=no,hidden=yes','closebuttoncaption=Return');

ref.addEventListener('loadstop', function(){

    var f_el_tname = ref.document.body.getElementById("l_fdb");
        //the above gives an error

});

Answer 1

Try to do it using inappbrowser.executeScript:

var ref = cordova.InAppBrowser.open(url,'_blank','location=yes,toolbar=no,hidden=yes');

ref.addEventListener('loadstop', function() {

    var code = '(function(){ return document.getElementById("l_fdb"); })()';
    ref.executeScript({code: code}, function(results) {
        console.log('l_fdb: ' + results);
    });
});

Examples of executeScript usage can be found in the plugin tests.