html區域性頁面重新整理和跳轉傳參
阿新 • • 發佈：2019-02-06
index.html為父頁面，A.html和B.html為區域性重新整理的子頁面。
頁面跳轉：
如index.html所示，用<iframe>標籤實現頁面的巢狀。
引數傳遞：
當需要傳遞引數時，可使用js實現為跳轉頁面的同時傳參，獲取的引數需要解碼。
1.index.html
<!DOCTYPE html> <html style="height: 100%;overflow: hidden;"> <head> <title>頁面跳轉</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body style="height: 100%;overflow: hidden;"> <li><a href="A.html" target="con">跳轉A</a></li> <br/> <li><a href="B.html" target="con">跳轉B</a></li> <br/> <iframe name="con" src="A.html"></iframe> </body> </html>
2.A.html
<!DOCTYPE html> <html style="height: 100%;overflow: hidden;"> <head> <title>A頁面</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body style="height: 100%;overflow: hidden;"> <h4>A頁面</h4> <button id="bt" onclick="jump()">傳參</button> <script type="text/javascript"> function jump(){ var name="跳轉成功"; location.href="B.html?name="+name; } </script> </body> </html>
3.B.html
<!DOCTYPE html> <html style="height: 100%;overflow: hidden;"> <head> <title>B頁面</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body style="height: 100%;overflow: hidden;"> <h4>B頁面</h4> <button id="bt" onclick="show()">獲取引數</button> <script type="text/javascript"> var str=this.location.search; var val1=str.split("name="); var val2=val1[1]; //url解碼 val2=decodeURI(val2); function show(){ alert(val2); } </script> </body> </html>