如何在每次加載頁面時運行代碼

在我的JQuery Mobile項目中，我在主頁上有一個圖像滑塊。通過此頁面輸入時，此工作正常。但是，如果我離開，然後返回到頁面，它不起作用。如何在每次加載頁面時運行代碼

我對每個JQM頁面都有1個html文件（例如4個頁面等於4個html文件）。

下面給出的代碼js通過頁面頭部的引用加載到包含它的js文件中。

$(function() { 
    //Global variable that stores advertising banners. 
    var featured = new Array(); 

    //Adds information about the new banners. 
    featured.push(["http://www.google.co.uk/", "assets/temp/slider/01.jpg", "FEATURED: Cessna CItation XVII"]); 
    featured.push(["http://www.mashable.com", "assets/temp/slider/02.jpg", "FEATURED: Cessna CItation XVII"]); 
    featured.push(["http://www.engadget.com", "assets/temp/slider/16.jpg", "FEATURED: Cessna CItation XVII"]); 

    var featured_element = document.getElementById("slider"); 

    //Prints a new link with image in advertising box. 
    $.each(featured, function (i, advert) { 
     featured_element.innerHTML += "<img src=\"" + advert[1] + "\" data-plugin-slide-caption=\"<a href='" + advert[0] + "'>" + advert[2] + "<\/a>\"/>"; 
    }); 

    $("#slider").excoloSlider({ 
     mouseNav: false, 
     interval: 3500, // = 3.5 seconds 
     playReverse: true 
    }); 
});

我該如何適應這種情況，以便每次加載該給定頁面時都會觸發它？

來源

2014-03-28 Phill Healey

'window.onpopstate = function（）{...};'??? –

爲什麼不使用document.ready（）？ –

@PratikJoshi因爲它的JQuery Mobile。 –

更正我實際上不得不調用身體中的js文件來使其工作，而不會導致第二頁的問題。

經過@Omar過去的回答，並試用各種JQM事件後，我想出了以下內容。

我在js文件中創建了一個腳本，並在default.html的頭部引用了這個腳本。這將變成一個PhoneGap應用程序，所以我知道這將是第一個頁面命中。

在JS文件我已經更新了代碼：

$(document).one("pageshow", function() { 
alert("LOADED SLIDER CODE"); 
//Global variable that stores advertising banners. 
var featured = new Array(); 

    //Adds information about the new banners. 
    featured.push(["http://www.google.co.uk/", "assets/temp/slider/01.jpg", "FEATURED: Cessna CItation XVII"]); 
    featured.push(["http://www.mashable.com", "assets/temp/slider/02.jpg", "FEATURED: Cessna CItation XVII"]); 
    featured.push(["http://www.engadget.com", "assets/temp/slider/16.jpg", "FEATURED: Cessna CItation XVII"]); 
    /* 
    featured.push(["", "", ""]); 
    featured.push(["", "", ""]); 
    featured.push(["", "", ""]); 
    featured.push(["", "", ""]); 
    featured.push(["", "", ""]); 
    featured.push(["", "", ""]); 
    featured.push(["", "", ""]); 
    */ 


    var featured_element = document.getElementById("slider"); 

    //Prints a new link with image in advertising box. 
    $.each(featured, function(i, advert) { 
     featured_element.innerHTML += "<img src=\""+advert[1]+"\" data-plugin-slide-caption=\"<a href='"+advert[0]+"'>"+advert[2]+"<\/a>\"/>"; 
    }); 

    $("#slider").excoloSlider({ 
     mouseNav: false, 
     interval: 3500, // = 3.5 seconds 
     playReverse: true 
    }); 
});

現在JS每當窗口小部件等已加載到DOM中被調用，當首先顯示必需的節目「頁」。

來源

2014-03-28 22:15:57

@Omar，剛剛意識到，我已經在身體中添加了js引用來使其工作。但是，如果用戶多次返回默認頁面，可能會導致它加載多次？這可能會導致問題？你有任何忍者技能來改善這個？謝謝。 –

您只在第一頁加載滑塊？由於它是第一次加載頁面，並且使用'.one（）'，代碼將不會被執行多次。如果它不是第一頁，而且您正在使用_Single Page Model_，則每次查看頁面時都會運行代碼。但是，一旦你離開該頁面，它將從DOM中刪除，所以我不擔心。 – Omar

@Omar，好吧，那很好。 –

試着把你的畫廊代碼裏面的pagecreate矇蔽功能。

jQuery(".selector").on("pagecreate", function(event) { 
    //Gallery code here 
})

這裏.selector是您放置jQuery-Mobile頁面的頁面。

來源

2014-03-28 12:12:47

我試圖從文檔，但它根本不開火。對於頁面id =「homepage」的頁面使用下面的代碼$（「＃homepage」）。on（「pagecreate」，function（event） –

只是你知道，這不是我投下的票。當你嘗試對某人進行評估時，你應該做出公開聲明「爲什麼」 –

你必須在你的答案中練習「格式化」代碼 – Omar

如何在每次加載頁面時運行代碼

回答

相關問題