iframe下重新整理頁面無法重新整理當前頁面的解決辦法
網站header和footer若是隻寫在首頁,body用iframe的話,點選瀏覽器的重新整理按鈕,頁面往往會跳轉到首頁,無法重新整理當前頁面,這給使用者帶來了很不好的使用者體驗,所以最好不要應用iframe,頁面的header和footer每個頁面裡都寫,但已經用了,又想改變這一現狀,那就只能通過程式碼來控制重新整理的頁面了。
第一步: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);
}
}
第二步:子頁面引入common.js,在onload事件裡呼叫refreshPage方法。
window.onload = function(){
refreshPage();
}
第三步:然後在父頁面根據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();
}
相關文章
- vuex頁面重新整理資料丟失的解決辦法Vue
- vue重新整理當前頁面或者當前元件Vue元件
- 如何使用jquery重新整理當前頁面jQuery
- javascript重新整理當前頁面程式碼JavaScript
- 當前頁面指令碼發生錯誤的解決辦法指令碼
- JS指令碼中重新整理當前頁面的方法JS指令碼
- Vue重新整理當前頁面幾種方式Vue
- apache ambari web頁面無法訪問解決辦法ApacheWeb
- vue專案重新整理當前頁面的三種方法Vue
- 官方Chrome擴充套件頁面無法訪問解決辦法Chrome套件
- IIS 之 無法找到該頁 解決辦法
- 網站域名被QQ攔截提示:當前網頁非官方頁面攔截的解決辦法網站網頁
- ASP.NET頁面重新整理:自動重新整理頁面的實現方法總結ASP.NET
- javascript實現的重新整理當前頁面程式碼例項JavaScript
- win10提示嗯...無法訪問此頁面怎麼辦_win10 edge提示嗯...無法訪問此頁面的解決方法Win10
- a連結重新整理頁面與js重新整理頁面總結JS
- javascript獲取當前頁面的來路頁面地址JavaScript
- js重新整理頁面JS
- 頁面無重新整理切換實現
- vue學習:使用tab標籤頁時,重新整理頁面停留在當前tabVue
- javascript控制頁面(含iframe進行頁面跳轉)跳轉、重新整理的方法彙總JavaScript
- 頁面無法輸入多個空格解決方案
- JavaScript禁用頁面重新整理JavaScript
- Iframe內部頁面高度賦值於其父頁面的Iframe標籤賦值
- vue點選當前路由,如何實現重新整理當前頁Vue路由
- Android ViewPager Fragments滑動只重新整理當前頁AndroidViewpagerFragment
- win10淘寶頁面無法開啟怎麼辦_win10淘寶無法顯示此網頁的解決方法Win10網頁
- 小程式頁面返回重新整理資料onLoad和onShow頁面傳參解決
- 修改當前路由地址引數重新重新整理頁面路由
- 可以重新整理頁面的javascript程式碼JavaScript
- react-router browserHistory重新整理頁面404問題解決React
- iframe父子頁面通訊解決方案
- 小程式頁面下拉重新整理
- mui 單頁面下拉重新整理UI
- 直播平臺開發,解決蘋果手機裡面的網頁返回不重新整理頁面的問題蘋果網頁
- 解決Snackbar無法進行跨頁面展示的問題
- 解決瀏覽器返回頁面不重新整理的問題瀏覽器
- Vuex資料頁面重新整理丟失問題解決方案Vue