试图动态地将一个html页面嵌入到另一个html页面中(Trying to dynamically embed one html page inside of another)
<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"或其他任何工作正常。 任何想法为什么发生这种情况
<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>So for the script above what I want to do is if the drop box changes then the div "inst" should change so that it is including a different page. The problem is when I try to do this it breaks. If I make container.innerHTML = "Good morning" or anything else it works fine. Any ideas why this happens?
最满意答案
在没有看到你的代码示例的情况下，我会走出一条腿，说你想使用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>Without seeing your code sample, I'm going to go out on a limb and say you want to use jQuery, specifically the .load method. It makes stuff like this ridiculously easy.
<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>更多推荐
发布评论