Question

我正在尝试从head标签获取内容，但似乎不起作用。看来Jquery已剥离标签。请协助解决。非常感谢。

$(function () {
    $.ajax({
        type: 'post',
        url: "/echo/html/",
        dataType: "html",
        success: function (data) {
            var temp = $('<div></div>').append($.parse.html(data));
            
            var headContent = temp.find('head').html();
            $('#head-content').html(headContent);
        },
        data: {
            html: '<!DOCTYPE html><head><title>test site<\/title><link href="../style.css" rel="stylesheet" /><\/head><body><ul><li><a class="disabled" id="link">content<\/a><\/li><\/ul><\/body><\/html>'
        }
    });
});

p {
    border: 1px solid red;
    
}

<p id="head-content">Content from head tag here</p>

Answer 1

答案似乎在jQuery的.load()文档中得到了揭示：

jQuery使用浏览器的.innerHTML属性来解析检索到的文档并将其插入到当前文档中。在此过程中，浏览器经常从文档中过滤元素，例如<html>，<title>或<head>元素。结果，.load()检索到的元素可能与浏览器直接检索到的文档不完全相同。

这样，我假设您无法通过.ajax()检索<head>内容（尽管.ajax()文档中未提及此类措辞）。

Answer 2

使用DOMParser()将字符串转换为html元素，使用jQuery $.parseHTML(data)将返回Array [ <title>, <link>, <ul> ]

html = '<!DOCTYPE html><head><title>test site<\/title><link href="../style.css" rel="stylesheet" /><\/head><body><ul><li><a class="disabled" id="link">content<\/a><\/li><\/ul><\/body><\/html>';

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(html, "text/html");
var headContent = htmlDoc.head.innerHTML;
document.getElementById('head-content').value = headContent;

#head-content {width: 90%; min-heigth: 100px}

<textarea id="head-content">Content from head tag here</textarea>

从jQuery AJAX请求中的head标签解析内容

2 个答案: