html实现iframe内嵌页面跳转的demo
记录一下iframe内嵌页面的跳转方式
代码:
index.html:
<html> <head> <title>根目录</title> <script> function changeSrc1() { document.getElementById("iframe1").setAttribute("src","1.html"); } function changeSrc2() { document.getElementById("iframe1").setAttribute("src","2.html"); } </script> </head> <body> <div> <button id="btn-sub1" href="1.html" target="iframe1" onclick="changeSrc1()">切换到页面一</button> <button id="btn-sub2" href="2.html" target="iframe1" onclick="changeSrc2()">切换到页面二</button> <a href="1.html" target="iframe1">切换到页面一</a> <a href="2.html" target="iframe1">切换到页面二</a> </div> <div> <iframe name="iframe1" id="iframe1" src="1.html"> </iframe> </div> </body> </html>
1.html:
<html> <head> <title>根目录</title> </head> <body> <div> <h1>页面一</h1> </div> </body> </html>
2.html:
<html> <head> <title>根目录</title> </head> <body> <div> <h1>页面二</h1> </div> </body> </html>
三个页面在同一文件夹内
注:target指向的是iframe的name,不是id
demo:https://files.cnblogs.com/files/DoubleBarbecue/iframe.rar
另:虽然这个demo很简单,但还是感谢宿舍三哥对本萌新的点拨帮助