| OLD | NEW |
| 1 <h1>Embed Content</h1> | 1 <h1>Embed Content</h1> |
| 2 | 2 |
| 3 | 3 |
| 4 <p> | 4 <p> |
| 5 The <a href="app_architecture.html#security">packaged apps security model</a> di
sallows | 5 The <a href="app_architecture.html#security">packaged apps security model</a> di
sallows |
| 6 external content in iframes and | 6 external content in iframes and |
| 7 the use of inline scripting and <code>eval()</code>. | 7 the use of inline scripting and <code>eval()</code>. |
| 8 You can override these restrictions, | 8 You can override these restrictions, |
| 9 but your external content must be isolated from the app. | 9 but your external content must be isolated from the app. |
| 10 </p> | 10 </p> |
| (...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 64 img.src = window.webkitURL.createObjectURL(this.response); | 64 img.src = window.webkitURL.createObjectURL(this.response); |
| 65 document.body.appendChild(img); | 65 document.body.appendChild(img); |
| 66 }; | 66 }; |
| 67 | 67 |
| 68 xhr.send(); | 68 xhr.send(); |
| 69 </pre> | 69 </pre> |
| 70 | 70 |
| 71 <p>You may want to <a href="offline_apps.html#saving-locally">save</a> | 71 <p>You may want to <a href="offline_apps.html#saving-locally">save</a> |
| 72 these resources locally, so that they are available offline.</p> | 72 these resources locally, so that they are available offline.</p> |
| 73 | 73 |
| 74 <h2 id="browsertag">Embed external web pages</h2> | 74 <h2 id="webview">Embed external web pages</h2> |
| 75 | 75 |
| 76 <p class="note"> | 76 <p class="note"> |
| 77 <b>API Sample: </b> | 77 <b>API Sample: </b> |
| 78 Want to play with the code? Check out the | 78 Want to play with the code? Check out the |
| 79 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/browser-
tag">browser-tag</a> | 79 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/browser-
tag">webview</a> |
| 80 sample. | 80 sample. |
| 81 </p> | 81 </p> |
| 82 | 82 |
| 83 <p> | 83 <p> |
| 84 The <code>browser</code> tag allows you to embed external web content in your | 84 The <code>webview</code> tag allows you to embed external web content in your |
| 85 app, for example, a web page. It replaces iframes that point to remote URLs, | 85 app, for example, a web page. It replaces iframes that point to remote URLs, |
| 86 which are disabled inside packaged apps. Unlike iframes, the | 86 which are disabled inside packaged apps. Unlike iframes, the |
| 87 <code>browser</code> tag runs in a separate process. This means that an exploit | 87 <code>webview</code> tag runs in a separate process. This means that an exploit |
| 88 inside of it will still be isolated and won't be able to gain elevated | 88 inside of it will still be isolated and won't be able to gain elevated |
| 89 privileges. Further, since its storage (cookies, etc.) is isolated from the app, | 89 privileges. Further, since its storage (cookies, etc.) is isolated from the app, |
| 90 there is no way for the web content to access any of the app's data. | 90 there is no way for the web content to access any of the app's data. |
| 91 </p> | 91 </p> |
| 92 | 92 |
| 93 <h3 id="browser_element">Add browser element</h3> | 93 <h3 id="webview_element">Add webview element</h3> |
| 94 | 94 |
| 95 <p> | 95 <p> |
| 96 Your <code>browser</code> element must include the URL to the source content | 96 Your <code>webview</code> element must include the URL to the source content |
| 97 and specify its dimensions. | 97 and specify its dimensions. |
| 98 </p> | 98 </p> |
| 99 | 99 |
| 100 <pre><browser src="http://news.google.com/" width="640" height="480"></bro
wser></pre> | 100 <pre><webview src="http://news.google.com/" width="640" height="480"></web
view></pre> |
| 101 | 101 |
| 102 <h3 id="properties">Update properties</h3> | 102 <h3 id="properties">Update properties</h3> |
| 103 | 103 |
| 104 <p> | 104 <p> |
| 105 To dynamically change the <code>src</code>, <code>width</code> and | 105 To dynamically change the <code>src</code>, <code>width</code> and |
| 106 <code>height</code> properties of a <code>browser</code> tag, you can either | 106 <code>height</code> properties of a <code>webview</code> tag, you can either |
| 107 set those properties directly on the JavaScript object, or use the | 107 set those properties directly on the JavaScript object, or use the |
| 108 <code>setAttribute</code> DOM function. | 108 <code>setAttribute</code> DOM function. |
| 109 </p> | 109 </p> |
| 110 | 110 |
| 111 <pre> | 111 <pre> |
| 112 document.querySelector('#mybrowser').src = | 112 document.querySelector('#mywebview').src = |
| 113 'http://blog.chromium.org/'; | 113 'http://blog.chromium.org/'; |
| 114 // or | 114 // or |
| 115 document.querySelector('#mybrowser').setAttribute( | 115 document.querySelector('#mywebview').setAttribute( |
| 116 'src', 'http://blog.chromium.org/'); | 116 'src', 'http://blog.chromium.org/'); |
| 117 </pre> | 117 </pre> |
| 118 | 118 |
| 119 <h2 id="sandboxing">Sandbox local content</h2> | 119 <h2 id="sandboxing">Sandbox local content</h2> |
| 120 | 120 |
| 121 <p> | 121 <p> |
| 122 Sandboxing allows specified pages | 122 Sandboxing allows specified pages |
| 123 to be served in a sandboxed, unique origin. | 123 to be served in a sandboxed, unique origin. |
| 124 These pages are then exempt from their Content Security Policy. | 124 These pages are then exempt from their Content Security Policy. |
| 125 Sandboxed pages can use iframes, inline scripting, | 125 Sandboxed pages can use iframes, inline scripting, |
| (...skipping 146 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 272 | 272 |
| 273 <pre> | 273 <pre> |
| 274 var messageHandler = function(e) { | 274 var messageHandler = function(e) { |
| 275 console.log('Background script says hello.', e.data); | 275 console.log('Background script says hello.', e.data); |
| 276 }; | 276 }; |
| 277 | 277 |
| 278 window.addEventListener('message', messageHandler); | 278 window.addEventListener('message', messageHandler); |
| 279 </pre> | 279 </pre> |
| 280 | 280 |
| 281 <p class="backtotop"><a href="#top">Back to top</a></p> | 281 <p class="backtotop"><a href="#top">Back to top</a></p> |
| OLD | NEW |