2013-04-12 4 views
5

मैं बैकबोन का उपयोग करके निर्मित एक वेब ऐप में लोड करने की कोशिश कर रहा हूं और यह JSON और HTML टेम्पलेट फ़ाइलों में खींचता है जो स्थानीय रूप से संग्रहीत हैं। मैं क्रोम पैक किए गए ऐप्स के साथ सोच रहा था कि क्या किसी भी प्रकार के 'get'/AJAX अनुरोध का उपयोग कर इन फ़ाइलों को लोड करना संभव है?क्रोम पैक किए गए ऐप में एक्सएचआर के माध्यम से स्थानीय सामग्री लोड हो रहा है

वर्तमान में मैं इस हो रही है ...

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. 

मैं ऐसा करने के तरीके इसलिए किसी भी मदद बहुत धन्यवाद होगा पर किसी भी वास्तविक जानकारी नहीं मिल सकता है!

+0

आपकी उत्पत्ति शून्य क्यों है? यदि आप ऐप के अंदर फ़ाइल में पैक किए गए ऐप में मानक विंडो से एक्सएचआर करते हैं, तो यह काम करता है। –

+0

खैर मेरी उत्पत्ति शून्य लगती है क्योंकि मेरे ऐप में एक सैंडबॉक्स पृष्ठ है जो एक वेबपैप है। यह वेबैप एक एक्सएमएल फ़ाइल में अपने डेटा स्रोत के रूप में लोड होता है। लेकिन यह काम नहीं लग रहा है। मैं एक एक्सएचआर अनुरोध कैसे करूं? – darylhedley

उत्तर

6

हां, यह पूरी तरह से संभव है, और यह आसान है। यहां एक कामकाजी नमूना है। इसके साथ शुरू करने का प्रयास करें, पुष्टि करें कि यह काम करता है, और फिर अपने कोड में वापस जोड़ें। यदि आप रोडब्लॉक दबाते हैं और XHR पैक किए गए ऐप्स में काम करते हैं, तो आप एक और सवाल पूछना चाहेंगे, इससे अधिक विशिष्ट प्रश्न के साथ आते हैं।

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

बढ़िया! यह काम करता है। अभी भी मेरे वेबएप के साथ समस्या है। क्या मुझे jquery का एक अलग संस्करण होना चाहिए? वर्तमान में मैं 1.9 का उपयोग कर रहा हूँ। इसके अलावा मुझे backbone.js और मेरे संग्रह पर एक fetch कॉल का उपयोग करने में कोई समस्या है ... कोई विचार? – darylhedley

+1

jQuery 1.9 बहुत अच्छा काम करता है; यह पूरी तरह से सीएसपी-अनुपालन है। https://github.com/GoogleChrome/chrome-app-samples/tree/master/weather क्रोम पैक किए गए ऐप का एक उदाहरण है जो खुशी से jQuery का उपयोग करता है। मुझे लगभग 80% यकीन है कि बैकबोन सीएसपी के साथ काम करता है, लेकिन इसमें कुछ संशोधन की आवश्यकता हो सकती है (सुनिश्चित नहीं है, इसके साथ काम नहीं किया है)। जैसा कि मैंने अपने जवाब में कहा था, छोटे कदम उठाएं - काम करने वाले कोड से शुरू करें और जब तक यह टूट न जाए तब तक नई सामग्री जोड़ना जारी रखें, फिर एक को पीछे छोड़ दें। सौभाग्य। – sowbug

0

मेरा मानना ​​है कि आपकी समस्या सर्वर साइड पर है, बल्कि ग्राहक के पक्ष से।

Access-Control-Allow-Origin: * 

समस्या, इस के साथ, तथापि, कि किसी भी पृष्ठ अब कि सामग्री लोड कर सकते हैं: सर्वर निम्नलिखित हैडर भेजने के लिए jQuery प्रतिक्रिया से निपटने के लिए के लिए की जरूरत है। इन काम करने के लिए दिखाया

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

निम्नलिखित की तरह कुछ की एक छोटी परीक्षण: एक बार जब आप अपने विस्तार के आईडी पता है, तुम जैसे कुछ करने के लिए है कि शीर्ष लेख को बदल सकते हैं

<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); 
    }); 
}); 

इस के साथ विफल हो जाएगा संदेश निम्न अगर मैं Access-Control-Allow-Origin शीर्षक जोड़ नहीं किया:

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

एक बार मैं php प्रतिक्रिया पर Access-Control-Allow-Origin हैडर कहा, यह ठीक काम किया।

फिर से, इसे * पर सेट करना एक सुरक्षा जोखिम हो सकता है क्योंकि किसी भी ब्राउज़र पृष्ठ को इनलाइन को लोड करने की अनुमति कहीं भी है।

2

आप एक सैंडबॉक्स वाले पृष्ठ से अनुरोध कर रहे हैं, और सैंडबॉक्स वाले पृष्ठों में शून्य मूल है।

मैंने Google समूह पर यह issue प्रश्न पोस्ट किया है।

जब तक क्रोम सैंडबॉक्स नीति बदल करने का फैसला करता है, ऐसा लगता ही वैकल्पिक हल के लिए एक गैर सैंडबॉक्स पेज से एक्सएचआर अनुरोध करने और पारित करने एपीआई यह अपने सैंडबॉक्स पेज को देने के लिए क्रोम के संदेश का प्रयोग है।

मुझे नहीं पता कि यह इतना कठिन क्यों होना चाहिए।

संपादित करें:

answer क्रोम टीम की ओर से CORS हेडर को बदलने के लिए था *।

+1

मैं पूरी तरह से सहमत हूं। मैंने वास्तव में इस कारण से क्रोम पैक किए गए ऐप्स का उपयोग करने का फैसला किया। मैं नोड-वेबकिट पर चले गए जिसने मुझे अपने ऐप के लिए बहुत अधिक विकल्प दिए। – darylhedley

+0

ब्रैकेट शैल भी देखने के लायक विकल्प हैं। –

+0

ब्रैकेट खोल वास्तव में अच्छा है। मुझे उनके कड़वाहट कार्यों को भी पसंद है। उनसे सीखने के लिए बहुत कुछ। – darylhedley

संबंधित मुद्दे