试图动态地将一个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