如何強制Web瀏覽器呈現Ajax響應，即整個HTML頁面？

Question

目的是，當接收到Ajax響應以強制瀏覽器呈現“ responseText”像加載新的html頁面時。 在文檔的“ innerHTML”中添加“ responseText”，不強制瀏覽器使用新添加的標記對頁面進行重排。

的HTML

<!DOCTYPE html>
 <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>START BOOTSRAP 4</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  </head>
  <body>
    <div class="container-fluid">
        <h1>BOOTSTRAP 4 NAV</h1>
    </div>
    <div class="horizontal-line"></div>
    <p>The <kbd>.nav</kbd>, <kbd>.nav-item</kbd>, <kbd>.nav-link</kbd> classes:</p>
    <ul class="nav">
        <div class="nav-item">
         <a href="#" class="nav-link">Nav-Link-1</a>
       </div>
    </ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  </body>
</html>

的JavaScript

var xhttp = new XMLHttpRequest();

var html;

xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {

      html = this.responseText;

     // how to apply this 'html' that to see rendered web page
     // with css styles etc.

  }
};

    // ---- Not working in this case... only for example ----
    // var win = window.open("", "_self");
   // win.document.open();
   // win.document.write(html);
   // win.document.close();
  // ---- End of Not working in this case... only for example ----

xhttp.open("GET", "http://127.0.0.1/nav.html", true);

xhttp.send();

提前致謝！

Answer 1

編輯：如果您需要加載外部CSS / JS或在頁面上動態運行腳本，則下面的普通JS將不起作用。 由於您使用的是jQuery，因此可以在加載外部文件和執行腳本的同時，使用jQuery的html函數替換整個頁面的html來實現此目的：

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

編輯：以下使用Vanilla JS的解決方案僅適用於不依賴腳本執行或外部文件的簡單情況。

從ajax響應中獲取html使用getElementsByTagName獲取html元素，並將其innerHTML屬性設置為接收的HTML：

document.querySelector("html").innerHTML = html;

如果只需要替換頁面的body ，請獲取body元素並將其innerHTML屬性設置為接收的HTML：

document.body.innerHTML = html;

Answer 2

看看jQuery .load（）

$("#idToAppendTo").load("your.html");

這是鏈接http://api.jquery.com/load/

或者，一旦您通過ajax請求獲得html，請使用此

document.getElementById("#idToAppendTo").innerHTML = this.responseText;

如何強制Web瀏覽器呈現Ajax響應，即整個HTML頁面？

問題描述

2 個解決方案

解決方案1
0 2017-11-19 03:09:41

解決方案2
0 2017-11-19 03:10:41

如何強制Web瀏覽器呈現Ajax響應，即整個HTML頁面？

問題描述

2 個解決方案

解決方案1 0 2017-11-19 03:09:41

解決方案2 0 2017-11-19 03:10:41

解決方案1
0 2017-11-19 03:09:41

解決方案2
0 2017-11-19 03:10:41