Skip to content

GitLab

T
tangled
Commit c0679892 authored by mkwst@chromium.org's avatar mkwst@chromium.org
Browse files
Options

Docs: Clarifying the CSP-friendly replacement for <body onload="XXX">. 

BUG=140185


Review URL: https://chromiumcodereview.appspot.com/10832110

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@152121 0039d316-1c4b-4281-b951-d872f2087c98
parent b29bd891
Show whitespace changes
Inline Side-by-side
Showing with 64 additions and 29 deletions
chrome/common/extensions/docs/extensions/contentSecurityPolicy.html
View file @ c0679892
...@@ -299,9 +299,12 @@ ...@@ -299,9 +299,12 @@
function clickHandler(element) { function clickHandler(element) {
setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000); setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000);
} }
function main() {
// Initialization work goes here.
}
&lt;/script&gt; &lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body onload="main();"&gt;
&lt;button <strong>onclick="clickHandler(this)"</strong>&gt; &lt;button <strong>onclick="clickHandler(this)"</strong>&gt;
Click for awesomeness! Click for awesomeness!
&lt;/button&gt; &lt;/button&gt;
...@@ -317,8 +320,13 @@ ...@@ -317,8 +320,13 @@
JavaScript file (<code>popup.js</code> would be a good target). JavaScript file (<code>popup.js</code> would be a good target).
</li> </li>
<li> <li>
The inline event handler definition must be rewritten in terms of <p>The inline event handler definitions must be rewritten in terms of
<code>addEventListener</code> and extracted into <code>popup.js</code>. <code>addEventListener</code> and extracted into <code>popup.js</code>.</p>
<p>If you're currently kicking off your program's execution via code like
<code>&lt;body onload="main();"&gt;</code>, consider replacing it by hooking
into the document's <code>DOMContentLoaded</code> event, or the window's
<code>load</code> event, depending on your needs. Below we'll use the
former, as it generally triggers more quickly.</p>
</li> </li>
<li> <li>
The <code>setTimeout</code> call will need to be rewritten to avoid The <code>setTimeout</code> call will need to be rewritten to avoid
...@@ -337,22 +345,25 @@ function awesome() { ...@@ -337,22 +345,25 @@ function awesome() {
function totallyAwesome() { function totallyAwesome() {
// do something TOTALLY awesome! // do something TOTALLY awesome!
} }
<strong> <strong>function awesomeTask() {
function awesomeTask() {
awesome(); awesome();
totallyAwesome(); totallyAwesome();
} }</strong>
</strong>
function clickHandler(e) { function clickHandler(e) {
setTimeout(<strong>awesomeTask</strong>, 1000); setTimeout(<strong>awesomeTask</strong>, 1000);
} }
function main() {
// Initialization work goes here.
}
// Add event listeners once the DOM has fully loaded by listening for the // Add event listeners once the DOM has fully loaded by listening for the
// `DOMContentLoaded` event on the document, and adding your listeners to // `DOMContentLoaded` event on the document, and adding your listeners to
// specific elements when it triggers. // specific elements when it triggers.
document.addEventListener('DOMContentLoaded', function () { <strong>document.addEventListener('DOMContentLoaded', function () {</strong>
document.querySelector('button').addEventListener('click', clickHandler); document.querySelector('button').addEventListener('click', clickHandler);
main();
}); });
popup.html: </pre>
<pre>popup.html:
=========== ===========
&lt;!doctype html&gt; &lt;!doctype html&gt;
&lt;html&gt; &lt;html&gt;
......
chrome/common/extensions/docs/server2/templates/articles/contentSecurityPolicy.html
View file @ c0679892
...@@ -95,9 +95,13 @@ ...@@ -95,9 +95,13 @@
function clickHandler(element) { function clickHandler(element) {
setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000); setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000);
} }
function main() {
// Initialization work goes here.
}
&lt;/script&gt; &lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body onload="main();"&gt;
&lt;button <strong>onclick="clickHandler(this)"</strong>&gt; &lt;button <strong>onclick="clickHandler(this)"</strong>&gt;
Click for awesomeness! Click for awesomeness!
&lt;/button&gt; &lt;/button&gt;
...@@ -115,8 +119,13 @@ ...@@ -115,8 +119,13 @@
JavaScript file (<code>popup.js</code> would be a good target). JavaScript file (<code>popup.js</code> would be a good target).
</li> </li>
<li> <li>
The inline event handler definition must be rewritten in terms of <p>The inline event handler definitions must be rewritten in terms of
<code>addEventListener</code> and extracted into <code>popup.js</code>. <code>addEventListener</code> and extracted into <code>popup.js</code>.</p>
<p>If you're currently kicking off your program's execution via code like
<code>&lt;body onload="main();"&gt;</code>, consider replacing it by hooking
into the document's <code>DOMContentLoaded</code> event, or the window's
<code>load</code> event, depending on your needs. Below we'll use the
former, as it generally triggers more quickly.</p>
</li> </li>
<li> <li>
The <code>setTimeout</code> call will need to be rewritten to avoid The <code>setTimeout</code> call will need to be rewritten to avoid
...@@ -140,25 +149,28 @@ function totallyAwesome() { ...@@ -140,25 +149,28 @@ function totallyAwesome() {
// do something TOTALLY awesome! // do something TOTALLY awesome!
} }
<strong> <strong>function awesomeTask() {
function awesomeTask() {
awesome(); awesome();
totallyAwesome(); totallyAwesome();
} }</strong>
</strong>
function clickHandler(e) { function clickHandler(e) {
setTimeout(<strong>awesomeTask</strong>, 1000); setTimeout(<strong>awesomeTask</strong>, 1000);
} }
function main() {
// Initialization work goes here.
}
// Add event listeners once the DOM has fully loaded by listening for the // Add event listeners once the DOM has fully loaded by listening for the
// `DOMContentLoaded` event on the document, and adding your listeners to // `DOMContentLoaded` event on the document, and adding your listeners to
// specific elements when it triggers. // specific elements when it triggers.
document.addEventListener('DOMContentLoaded', function () { <strong>document.addEventListener('DOMContentLoaded', function () {</strong>
document.querySelector('button').addEventListener('click', clickHandler); document.querySelector('button').addEventListener('click', clickHandler);
main();
}); });
</pre>
popup.html: <pre>popup.html:
=========== ===========
&lt;!doctype html&gt; &lt;!doctype html&gt;
......
chrome/common/extensions/docs/static/contentSecurityPolicy.html
View file @ c0679892
...@@ -95,9 +95,13 @@ ...@@ -95,9 +95,13 @@
function clickHandler(element) { function clickHandler(element) {
setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000); setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000);
} }
function main() {
// Initialization work goes here.
}
&lt;/script&gt; &lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body onload="main();"&gt;
&lt;button <strong>onclick="clickHandler(this)"</strong>&gt; &lt;button <strong>onclick="clickHandler(this)"</strong>&gt;
Click for awesomeness! Click for awesomeness!
&lt;/button&gt; &lt;/button&gt;
...@@ -115,8 +119,13 @@ ...@@ -115,8 +119,13 @@
JavaScript file (<code>popup.js</code> would be a good target). JavaScript file (<code>popup.js</code> would be a good target).
</li> </li>
<li> <li>
The inline event handler definition must be rewritten in terms of <p>The inline event handler definitions must be rewritten in terms of
<code>addEventListener</code> and extracted into <code>popup.js</code>. <code>addEventListener</code> and extracted into <code>popup.js</code>.</p>
<p>If you're currently kicking off your program's execution via code like
<code>&lt;body onload="main();"&gt;</code>, consider replacing it by hooking
into the document's <code>DOMContentLoaded</code> event, or the window's
<code>load</code> event, depending on your needs. Below we'll use the
former, as it generally triggers more quickly.</p>
</li> </li>
<li> <li>
The <code>setTimeout</code> call will need to be rewritten to avoid The <code>setTimeout</code> call will need to be rewritten to avoid
...@@ -140,25 +149,28 @@ function totallyAwesome() { ...@@ -140,25 +149,28 @@ function totallyAwesome() {
// do something TOTALLY awesome! // do something TOTALLY awesome!
} }
<strong> <strong>function awesomeTask() {
function awesomeTask() {
awesome(); awesome();
totallyAwesome(); totallyAwesome();
} }</strong>
</strong>
function clickHandler(e) { function clickHandler(e) {
setTimeout(<strong>awesomeTask</strong>, 1000); setTimeout(<strong>awesomeTask</strong>, 1000);
} }
function main() {
// Initialization work goes here.
}
// Add event listeners once the DOM has fully loaded by listening for the // Add event listeners once the DOM has fully loaded by listening for the
// `DOMContentLoaded` event on the document, and adding your listeners to // `DOMContentLoaded` event on the document, and adding your listeners to
// specific elements when it triggers. // specific elements when it triggers.
document.addEventListener('DOMContentLoaded', function () { <strong>document.addEventListener('DOMContentLoaded', function () {</strong>
document.querySelector('button').addEventListener('click', clickHandler); document.querySelector('button').addEventListener('click', clickHandler);
main();
}); });
</pre>
popup.html: <pre>popup.html:
=========== ===========
&lt;!doctype html&gt; &lt;!doctype html&gt;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment