2013-04-12 15 views
5

Backbone kullanarak oluşturduğum bir web uygulamasında yükleme yapmaya çalışıyorum ve yerel olarak depolanan JSON ve HTML şablon dosyalarını çekiyor. Chrome paketli uygulamalardan, bu dosyaları bir çeşit 'get'/ajax isteği kullanarak yüklemek mümkün olup olmadığını merak ediyordum?Bir Chrome paket uygulamasında XHR aracılığıyla yerel içerik yükleme

Şu anda bu alıyorum ...

OPTIONS chrome-extension://fibpcbellfjkmapljkjdlpgencmekhco/templates/templates.html Cannot make any requests from null. jquery.min.js:2 
XMLHttpRequest cannot load chrome-extension://fibpcbellfjkmapljkjdlpgencmekhco/templates/templates.html. Cannot make any requests from null. 

yüzden herhangi bir yardım büyük teşekkür olacaktır bu nasıl yapılacağına ilişkin herhangi bir gerçek bilgi bulamıyorum!

+0

Kökünüz null? Paketlenmiş uygulamadaki standart bir pencereden bir XHR'yi uygulama içindeki bir dosyaya yaparsanız, çalışır. –

+0

Köküm boş görünüyor çünkü uygulamamın bir webapp olan sanal alan sayfası var. Bu webapp, bir xml dosyasında veri kaynağı olarak yüklenir. Ama bu işe yaramıyor. Bir XHR talebi nasıl yapılır? – darylhedley

cevap

6

Evet, bu tamamen mümkündür ve kolaydır. İşte çalışan bir örnek. Bununla başlamayı deneyin, çalıştığını onaylayın ve ardından kendi kodunuza tekrar ekleyin. Bir barikata çarptıysanız ve XHR'lerin paketlenmiş uygulamalarda çalışıp çalışmadığından daha özel bir soruyla karşılaşırsanız, yeni bir soru sormak isteyebilirsiniz.

manifest.json:

{ 
    "name": "SO 15977151 for EggCup", 
    "description": "Demonstrates local XHR", 
    "manifest_version" : 2, 
    "version" : "0.1", 
    "app" : { 
    "background" : { 
     "scripts" : ["background.js"] 
    } 
    }, 
    "permissions" : [] 
} 

background.js:

chrome.app.runtime.onLaunched.addListener(function() { 
    chrome.app.window.create("window.html", 
    { bounds: { width: 600, height: 400 }}); 
}); 

window.html:

<html> 
<body> 
    <div>The content is "<span id="content"/>"</div> 
    <script src="main.js"></script> 
</body> 
</html> 

main.js:

function requestListener() { 
    document.querySelector("#content").innerHTML = this.responseText; 
}; 

onload = function() { 
    var request = new XMLHttpRequest(); 
    request.onload = requestListener; 
    request.open("GET", "content.txt", true); 
    request.send(); 
}; 
.210

content.txt:

Hello, world! 
+0

Harika! Bu işe yarıyor. Webapp'ım ile hala bir sorun yaşıyorum. Farklı bir jQuery sürümüne sahip olmam mı gerekiyor? Şu anda 1.9 kullanıyorum. Ayrıca backbone.js'yi kullanmam ve koleksiyonumda getirme çağrısı ile ilgili bir sorun yaşıyorum ... herhangi bir fikir mi? – darylhedley

+1

jQuery 1.9 harika çalışıyor; Tamamen CSP uyumlu. https://github.com/GoogleChrome/chrome-app-samples/tree/master/weather, jQuery'yi mutlu bir şekilde kullanan Chrome paketli uygulamasının bir örneğidir. Yaklaşık% 80 eminim Backbone CSP ile çalışıyor, ancak birkaç değişiklik gerektirebilir (emin değilim, onunla çalışmadı). Cevabımda söylediğim gibi, küçük adımlar atın - çalışma kodundan başlayın ve mola verinceye kadar yeni şeyler eklemeye devam edin, sonra bir geri adım atın. İyi şanslar. – sowbug

0

Ben senin sorunun değil, istemci tarafında daha sunucu tarafında olduğuna inanıyoruz. Bununla

Access-Control-Allow-Origin: * 

sorun, ancak, herhangi bir sayfa artık bu içeriği yükleyebilirsiniz olmasıdır: Sunucu jQuery tepki ile uğraşmak için aşağıdaki başlığı göndermesi gerekir. Bu işe gösterdi

Access-Control-Allow-Origin: chrome-extension://gmelhokjkebpmoejhcelmnopijabmobf/ 

aşağıdaki gibi bir şeyin kısa bir test: Eğer uzantısının kimliğini öğrendikten sonra, böyle bir şey için bu başlık değiştirmek

<h1>Content Below</h1> 
<div id="loadme"></div> 
<script src="jquery-1.9.1.min.js"></script> 
<script src="app.js"></script> 

// app.js 
$(document).ready(function() { 
    $.get('http://localhost:8080/content.php', function(data) { 
    $('#loadme').html(data); 
    }); 
}); 

Bu başarısız olur mesajın aşağıdaki Ben Access-Control-Allow-Origin başlık eklemek olmasaydı:

XMLHttpRequest cannot load http://localhost:8080/newhope/deleteme.php. 
Origin chrome-extension://gmelhokjkebpmoejhcelgkfeijabmobf is not allowed by 
Access-Control-Allow-Origin. 

Ben php yanıta Access-Control-Allow-Origin başlığı eklendikten sonra, iyi çalıştı. herhangi bir tarayıcı sayfası yerde satır içi yüklemek için izin olarak

Yine * bu ayar bir güvenlik riski olabilir.

2

Korumalı sayfadan istekte bulunursanız ve korumalı sayfaların boş bir kaynağı vardır.

Google Grubu bu issue soru gönderdiniz.Krom sanal politikasını değiştirdi karar vermezse

, sadece geçici çözüm olmayan bir korumalı alan sayfadan XHR isteklerini yapmak ve korumalı sayfaya vermek API geçen Chrome'un mesaj kullanmaktır görünür.

Neden bu kadar zor olması gerektiğini bilmiyorum.

DÜZENLEME:

Krom Ekibi'nden answer * CORS başlığı değiştirmek oldu.

+1

Tamamen katılıyorum. Bu nedenle, bu amaçla chrome paketlenmiş uygulamaları kullanmaya karar verdim. Uygulamam için bana daha fazla seçenek sunan nod-webkit'e geçtim. – darylhedley

+0

Parantez kabuğu da bakmaya değer bir seçenek. –

+0

Köşeli parantezler gerçekten çok iyi. Onların homurdanan görevlerini de seviyorum. Onlardan öğrenecek çok şey var. – darylhedley

İlgili konular