Ajax HTML Injection

Question

我正在尝试将.html文件的内容附加到主页的正文中。基本上，我正在尝试创建一个可重用的html块，我可以使用简单的JavaScript函数将其加载到任何页面中。

以下是导航栏的内容，即我要重复使用的内容：

<div id = "navbar">
  <div class = "Tab">
    <h1>Home</h1>
  </div>
  <div class = "Tab">
    <h1>Contact</h1>
  </div
</div>

这是在一个名为navbar.html

的文件中

现在在我的主index.html中，我希望通过执行以下操作来导入它：

<head>
  <script src = "importHTML.js" type = "text/javascript"></script>
</head>

<body>
  <script type = "text/javascript">
    importHTML("navbar.html");
  </script>
</body>

那应该注意在navbar.html中导入html。

importHTML.js的内容是：

function importHTML(url_) {
  var request = new XMLHttpRequest();

  request.addEventListener("load", function(event_) {
    //This is the problem line of code
    //How do I get the contents of my response to act like an element?  
    document.body.appendChild(this.responseText);
  }, false);

  xmlhttprequest.open("POST", url_, true);
  xmlhttprequest.send(null);
}

所以，我想我的问题非常简单：如何将该响应文本转换为HTML元素，以便将所有内容附加到正文中？

Answer 1

Ajax HTML Injection

jQuery $.get()和JavaScript XMLHttpRequest()

这是2种注入，包含，导入等方式的演示。其中3页：

的index.html
- 它有2个链接和2个div
data1.html
- 它的数据将通过$.get()
data2.html
- 它的数据将通过XMLHttpRequest()

我添加了jQuery以显示复杂性的差异，但它们做同样的事情。现场演示即将结束。

jQuery $.get()设置

index.html上的HTML

div#data1是附加了data1.html HTML的元素。

     <h3 id="import1">
        <a href="">Import data1.html by jQuery<code>$.get()</code></a>
     </h3>
     <div id="data1"></div>

jQuery on index.html

$('#import1').on('click', function(e) {
    e.preventDefault();
    $.get('data1.html', function(data) {
        $("#data1").html(data);
    });
});

JavaScript XMLHttpRequest()设置

index.html上的HTML

div[data-x]是附加了data2.html HTML的元素。

<h3 id="import2">
    <a href="">
        Import data2.html by JavaScript<code>XMLHttpRequest()</code>
    </a></h3>
<div data-x="data2.html"></div>

index.html上的javaScript

          function xhr() {
             var tags, i, clone, file, xhttp;
             tags = document.getElementsByTagName("*");
             for (i = 0; i < tags.length; i++) {
               if (tags[i].getAttribute("data-x")) {
                 clone = tags[i].cloneNode(false);
                 file = tags[i].getAttribute("data-x");
                 xhttp = new XMLHttpRequest();
                 xhttp.onreadystatechange = function() {
                 if (xhttp.readyState == 4 && xhttp.status == 200) {
                   clone.removeAttribute("data-x");
                   clone.innerHTML = xhttp.responseText;
                   tags[i].parentNode.replaceChild(clone, tags[i]);
                   xhr();
                 }
                }
                xhttp.open("GET", file, true);
                xhttp.send();
                return;
              }
            }
          }


     document.getElementById('import2').addEventListener('click', function(e) {
       e.preventDefault();
       xhr();
     }, false);

README.md

Plunker

注意：此演示依赖于通过锚链接的用户互动。这当然可能不是你所需要的。您可能希望它自动加载，因此需要进行以下修改：

<强>的jQuery

$(function() {
    $.get('data1.html', function(data) {
        $("#data1").html(data);
    });
});

<强>的JavaScript

(function xhr() {
        xhr();
             var tags, i, clone, file, xhttp;
             tags = document.getElementsByTagName("*");
             for (i = 0; i < tags.length; i++) {
               if (tags[i].getAttribute("data-x")) {
                 clone = tags[i].cloneNode(false);
                 file = tags[i].getAttribute("data-x");
                 xhttp = new XMLHttpRequest();
                 xhttp.onreadystatechange = function() {
                 if (xhttp.readyState == 4 && xhttp.status == 200) {
                   clone.removeAttribute("data-x");
                   clone.innerHTML = xhttp.responseText;
                   tags[i].parentNode.replaceChild(clone, tags[i]);
                   xhr();
                 }
                }
                xhttp.open("GET", file, true);
                xhttp.send();
                return;
              }
            }
          })();

Answer 2

有趣的是，即将推出的HTML导入W3C草案 https://www.w3.org/TR/html-imports/

在此之前，我们可以使用Javascript将所需的标记附加到DOM。

JQuery方法

$(document).ready(function(){
    $( "body" ).load( "navbar.html" );
});

Answer 3

Js没有执行此任务的原生方法，但您可以使用jquery method load

${element}.load('./template.html');

或者，创建元素容器，并使用innerHTML prop

request.addEventListener("load", function(event_) {
    //This is the problem line of code
    //How do I get the contents of my response to act like an element? 
    var container = document.createElement("div");
    container.innerHTML = this.responseText;
    document.body.appendChild(container);
}, false);

<强> UPD
将字符串转换为DOM。

function strToDom(str) {
    var tempEl = document.createElement('div');
    tempEl.innerHTML = str;
    return tempEl.children[0];
}

注意：字符串元素应该是一个根元素，包装其他元素

<div> ... </div>

不

<div></div><div></div>

Answer 4

importHTML.js文件如下所示：

function importHTML(url_) {
  var request = new XMLHttpRequest();
  request.addEventListener("load", function(event_) {
  var iDiv = document.createElement('div');
iDiv.innerHTML = this.responseText;
document.getElementsByTagName('body')[0].appendChild(iDiv);
  }, false);

  request.open("POST", url_, true);
  request.send(null);
     }

Answer 5

您需要对DOM的引用才能知道在哪里加载已加载的页面。在你的情况下，你可以考虑将它附加到身体上：

function importHTML(url_) {
  var request = new XMLHttpRequest();

  request.addEventListener("load", function(event_) {

    document.body.innerHTML += this.responseText

  }, false);

  xmlhttprequest.open("POST", url_, true);
  xmlhttprequest.send(null);
}

Answer 6

我假设你可以创建一个div，然后修改div.innerHTML以获得响应的内容：

function importHTML(url_) {
  var request = new XMLHttpRequest();

  request.addEventListener("load", function(event_) {

    var myDiv = document.createElement("div")
    myDiv.innerHTML = this.responseText

    document.body.appendChild(myDiv);
  }, false);

  xmlhttprequest.open("POST", url_, true);
  xmlhttprequest.send(null);
}

如何从加载了AJAX的文档追加HTML？

6 个答案:

Ajax HTML Injection