记录一下iframe内嵌页面的跳转方式

 

代码：

index.html:

  1. <html>
  2. <head>
  3.  
  4. <title>根目录</title>
  5.  
  6. <script>
  7. function changeSrc1()
  8. {
  9.     document.getElementById("iframe1").setAttribute("src","1.html");
  10. }
  11. function changeSrc2()
  12. {
  13.     document.getElementById("iframe1").setAttribute("src","2.html");
  14. }
  15. </script>
  16.  
  17. </head>
  18. <body>
  19. <div>
  20.     <button id="btn-sub1" href="1.html" target="iframe1" onclick="changeSrc1()">切换到页面一</button>
  21.     <button id="btn-sub2" href="2.html" target="iframe1" onclick="changeSrc2()">切换到页面二</button>
  22.     <a href="1.html" target="iframe1">切换到页面一</a>
  23.     <a href="2.html" target="iframe1">切换到页面二</a>
  24. </div>
  25.  
  26. <div>
  27.     <iframe name="iframe1" id="iframe1" src="1.html">
  28.     </iframe>
  29. </div>
  30. </body>
  31. </html>

1.html:

  1. <html>
  2.     <head>
  3.         <title>根目录</title>
  4.     </head>
  5.  
  6.     <body>
  7.         <div>
  8.             <h1>页面一</h1>
  9.         </div>
  10.     </body>
  11. </html>

2.html:

  1. <html>
  2.     <head>
  3.         <title>根目录</title>
  4.     </head>
  5.  
  6.     <body>
  7.         <div>
  8.             <h1>页面二</h1>
  9.         </div>
  10.     </body>
  11. </html>

三个页面在同一文件夹内

 

 注：target指向的是iframe的name，不是id

 

demo:https://files.cnblogs.com/files/DoubleBarbecue/iframe.rar

 

另：虽然这个demo很简单，但还是感谢宿舍三哥对本萌新的点拨帮助

版权声明：本文为DoubleBarbecue原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/DoubleBarbecue/p/11211958.html