Question

我正在为自己的js文件中的菜单项进行解构分配的项目。＆＃39;菜单点＆＃39;正在将html_content.js文件中的HTML内容加载到index.html文件本身。所以

var html_content {
    "Menu point 1": "<p>html content for menu point 1</p>",
    "Menu point 2": "<p>html content for menu point 2</p>"
}

通过

加载

gridWrapper.innerHTML = html_content[itemName];

进入HTML文件。这工作正常，但现在我想从自己的文件加载HTML内容，如

var html_content {
    "Menu point 1": "menu1.html",
    "Menu point 2": "menu2.html"
}

gridWrapper.innerHTML = <html_content[itemName]>; //load the HTML file here

我实际上不知道该怎么做，我的JS经验非常低。

还有另一个js档案，我不知道它是否重要，这里是main.js file

Answer 1

要加载文件，您需要使用<div id = "theform" style="display:none"> <form name = "myform"> ..form contents here... </form> </div> <script type = "text/javascript"> function showForm() { document.getElementById("theform").style.display = "block"; } </script>：

XMLHttpRequest

from here

或者您可以使用jQuery，如下所示：

var client = new XMLHttpRequest();
client.open('GET', '/mypage.html');
client.onreadystatechange = function() {
  gridWrapper.innerHTML = client.responseText;
}
client.send();

有关加载文件的更多方法，请参阅this Stack Overflow question。

Answer 2

在jQuery中你可以：

var html_content = {
  "Menu point 1": "menu1.html",
  "Menu point 2": "menu2.html"
};


$(function () {
  $.get(html_content["Menu point 1"], function (data) {
    $('#gridWrapper').html(data);
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div id="gridWrapper"></div>

在Javascript中：

var html_content = {
  "Menu point 1": "menu1.html",
  "Menu point 2": "menu2.html"
};


window.onload = function() {
  var xhr= new XMLHttpRequest();
  xhr.open('GET', html_content["Menu point 1"], true);
  xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;  // if NOT request finished and response is ready
    if (this.status!==200) return;  //if NOT OK
    document.getElementById('gridWrapper').innerHTML= this.responseText;
  };
  xhr.send();
}

<div id="gridWrapper"></div>

Answer 3

如果您可以访问DOM中的两个文件，则无需使用ajax。

你的index.html看起来像这样：

subprocess

menuItems.js

<!doctype html>
<html>
   <head>...</head>
   <body>
       <div id="menu"></div>


       <script src="menuItems.js"></script>
       <script src="main.js"></script>
   </body>
</html>

main.js

var html_content = {
    "Menu point 1": "<p>html content for menu point 1</p>",
    "Menu point 2": "<p>html content for menu point 2</p>"
}

示例fiddle

Answer 4

轻松jQuery.load()：

$(gridWrapper).load(html_content[itemName]);

JavaScript将innerHTML加载到文件中

4 个答案:

有关加载文件的更多方法，请参阅this Stack Overflow question。