Question

我有一个问题是使用javascript将html插入到文档中。

尝试将html插入文档的代码：

function loadTaskPage(taskId){
    fetch("https://localhost:44321/api/Tasks/1")
    .then(function(response){
        return response.text();
    }).then(function(data){
        document.body.insertAdjacentHTML('beforeend', data);
    }).catch(function(error){
        alert(error);
    })
}

我从教程中获取的代码部分，教程的源代码可以在以下链接中找到：https://github.com/bstavroulakis/progressive-web-apps/blob/master/car-deals/js/carService.js

如果我尝试在浏览器中打开此链接https://localhost:44321/api/Tasks/1，我会收到通常设置样式的网页，但是当我尝试将其插入文档时，html代码被转义并且不显示任何内容。

插入的html看起来像：

<div id="\"myModal\"" class="\"modal" fade\"="">...

下面的代码是从代码示例中复制的bootstrap模式。如您所见，出现了符号\"以逃避引号。

我使用标题为text/html

从ASP.Net Web Api收到的html响应

如何使用javascript将此HTML代码插入到文档中？

Answer 1

如何使用javascript将html插入文档？

您可以找到答案here：

您可以使用

document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)

或

document.getElementById("parentID").innerHTML+= "new content"

正如评论中所提到的，这似乎不起作用并且没有样式的元素，这是因为添加到innerHTML的字符串中的转义是关闭的：有太多{ {1}}。

在提供的HTML示例"中，每个属性都被<div id="\"myModal\"" class="\"modal" fade\"="">...包围，这意味着如果您要查看属性值的字符串，它将看起来像{{1}这是导致不添加样式的原因。

如果删除额外的"\" ... \""，则应按预期添加HTML：

'" ... "'

请参阅此示例，说明不同的转义会发生什么：

＆＃13;

<div id=\"myModal\" class=\"modal fade\">...

＆＃13;

document.getElementById("foo").innerHTML += '<div class="\"bar\"">Hello World!</div>'; // Escaped with too many `"`
document.getElementById("foo").innerHTML += '<div class=\"bar\">Hello World!</div>'; // Properly escaped

＆＃13;

Answer 2

好的，看起来问题是在api服务。在调试模式的某些原因显示我正确的html我返回给用户。因此，在api代码的一些更改之后，所有工作都应该如此。

如果有人对ASP.Net Web API感兴趣如何将视图作为字符串返回并且能够将其添加到html，则只需添加对RazorEngine的引用并使用以下代码：

        var response = new HttpResponseMessage(HttpStatusCode.OK);
        var viewPath = HttpContext.Current.Server.MapPath(@"~/Views/Tasks/TaskDetails.cshtml");
        var template = File.ReadAllText(viewPath);

        var key = new NameOnlyTemplateKey("TaskDetails", ResolveType.Global, null);
        if(!Engine.Razor.IsTemplateCached(key, null))
            Engine.Razor.AddTemplate(key, new LoadedTemplateSource(template));

        StringBuilder sb = new StringBuilder();
        StringWriter sw = new StringWriter(sb);
        Engine.Razor.RunCompile(key, sw, null, model);

        response.Content = new StringContent(sb.ToString());

        response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");

        return response;

P.S。代码不完全正确。它需要一些优化。

Answer 3

Element接口的insertAdjacentHTML()方法进行解析将指定的文本作为HTML或XML并将结果节点插入到指定位置的DOM树。它不重新分析元素正在使用它，因此它不会破坏现有的元素内的元素。这避免了额外的步骤序列化，使其比直接innerHTML快得多操作。

如何使用javascript

3 个答案: