メインHTMLからdivに別のHTMLを表示しますか？

-5

iframeという単純なHTML（Home.html）があります。このiframeは、ページGrid.aspxの表示に使用されます。すべて正常に動作しますが、私の組織ではこのプロジェクトにiframeを使用することはできません。 IISがインストールされているサーバーを管理するIT部門は、私にそれらを使用させたくない。メインHTMLからdivに別のHTMLを表示しますか？

代わりにdivまたは別の要素を使用できますか？どのように私はdiv要素でGrid.aspxのコンテンツをロードすることができます

<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>

：

は、これは私がそのiframe内にコンテンツをロードするために使用し、私は交換する必要があるのIFrameと現在JavaScriptを使用して、私のhtmlです代わりに？

出典

2017-12-14 rbhat

代わり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>

出典

2017-12-14 16:44:09

はおそらく動作しません。これはクロスオリジンのリクエストです。これにより、フレーム内のJavaScriptも破損します。 – Quentin

@Quentin私の答えはCORSに対処するように更新され、フレームはなくなりました。そして、質問に示されている制限があれば、これが解決策です。 –

メインHTMLからdivに別のHTMLを表示しますか？

答えて

関連する問題