Question

我想做以下事情。

$("a").click(function (event) {

    event.preventDefault();

    $.get($(this).attr("href"), function(data) {

        $("html").html(data);

    });

});

我希望所有超链接的行为都能进行ajax调用并检索html。

不幸的是，你不能简单地用你在ajax响应中收到的html替换当前的html。

如何只获取ajax响应的<body> </body>标记内的内容，以便我可以替换仅现有html中正文的内容。

修改：<body>开场代码并不总是只有<body>它有时可能会有一个类，例如

<body class="class1 class2">

Answer 1

如果我理解正确，请使用正则表达式获取正文标记之间的内容。

$.get($(this).attr("href"), function(data) {
    var body=data.replace(/^.*?<body>(.*?)<\/body>.*?$/s,"$1");
    $("body").html(body);

});

修改

根据您在下面的评论，这里是一个匹配任何正文标记的更新，无论其属性如何：

$.get($(this).attr("href"), function(data) {
    var body=data.replace(/^.*?<body[^>]*>(.*?)<\/body>.*?$/i,"$1");
    $("body").html(body);

});

正则表达式是：

^               match starting at beginning of string

.*?             ignore zero or more characters (non-greedy)

<body[^>]*>     match literal '<body' 
                    followed by zero or more chars other than '>'
                    followed by literal '>'

(               start capture

  .*?           zero or more characters (non-greedy)

)               end capture

<\/body>        match literal '</body>'

.*?             ignore zero or more characters (non-greedy)

$               to end of string

添加'i'开关以匹配大写和小写。

请忽略我对's'开关的评论，在JavaScript中，所有RegExp默认都是单行，为了匹配多行模式，你添加'm'。（该死的Perl，在我写JavaScript时干扰我！： - ）

Answer 2

我不想乱用正则表达式。相反，我创建了一个隐藏的<iframe>，在其中加载了内容，并从页面<body>中的<iframe>页面中提取了onload()。

对于iframe，我需要小心Same-origin policy（这article显示了这种方式）：

var iframe = document.createElement('iframe');
iframe.style.display = "none";
jQuery('body').append(iframe);
iframe.contentWindow.contents = data;
iframe.onload = function () {
    var bodyHTML = jQuery(iframe).contents()
                        .find('body').html();
    // Use the bodyHTML as you see fit
    jQuery('#error').html(bodyHTML);
}
iframe.src = 'javascript:window["contents"]';

完成后只需删除<iframe> ...

Answer 3

确保将事件绑定到文档，按类（$(document).on('click', '.my-class-name', doThings);进行过滤）如果替换正文的html，则重绘DOM时将直接销毁任何事件绑定（$('.my-class-name').on('click', doThings);）使用新的HTML。重新绑定将起作用，但它也会留下垃圾收集器必须清理的旧事件和节点的一堆指针 - 简单来说，它可能会使页面变得越来越重，打开的时间越长。

我没有在多个平台上测试过这个，请谨慎使用。

// create a new html document
function createDocument(html) {
  var doc = document.implementation.createHTMLDocument('')
  doc.documentElement.innerHTML = html
  return doc;
}
$("a").click(function (event) {
    event.preventDefault();
    $.get($(this).attr("href"), function(data) {
        $("body").html($(createDocument(data)).find('body').html);
    });
});

获取字符串中的内容

3 个答案: