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

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. 所以对于上面的脚本我想要做的是如果下拉框改变那么div“inst”应该改变，以便它包括一个不同的页面。 The problem is when I try to do this it breaks. 问题是，当我尝试这样做时，它会中断。 If I make container.innerHTML = "Good morning" or anything else it works fine. 如果我使container.innerHTML = "Good morning"或其他任何东西它工作正常。 Any ideas why this happens? 任何想法为什么会这样？

Answer 1

You are mixing server-side and JavaScript code together. 您正在将服务器端和JavaScript代码混合在一起。 The result of your code would be to replace the content of your div with the literal HTML <jsp:include page='Home.htm'/> , rather than the HTML content of your Home.htm, as you intended. 您的代码的结果将是用文字HTML <jsp:include page='Home.htm'/>替换div的内容，而不是您想要的Home.htm的HTML内容。

To do what you want to do, you will need to perform an ajax call to retrieve the new contents from the server, then replace the old contents of the div with that. 要执行您想要执行的操作，您需要执行ajax调用以从服务器检索新内容，然后用该替换div的旧内容。

Using a JavaScript library such as jQuery, this could be quite simple. 使用jQuery之类的JavaScript库，这可能非常简单。 Your container.innerHTML line would become something like the following: 您的container.innerHTML行将变为如下所示：

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

Answer 2

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. 在没有看到你的代码示例的情况下，我会说你想要使用jQuery，特别是.load方法。 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>

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