CODEWITHSUNDEEP
javascriptdomparentdocument
HalfTitle
HalfTitle

Reputation: 147

'document' within a child window unexpectedly refers to parent

I opened a child window, then wrote HTML and so on to it using

childhandle.document.write(...)

That worked fine. The HTML included an input with ID 'foo'. Then I tried

childhandle.document.addEventListener('DOMContentLoaded', function(event) { (document.getElementById('foo').value = 'bar'; });

This gave a TypeError. It works if I change it to

childhandle.document.addEventListener('DOMContentLoaded', function(event) { (childhandle.document.getElementById('foo').value = 'bar'; });

It seems that with version one the code must have been looking for element 'foo' in the parent document. That seems odd - surely the EventListener function is running in the scope of the child? Can someone explain what's happening here? Thanks.

Upvotes: 1

Views: 36

Answers (1)

Musa
Musa

Reputation: 97707

The anonymous callback function is defined in the parent window, where childhandle is defined and where document refers to the parent window document, where it is executed wouldn't matter.
Try using this to refer to the current document.

childhandle.document.addEventListener('DOMContentLoaded', 
    function(event) { 
        this.getElementById('foo').value = 'bar'; 
    }
);

Upvotes: 1

Related Questions