試圖動態地將一個html頁面嵌入到另一個頁面中

Question

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

所以對於上面的腳本我想要做的是如果下拉框改變那么div“inst”應該改變，以便它包括一個不同的頁面。 問題是，當我嘗試這樣做時，它會中斷。 如果我使container.innerHTML = "Good morning"或其他任何東西它工作正常。 任何想法為什么會這樣？

Answer 1

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

要執行您想要執行的操作，您需要執行ajax調用以從服務器檢索新內容，然后用該替換div的舊內容。

使用jQuery之類的JavaScript庫，這可能非常簡單。 您的container.innerHTML行將變為如下所示：

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

Answer 2

在沒有看到你的代碼示例的情況下，我會說你想要使用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>

試圖動態地將一個html頁面嵌入到另一個頁面中

問題描述

2 個解決方案

解決方案1
1 2011-06-21 19:19:34

解決方案2
1 已采納 2011-06-21 19:19:44

試圖動態地將一個html頁面嵌入到另一個頁面中

問題描述

2 個解決方案

解決方案1 1 2011-06-21 19:19:34

解決方案2 1 已采納 2011-06-21 19:19:44

解決方案1
1 2011-06-21 19:19:34

解決方案2
1 已采納 2011-06-21 19:19:44