OLD | NEW |
1 <h1 id="lab_8_web_resources">Access Web Resources</h1> | 1 <h1 id="lab_8_web_resources">Access Web Resources</h1> |
2 | 2 |
3 <p>Chrome Apps have a strict | 3 <p>Chrome Apps have a strict |
4 <a href="contentSecurityPolicy.html">Content Security Policy</a> | 4 <a href="contentSecurityPolicy.html">Content Security Policy</a> |
5 which will not let the user execute code or load resources that are hosted remot
ely.</p> | 5 which will not let the user execute code or load resources that are hosted remot
ely.</p> |
6 | 6 |
7 <p>Many applications, however, need to be able to load and display content from
a remote location. A News Reader, for example, needs to display remote content i
nline or load and show images from a remote URL.</p> | 7 <p>Many applications, however, need to be able to load and display content from
a remote location. A News Reader, for example, needs to display remote content i
nline or load and show images from a remote URL.</p> |
8 | 8 |
9 <h2 id="loading_external_web_content_into_an_element">Load external web content<
/h2> | 9 <h2 id="loading_external_web_content_into_an_element">Load external web content<
/h2> |
10 | 10 |
(...skipping 205 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
216 that will start a XHR request and execute a callback with a Blob URL. | 216 that will start a XHR request and execute a callback with a Blob URL. |
217 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab8_web
resources/angularjs/2_loading_resources/loader.js">AngularJS loader.js</a> and | 217 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab8_web
resources/angularjs/2_loading_resources/loader.js">AngularJS loader.js</a> and |
218 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab8_web
resources/javascript/2_loading_resources/loader.js">JavaScript loader.js</a> are
the same: | 218 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab8_web
resources/javascript/2_loading_resources/loader.js">JavaScript loader.js</a> are
the same: |
219 </p> | 219 </p> |
220 | 220 |
221 <pre data-filename="loader.js"> | 221 <pre data-filename="loader.js"> |
222 var loadImage = function(uri, callback) { | 222 var loadImage = function(uri, callback) { |
223 var xhr = new XMLHttpRequest(); | 223 var xhr = new XMLHttpRequest(); |
224 xhr.responseType = 'blob'; | 224 xhr.responseType = 'blob'; |
225 xhr.onload = function() { | 225 xhr.onload = function() { |
226 callback(window.webkitURL.createObjectURL(xhr.response), uri); | 226 callback(window.URL.createObjectURL(xhr.response), uri); |
227 } | 227 } |
228 xhr.open('GET', uri, true); | 228 xhr.open('GET', uri, true); |
229 xhr.send(); | 229 xhr.send(); |
230 } | 230 } |
231 </pre> | 231 </pre> |
232 | 232 |
233 <p>In the | 233 <p>In the |
234 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab8_web
resources/angularjs/2_loading_resources/controller.js">AngularJS controller.js</
a> or | 234 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab8_web
resources/angularjs/2_loading_resources/controller.js">AngularJS controller.js</
a> or |
235 <a href="">JavaScript controller.js</a>, | 235 <a href="">JavaScript controller.js</a>, |
236 add a new method that will search the Todo list looking for images that are not
loaded yet: | 236 add a new method that will search the Todo list looking for images that are not
loaded yet: |
(...skipping 219 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
456 | 456 |
457 <ul> | 457 <ul> |
458 <li><a href="webview_tag.html">Webview Tag API</a> reference</li> | 458 <li><a href="webview_tag.html">Webview Tag API</a> reference</li> |
459 <li><a href="app_external.html">Embed Content</a> tutorial</li> | 459 <li><a href="app_external.html">Embed Content</a> tutorial</li> |
460 </ul> | 460 </ul> |
461 | 461 |
462 <h2 id="what_39_s_next_">What's next?</h2> | 462 <h2 id="what_39_s_next_">What's next?</h2> |
463 | 463 |
464 <p>In <a href="app_codelab_10_publishing.html">8 - Publish App</a>, | 464 <p>In <a href="app_codelab_10_publishing.html">8 - Publish App</a>, |
465 we finish off with instructions on how to publish your app in the Chrome Web Sto
re.</p> | 465 we finish off with instructions on how to publish your app in the Chrome Web Sto
re.</p> |
OLD | NEW |