2014-04-21 12 views
5

Sayfalar arası geçiş için push.js'yi kullanarak Ratchet 2.0.2 ile bir Phonegap uygulaması geliştiriyorum. Ben hemen hemen aynı sorun Execute custom script after page loaded with Ratchet\Push.jsBirkaç JS dosyasını Ratchet push.js kitaplığı ile yürütme

, ancak gitmek gerekir: Bu öğrendim daha araştırma yaptıktan sonra

Script tags containing JavaScript will not be executed on pages that are loaded with push.js. If you would like to attach event handlers to elements on other pages, document-level event delegation is a common solution.

: Herşey sorunsuz çalışıyor fakat birkaç saat önce bu takılmaları Ayrıca, sadece bir betik yüklemem gerekmediğinden, iki (ve belki de gelecekte daha fazla) yüklemem gerekiyor, birden fazla komut dosyasını yüklemek için checkPage() işlevinden nasıl yararlanabilirim?

var checkPage = function(){ 
    //Only run if twitter-widget exists on page 
    if(document.getElementById('twitter-widget')) { 
     loadTwitterFeed(document,"script","twitter-wjs"); 
    } 
}; 

window.addEventListener('push', checkPage); 
+0

Yüklemeye çalıştığınız komut dosyalarına ilişkin daha fazla ayrıntı ekleyebilir misiniz \ execute? – Schmalzy

+0

Sure @Schmalzy: Bir JQuery 2.0.1, Handlebars.js ve Phonegap'in özel komut dosyalarını yüklemek için kullandığı varsayılan index.js. Tümü, etiketlerini kullanarak yüklendi. Sizinle aynı durumda, eğer dahili bir sayfa yüklersek mükemmel çalışır, eğer index.html'den yüklersek, push.js müdahale eder. – Danito

+0

Yalnızca harici kitaplıklarsa, yine de dizin sayfanıza yükleyebilirsiniz. ve yine başka bir sayfa yüküyle mevcut olacaklar. – Schmalzy

cevap

6

GÜNCELLEME: Ayrıca burada this question.

bkz denedim bir çözümdür ve doğru şekilde çalışmak gibi görünüyor, ama bu en iyi yöntem olup olmadığını bazı geribildirim için arıyorum .. Lütfen yorum yapmaktan çekinmeyin ve gerektiğinde güncellemeler yapacağım. eval()'un tehlikeli olduğunu biliyorum, ancak bu durumda ne kadar tehlikeli olduğundan emin değilim. İşaret \ ilk sayfa yerine üzerinde

senin sayfanın alt kısmında aşağıdaki komut

, DIŞINDA .content div, böylece push.js tarafından üzerine almaz.

<script> 
    window.addEventListener('push', function(){ 
     var scriptsList = document.querySelectorAll('script.js-custom'); 
     for(var i = 0; i < scriptsList.length; ++i) { 
      eval(scriptsList[i].innerHTML); 
     } 
    }); 
</script> 

Sonra push.js aracılığıyla yüklenen başka bir sayfada, sadece komut dosyası .js-custom sınıfını verir. Bu betik INSIDE.content div dizinine yerleştirilmelidir.

<div class="content"> 
    ... 
    <script class="js-custom"> 
     alert('I was executed!'); 
    </script> 
</div> 

yumruk komut bulmak ve döngü herhangi <script> etiketleri üzerinden .js-custom sınıfla ve eval() kullanarak içeriği var çalıştırır.

+0

Teşekkürler Schmalzy! Bir deneme yapıp sonuçları yayınlayacağım. – Danito

+0

Yakalanmamış SyntaxError: Bu satırdaki beklenmedik belirteci < eval (scriptsList [i] .innerHTML); – Danito

+0

'

2

Danito'nun yanıtından uyarlanan push.js için yükleme komut dosyalarımın sürümü.

html ve js dosyaları için 1: 1 ilişkim var. Thinga.html ve thinga.js dosyası olacak. Ne yapmaya karar şöyle, html içerik div thinga bir kimliği eklemek oldu:

<div class="content" id="thinga"> 
    ... 
</div> 

Ardından, başlangıç ​​uygulaması kurulumunda ben itme küresel olaya 'checkPage' adlı bir işlev ekli :

window.addEventListener('push', checkPage); 

checkPage işlevi aynı adlı bir javascript dosyası olmadığını görmek için içerik div ve kontrollerden id yakalar, ve eğer öyleyse, scripts/ dizinden

dan jQuery'nin $ .getScript() kullanarak yüklemek
var checkPage = function(){ 

    var elm = document.getElementsByClassName("content")[0]; 
    var script = elm.id; 

    if(script) { 
     $.getScript("scripts/"+elm.id+".js") 
     .done(function(script, textStatus) { 
      console.log(textStatus); 
     }) 
     .fail(function(jqxhr, statusText, errorThrown) { 
      console.log(errorThrown); 
      console.log(statusText); 
      console.log(jqxhr); 
     }); 
    } 
}; 

Bu, en azından benim kullanım durumum için işe yaramaz gibi görünüyor. Sadece bir gün bir başkasına yardım edebilecekleri şansı yok etmek için dışarı atmak istedim.

1

Bu sorun için push.js. ile çalışırken bir çözüm buldum. Sonunda yaptığım şey, #description yüklemek istediğim her bir html sayfasıdır. Bu, ben contactlist.html # contact'a bağlandığım sayfalara bağlandığımda anlamına gelir.

window.addEventListener('push', pageHandler); 

Sonra ayrı bir dosyada ben bu komut dosyasını çalıştırın: benim ana html sayfasında

i olay dinleyicisi ekleyin.

var pageHandler= function(){ 
    var page= window.location.hash; 

    if (page == '#contact'){ 
    //Put every script you want to use on this page here. 
    } 
    if(page == '#info'){ 
    //Same here, every script you need for this page. 
    } 
}; 

Bunun en iyi yol olup olmadığını bilmiyorum, ancak komut dosyası üzerinde iyi bir denetim sahibi olduğumu hissediyorum ve işe yarıyor.

1

Sadece düşüncelerimi buraya koy. Ratchet.js için her sayfa için js çalışmalarının yapılması için bir değişiklik yaptım. Her html'nin bir js dosyası bağlantısı var. (https://github.com/mazong1123/ratchet-pro)

yeni ratchetPro.js kullanarak, aşağıdakileri yapabilirsiniz:

(function() { 
    var rachetPageManager = new window.RATCHET.Class.PageManager(); 
    rachetPageManager.ready(function() { 
     window.RATCHET.getScript('js/jquery.js', function() { 
      // Put your logic here. 
     }); 
    }); 
})(); 

Çağrı window.RATCHET.getScript harici js yüklemek için. Harici js yüklendikten sonra önbelleğe alınacak ve bir daha asla yüklenmeyecektir. Ancak, sayfa her açıldığında geri arama her zaman yürütülür.

İlgili konular