Question

我有一个动态页面，它使用jQuery启动的AJAX请求从服务器中提取HTML元素并将它们插入到DOM中。

问题在于，当我在响应中包含元素时，它们会被删除。

例如，如果我从服务器请求以下内容：

<!-- content.html -->
<div>
    There is some content here!
    <script>
        manipulateContent();
    </script>
</div>

实际注入动态页面的内容如下：

<!-- content.html -->
<div>
    There is some content here!
</div>

我已在Chrome，Firefox和Safari中测试过相同的结果。

创建AJAX请求的相关Javascript位于：

function loadContent(url){
    var a = document.createElement('a');
    a.href = url;
    if (a.search == ""){ 
        url = url + "?trim=true";
    } else {
        url = url + "&trim=true";
    }

    var ch = $('#content-container').height();
    // var wh = $(window).height();

    $("#content").animate({top: '-='+ch+'px'}, 500, function(){
        $.get(url, function(data){
            $("body").scrollTop(0);
            $("#content").html(data);
            $("#content").css({top: ch+'px'});
            $("#content").animate({top: '0px'}, 500);
        });
    });
}

$(document).ready(function(){

    // get the current path and save it for later
    var currentPage = location.pathname+location.search;

    $(".content-link").live("click", function(){
        // using the HTML5 history API, add the requested path
        // to the browser history, then load the new content
        history.pushState({ path: this.path }, '', this.href);
            // because the page is not reloaded, $(document).ready()
            // is not called, so the currentPath must be updated manually
                currentPage = this.href;
        loadContent(currentPage);

        return false;

    });

    window.addEventListener('popstate', function() {
        // compare the current path to the one being loaded
        // if they are different, then load the content
        // else, nothing happens
        if (currentPage != location.pathname+location.search){
            // because the page is not reloaded, $(document).ready()
            // is not called, so the currentPath must be updated manually
            currentPage = location.pathname+location.search;
            loadContent(currentPage);
        }
    });

});

如何告诉jQuery在响应中包含标记？我试过浏览jQuery文档没有太多运气，甚至提到标签被剥离的事实。也许我只是在寻找合适的地方。

Answer 1

您需要使用load，因为此处的目的是将html内容加载到元素。

function loadContent(url) {
    var a = document.createElement('a');
    a.href = url;
    if (a.search == "") {
        url = url + "?trim=true";
    } else {
        url = url + "&trim=true";
    }

    var ch = $('#content-container').height();
    // var wh = $(window).height();

    $("#content").animate({
        top : '-=' + ch + 'px'
    }, 500, function() {
        $("#content").load(url, function() {
            $("body").scrollTop(0);
            $("#content").css({
                top : ch + 'px'
            });
            $("#content").animate({
                top : '0px'
            }, 500);
        });
    });
}

Answer 2

根据jQuery文档（http://api.jquery.com/jQuery.ajax/），如果dataType选项为html：

以纯文本形式返回HTML;包含脚本标签的时候进行评估插入DOM。

默认情况下，此选项设置为Intelligent Guess，因此您可能需要检查服务器的响应类型。

jQuery / Javascript：由AJAX请求引入的HTML不包括<script>元素</script>

2 个答案: