在主 HTML 的 div 中显示另一个 HTML？ [关闭]答案

【问题标题】：Display another HTML in div from main HTML? [closed]在主 HTML 的 div 中显示另一个 HTML？ [关闭]
【发布时间】：2018-05-28 19:42:09
【问题描述】：

我有一个简单的 HTML (Home.html)，它有一个 iframe。这个iframe 用于显示页面Grid.aspx。一切正常，但我的组织不允许在此项目中使用 iframe。管理安装 IIS 的服务器的 IT 部门不希望我使用它们。

我可以改用div 或其他元素吗？

这是我的 html，其中包含我需要替换的 IFrame，以及我用来在该 IFrame 中加载内容的当前 JavaScript：

<html class="no-js" lang="">
<head>
</head>
<body>
<div id="storeTable" style="width: 900px; height: 200px;"> 
    <iframe id="retailframe" src="" width="900px" height="800px" scrolling="no" allowTransparency="true" frameborder="0" ></iframe> 
</div>
    <input type="button" value="Capacity Chart" onclick="CapacityChart();">
    <script>
function CapacityChart()
{
    var doc = document.getElementById('retailframe').contentWindow.document;
    doc.open();
    doc.write('Test');
    doc.close();
    var storeSite = "http://10.12.34.83:88/Grid.aspx";
    var store = document.getElementById('retailframe');
    store.src = storeSite;
}
</script>
</body>
</html>

如何将 Grid.aspx 的内容加载到 div 中？

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

除了将页面加载到iframe 之外，您还可以向服务器发送AJAX call 并获取响应（页面内容）并将其加载到您喜欢的任何元素中。但是，there are security concerns 使用 AJAX 调用，并且根据您要连接的站点，您可能无法执行此操作。

<html class="no-js" lang="">
<head>
</head>
<body>
  <div id="storeTable" style="width: 900px; height: 200px;"></div>
  <input type="button" value="Capacity Chart" onclick="CapacityChart();">
  <script>
      // Create instance of XHR to make AJAX call with:
      var xhr = new XMLHttpRequest();
      
      // Configure the component to make the call:
      xhr.open("GET", "http://10.12.34.83:88/Grid.aspx");
      
      // Set up an event handler that will fire as the call moves through its various stages
      xhr.addEventListener("readystatechange", function(){
         
         // If the response has been recieved
         if(xhr.readyState === 4){
            // And the status is "OK"
            if(xhr.status === 200){
              // Inject the results into the container of choice:
              document.getElementById("storeTable").innerHTML = xhr.responseText;   
            } else {
              console.log("Problem getting data");
            }
         } 
      
      });
      
      xhr.send(); // Make the call
</script>
</body>
</html>

【讨论】：

可能行不通。这是一个跨域请求。这也会破坏框架中的任何 JavaScript。
@Quentin 我的答案已更新为解决 CORS，不再有任何框架。而且，鉴于问题中指出的限制，这就是解决方案。