Question

I am loading an html page through ajax which contains a JS object. How do you get a reference to the object inside the freshly loaded (child) page to the parent page?

Parent:

//parent.html

<script>

    function ParentObject() {
        this.children = new Array();
    }

    var aParentObject = new ParentObject();

    $.get('/url/to/child.html', function(data) {
        $("#child-div").html(data);
    });

</script>

Child:

//child.html

<div>Some html element</div>

...

<script>
    function ChildObject() {
        this.someProperty = "I'm a Child";
    }

    var aChildObject = new ChildObject();
</script>

Answer 1

You should use var when you declare new variable

var aChildObject = new ChildObject();

When you append a html containing a jscript the script will execute and you will get reference after that point. So you must ensure that you access the child variable after you insert it.

$.get('/url/to/child.html', function(data) {
    $("#child-div").html(data);
    //Access your child here
    alert(aParentObject.someProperty);
});