How to insert just a part of a full page loaded using $.ajax() while executing embedded scripts?

I'm using $.ajax() to load new pages on my site if certain conditions are met (a flash-based radio player being active). However, I'd prefer not to modify the server-side output for this case.

Now I need a way to embed both the response on my page (that's easily done using .replaceWith()) but also execute javascripts embedded on this page.

One thought I had was creating a dummy div like <div id="onload" data-onload="functionname" data-onload-args="json-for-the-function-args"> but maybe there's a better way that doesn't require changing my html code (i.e. a pure js/jquery solution).

---

Note that using $(elem).load() is not possible as it does not evaluate any scripts if only a fragment of the retrieved document is used:

// inject the contents of the document in, removing the scripts

// to avoid any 'Permissio开发者_JS百科n Denied' errors in IE

I don't know any details about this IE problem but of course whatever code you are going to suggest should not cause errors in recent IE versions (I don't care about IE6).

---

Something along the lines of:

$('container').html(text_from_ajax_request);
$('container script').each(function(){
    var $this = $(this);
          src = $this.attr('src');

    src ? $.getScript(src) : eval($(this).text());
});

---

Actually I solved it using a kind of dirty solution that works fine though:

I surround the actual content parts with comments that are not used anywhere else in my server-side template. Then I fetch the whole content with dataType: 'text' and use string functions to extract the interesting part (this is safe since I look for the first starting comment and the last ending comment, so the actual content cannot cause any problems even if it contains those comments for some reason).

After this I use .html() to update my element. The important thing is that I do not create a DOM element from the retrieved html code since that would break the script tags.

---

Have you tried using load()? http://api.jquery.com/load/

I believe it should parse scripts and execute them for you.

EDIT:

Ok, either the bit about load() not being usable as is wasn't in the question or I didn't spot it. With that in mind I created a new version of load without the script stripping and it seems to work find in IE6,7,8, Chrome and Firefox... not really sure why the jQuery library does that:

    <script type="text/javascript">
        $(function() {
            setTimeout(function() {
                $('#target').load2('inject.html #inject');
            }, 5000);
        });

        jQuery.fn.extend({
            load2: function(url, params, callback) {
                if (typeof url !== "string" && _load) {
                    return _load.apply(this, arguments);

                    // Don't do a request if no elements are being requested
                } else if (!this.length) {
                    return this;
                }

                var off = url.indexOf(" ");
                if (off >= 0) {
                    var selector = url.slice(off, url.length);
                    url = url.slice(0, off);
                }

                // Default to a GET request
                var type = "GET";

                // If the second parameter was provided
                if (params) {
                    // If it's a function
                    if (jQuery.isFunction(params)) {
                        // We assume that it's the callback
                        callback = params;
                        params = undefined;

                        // Otherwise, build a param string
                    } else if (typeof params === "object") {
                        params = jQuery.param(params, jQuery.ajaxSettings.traditional);
                        type = "POST";
                    }
                }

                var self = this;

                // Request the remote document
                jQuery.ajax({
                    url: url,
                    type: type,
                    dataType: "html",
                    data: params,
                    // Complete callback (responseText is used internally)
                    complete: function(jqXHR, status, responseText) {
                        // Store the response as specified by the jqXHR object
                        responseText = jqXHR.responseText;
                        // If successful, inject the HTML into all the matched elements
                        if (jqXHR.isResolved()) {
                            // #4825: Get the actual response in case
                            // a dataFilter is present in ajaxSettings
                            jqXHR.done(function(r) {
                                responseText = r;
                            });
                            // See if a selector was specified
                            self.html(selector ?
                            // Create a dummy div to hold the results
                                jQuery("<div>")
                            // inject the contents of the document in, removing the scripts
                            // to avoid any 'Permission Denied' errors in IE
                                    .append(responseText/*.replace(rscript, "")*/)

                            // Locate the specified elements
                                    .find(selector) :

                            // If not, just inject the full result
                                responseText);
                        }

                        if (callback) {
                            self.each(callback, [responseText, status, jqXHR]);
                        }
                    }
                });

                return this;
            } 
        });
    </script>