2017-06-21 71 views
-1

我创建了两个html页面。在同一帧中打开不同的页面

<html> 
 
<body> 
 

 
<button type="button" onclick="alert('Hello world!')">Click Me!</button> 
 
    
 
</body> 
 
</html>

当我短声的onClick按钮,我想在同一框架中打开另一个HTML页面。 我的第二个HTML

<html> 
 
<body> 
 

 
<h2>Spectacular Mountain</h2> 
 
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;"> 
 

 
</body> 
 
</html>`

我在Java中Springboot使用这些HTML文件。 最后,我想单击第一个html页面的按钮,然后我想在同一个框架中显示第二个页面。

你能帮助我谢谢。

回答

0

锚怎么样?

<a href="anotherHtmlFile.html"> 
    Click me to access 2nd HTML file 
</a> 
+0

非常感谢您的建议:) – tester

+0

不客气,接受最能帮助您关闭主题的答案:-) – Aigloun

+0

它很好,但它并不在同一页中显示,它只是重定向。 – tester

0

锚标签应该做的伎俩,

<button type="button" onclick="alert('Hello world!')" > 
<a href="b.html">Click Me!</a> 
</button> 

'

+0

嗨,谢谢迪帕克:) – tester

+0

嗨迪帕克,你的解决方案是工作,但我的目的是在同一帧显示第二个.html页面。我的意思是它会在第一页的前面。你有什么想法我怎么能做到这一点 – tester

0

术语 “框架” 是不正确基于我的理解。 Frame在HTML中有意义,所以我相信你真正想要做的是将第二个模板的内容拉入现有的模板中。如果是这种情况,那么你必须使用某种Javascript和Ajax来实现你的目标。

我打算假设使用jQuery,因为它是最简单的示例类型。

<html> 
<body> 
    <button type="button" id="button1">Click Me!</button> 
    <div id="page2"></div> 
    <script> 
    $("#button1").on("click", function() { 
     $("#page2").load("http://url/to/other/page"); 
    }); 
</body> 
</html> 

上面的代码会用按钮注册一个click事件,点击后会加载第二页并放入div的内容。还有其他方法可以通过各种Javascript技术和库来实现。

+0

嗨格雷格,我尝试在我的主页面使用你的代码块。我将第二页路径设置为$(“#page2”)。load(“page2.html”);然而它引起了恐慌 – tester