Question

如果满足某些条件（基于闪存的广播播放器处于活动状态），我正在使用$.ajax()在我的网站上加载新网页。但是，我不想在这种情况下修改服务器端输出。

现在我需要一种方法将响应嵌入到我的页面上（使用.replaceWith()轻松完成），还可以执行此页面上嵌入的javascripts。

我有一个想法是创建一个像<div id="onload" data-onload="functionname" data-onload-args="json-for-the-function-args">这样的虚拟div，但也许有一种更好的方法不需要更改我的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()来更新我的元素。重要的是，我不从检索到的html代码中创建一个DOM元素，因为这会破坏脚本标记。

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>

如何在执行嵌入式脚本时插入使用$ .ajax（）加载的整页的一部分？

3 个答案: