Question

I’d like to load a page (with js, css) into a DIV within the same document and javascript in loaded page mustn’t apply on parent page content. Is it possible to set something like default context on the loaded page? see the basic example bellow

parent page:

<h1>normal</h1>
<span class="externalpage">data</span>

<script>
    $(document).ready(function () {
        $.ajax({
            url: "/ajax/Index",
            success: function (data) {
                $(".externalpage").html(data);
            }
        });
    })
</script>

/ajax/Index “subpage” – I’m not alowed to change content of this page.

<h1>ajax</h1>
<script>
    $(document).ready(function () {
        $("h1").text("xxxxxxxxxxxxx");
    })
</script>

Answer 1

From your comments, you want the loaded scripts to execute in some kind of “partial” document context, limited to the contents of your externalpage element (i.e. only the loaded <h1> element must change, not the one outside the <div>).

That can be achieved by temporarily overriding $.find() (not $.fn.find(), which is not the same thing), and substituting the externalpage element in the context argument if it is unspecified or equal to the document itself:

$(document).ready(function () {
    $.ajax({
        url: "/ajax/Index",
        success: function(data) {
            var $root = $(".externalpage");
            var realFind = $.find;
            $.find = function(query, context, extra, seed) {
                return realFind.apply(this, [
                    query,
                    context && context !== document ? context : $root[0],
                    extra,
                    seed
                ]);
            };
            $root.html(data);
            $.find = realFind;
        }
    });
})

jsFiddle features an echo service that I could use to test this solution. You can see the results here.