Как вставить только часть полной страницы, загруженной с помощью $ .ajax () при выполнении встроенных сценариев?

Question

Я использую $.ajax() для загрузки новых страниц на моем сайте, если выполняются определенные условия (активен радиоплеер на основе флэш-памяти). Однако я бы предпочел не изменять вывод на стороне сервера для этого случая.

Теперь мне нужен способ встраивания как ответа на мою страницу (это легко сделать с помощью .replaceWith()), так и выполнения javascripts, встроенных в эту страницу.

Одна мысль у меня была при создании фиктивного элемента вроде <div id="onload" data-onload="functionname" data-onload-args="json-for-the-function-args">, но, возможно, есть лучший способ, который не требует изменения моего HTML-кода (то есть чисто решение js / jquery).

---

Обратите внимание, что использование $(elem).load() невозможно , а невозможно, так как он не оценивает сценарии, если используется только фрагмент полученного документа:

// Внедрить содержимое документа, удалив сценарии
// чтобы избежать ошибок «Отказано в доступе» в IE

Я не знаю каких-либо подробностей об этой проблеме IE, но, конечно, какой бы код вы ни предложили, он не должен вызывать ошибки в последних версиях IE (меня не волнует IE6).

Answer 1

Что-то вроде:

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

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

Answer 2

На самом деле я решил это, используя некое грязное решение, которое работает нормально:

Я окружаю фактические части контента комментариями, которые больше нигде не используются в моем шаблоне на стороне сервера. Затем я извлекаю все содержимое с помощью dataType: 'text' и использую строковые функции для извлечения интересной части (это безопасно, так как я ищу первый начальный комментарий и последний конечный комментарий, поэтому фактическое содержимое не может вызвать никаких проблем, даже если оно содержит комментарии почему-то).

После этого я использую .html() для обновления моего элемента. Важно то, что я не создаю элемент DOM из извлеченного HTML-кода, поскольку это нарушит теги сценария.

Answer 3

Вы пробовали использовать load ()? http://api.jquery.com/load/

Я считаю, что он должен проанализировать сценарии и выполнить их для вас.

РЕДАКТИРОВАТЬ:

Ладно, либо о том, что load () не используется, либо о том, что он не используется, либо я этого не заметил. Имея это в виду, я создал новую версию загрузки без разборки скрипта, и кажется, что она работает в IE6,7,8, Chrome и Firefox ... не совсем уверен, почему библиотека jQuery делает это:

    <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>