試圖動態嵌入一個HTML頁面的另一

<H2> Would you like to bounce an instance or application?</H2> 
<form name="dropDown" method="POST"> 

    <select name="choiceDropDown" onchange="include()"> 
     <option value="1">Instance Level</option> 
     <option value="2">Application Level</option> 
    </select> 
</form> 

<div id="inst" class="outsidePages"><jsp:include page='Instance_List.htm'/></div> 

<!-- END CONTAINER --> 

</td> 
</tr> 
</table> 
<!-- end content --> 

</td>    </tr>   </table>  </div> </div> 

<div id="footerWrapper">  <div id="footer">Footer content goes here</div> </div> 

</body> 

<script type="text/javascript"> function include() {  var container = document.getElementById("inst");   container.innerHTML = ""; 

    container.innerHTML = " <jsp:include page='Home.htm'/> "; 

    } 
</script> 
</html>

內部，上面我想要做的是，如果下拉框的變化則格「出師表」應改變，這樣它包括不同頁面的腳本。問題是當我試圖做到這一點時，它打破了。如果我讓container.innerHTML = "Good morning"或其他任何工作正常。任何想法爲什麼發生這種情況試圖動態嵌入一個HTML頁面的另一

來源

2011-06-21 Landister

你的代碼示例似乎已經搞亂了，所以很難說出你在做什麼。你能編輯問題並重新格式化嗎？ –

沒有看到您的代碼示例，我要出去肢體和說你想使用jQuery，特別是.load方法。它使這樣的事情變得非常容易。

<body> 
    <a href="#" id="loadSomePage">load some page</a> 
    <div id="contentArea">content goes here</div> 
</body> 
<script> 
    $("#loadSomePage").click(function(){ 
     $("#contentArea").load("http://www.foo.com/content.html"); 
    }); 
</script>

來源

2011-06-21 19:19:44

如果我有一些javascript或jQuery內foo.com/content.html它會加載這些腳本嗎？ –

是的，jQuery將檢測正在加載的頁面中的腳本並執行它們。 –

嗨邁克，我想同樣的例子加載5靜態文件（5個不同的HTML文件保存在一個單獨的文件夾中）到另一個文件;但是文件無法在該頁面中加載。 - 任何建議。 – Tirtha

您正在將服務器端和JavaScript代碼混合在一起。您的代碼的結果是將您的div的內容替換爲文字HTML <jsp:include page='Home.htm'/>，而不是您的Home.htm的HTML內容，如您所願。

要做你想做的事情，你需要執行一個ajax調用來從服務器中檢索新的內容，然後用這個來替換div中的舊內容。

使用JavaScript庫（如jQuery），這可能非常簡單。你container.innerHTML線將成爲像下面這樣：

$('#dist').load('Home.htm');

來源

2011-06-21 19:19:34 Ender

有沒有一種方法可以預加載它沒有Ajax？ – Landister

您可以將其加載到另一個隱藏的div中，然後交換每個div的可見性，而不是修改內容。 – Ender

試圖動態嵌入一個HTML頁面的另一

回答

相關問題