iframeでページをリフレッシュしても現在のページをリフレッシュできない解決策
2615 ワード
サイトヘッダーとfooterはトップページにしか書かれていません.bodyはiframeを使うと、ブラウザのリフレッシュボタンをクリックすると、ページがトップページにジャンプし、現在のページをリフレッシュできないことがよくあります.これはユーザーに悪いユーザー体験をもたらします.だから、iframeを適用しないほうがいいです.ページのヘッダーとfooterは各ページに書かれていますが、すでに使っています.またこの現状を変えたいです.では、コードでリフレッシュされたページを制御するしかありません.
ステップ1:common.jsには以下のコード(現在のページのパスを自動的にキャプチャし、sessionに格納し、パラメータを持つ場合はパラメータも一緒にキャプチャする)が加わる.
ステップ2:サブページにcommonを導入する.jsは、onloadイベントでrefreshPageメソッドを呼び出します.
ステップ3:次に、親ページでsessionStorageに格納されている現在のページのパスに基づいてiframeのsrcを設定し、ナビゲーションに現在のモジュールを選択させ、大きな成果を上げます.
ステップ1:common.jsには以下のコード(現在のページのパスを自動的にキャプチャし、sessionに格納し、パラメータを持つ場合はパラメータも一緒にキャプチャする)が加わる.
function refreshPage(){
var sessionStorage=window.sessionStorage;
var index=location.href.lastIndexOf("/");
if(index!=-1){
var href=location.href.substring(index+1);
sessionStorage.setItem("refreshPage",href);
}
}
ステップ2:サブページにcommonを導入する.jsは、onloadイベントでrefreshPageメソッドを呼び出します.
window.onload = function(){
refreshPage();
}
ステップ3:次に、親ページでsessionStorageに格納されている現在のページのパスに基づいてiframeのsrcを設定し、ナビゲーションに現在のモジュールを選択させ、大きな成果を上げます.
function setIframePage(){
var sessionStorage=window.sessionStorage;
var refreshPage=sessionStorage.getItem("refreshPage");
if(refreshPage!=null&&refreshPage!=""&&refreshPage!=undefined){
document.getElementById("midFraim").src=refreshPage;
$("#navigation").removeClass("active");
if(refreshPage=="Technology.html"){
$('#Technology').addClass("active");
}else if(refreshPage=="main.html"){
$('#main').addClass("active");
}else if(refreshPage=="findItem.html"||refreshPage.indexOf("findItem_detail.html")!=-1){
$('#findItem').addClass("active");
}else if(refreshPage=="findAccept.html"||refreshPage.indexOf("FindAcceptDetail.html")!=-1){
$('#findAccept').addClass("active");
}else if(refreshPage=="trends.html"){
$('#trends').addClass("active");
}else if(refreshPage=="Equipment.html"){
$('#Equipment').addClass("active");
}else if(refreshPage=="discuz.html"||refreshPage=="SendTie.html"||
refreshPage.indexOf("DiscuzDetail.html")!=-1||
refreshPage.indexOf("discuzList.html")!=-1){
$('#discuz').addClass("active");
}
}else{
$('#main').addClass("active");
document.getElementById("midFraim").src="main.html";
}
}
window.onload=function(){
setIframePage();
}