Javascript 如何在执行嵌入式脚本时插入使用$.ajax()加载的完整页面的一部分?

Javascript 如何在执行嵌入式脚本时插入使用$.ajax()加载的完整页面的一部分?,javascript,jquery,ajax,Javascript,Jquery,Ajax,如果满足某些条件,我将使用$.ajax在我的站点上加载新页面。基于flash的无线电播放器处于活动状态。但是,对于这种情况,我不希望修改服务器端输出 现在,我需要一种方法来将响应嵌入到我的页面中,这可以使用.replaceWith轻松完成,但也可以执行嵌入在该页面中的Java脚本 我的一个想法是创建一个类似于的虚拟div,但也许有一种更好的方法不需要更改我的html代码,即纯js/jquery解决方案 请注意,使用$elem.load是不可能的,因为如果只使用检索到的文档的一个片段,它不会计算任

如果满足某些条件,我将使用$.ajax在我的站点上加载新页面。基于flash的无线电播放器处于活动状态。但是,对于这种情况,我不希望修改服务器端输出

现在,我需要一种方法来将响应嵌入到我的页面中,这可以使用.replaceWith轻松完成,但也可以执行嵌入在该页面中的Java脚本

我的一个想法是创建一个类似于的虚拟div,但也许有一种更好的方法不需要更改我的html代码,即纯js/jquery解决方案

请注意,使用$elem.load是不可能的,因为如果只使用检索到的文档的一个片段,它不会计算任何脚本:

//在中插入文档内容,删除脚本 //避免IE中出现任何“权限被拒绝”错误


我不知道有关这个IE问题的任何细节,但当然,无论您建议的代码是什么,都不会在最近的IE版本中导致错误。我不关心IE6。

您尝试过使用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>  

你试过使用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>  

大致如下:

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

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

大致如下:

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

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

实际上,我用一种肮脏的解决方案解决了这个问题,但效果很好:

我在实际的内容部分周围添加了注释,这些注释在我的服务器端模板的任何其他地方都不会使用。 然后,我使用数据类型“text”获取整个内容,并使用字符串函数提取感兴趣的部分。这是安全的,因为我查找第一个开始注释和最后一个结束注释,因此实际内容不会导致任何问题,即使出于某种原因它包含这些注释


在此之后,我使用.html更新我的元素。重要的是,我不会从检索到的html代码中创建DOM元素,因为这会破坏脚本标记。

事实上,我使用了一种肮脏的解决方案解决了它,但效果很好:

我在实际的内容部分周围添加了注释,这些注释在我的服务器端模板的任何其他地方都不会使用。 然后,我使用数据类型“text”获取整个内容,并使用字符串函数提取感兴趣的部分。这是安全的,因为我查找第一个开始注释和最后一个结束注释,因此实际内容不会导致任何问题,即使出于某种原因它包含这些注释


在此之后,我使用.html更新我的元素。重要的是,我不会从检索到的html代码中创建DOM元素,因为这会破坏脚本标记。

是否可以先嵌入响应,然后加载包含相关代码的javascript文件。。。也许jquery可以使用deferrend…那真的不可能。外部JS已全部加载。这是一个函数调用,用于初始化页面上的内容-此函数接收一些非完全静态的参数,否则我不会在HTML中包含任何JS代码。是否可以先嵌入响应,然后加载包含相关代码的javascript文件。。。也许jquery可以使用deferrend…那真的不可能。外部JS已全部加载。这是一个函数调用,用于初始化页面上的内容,并且该函数接收一些参数,这些参数不是完全静态的,否则HTML中就不会有任何JS代码。