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
Hide 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 @@
function clickHandler(element) {
setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000);
}
function main() {
// Initialization work goes here.
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;body onload="main();"&gt;
&lt;button <strong>onclick="clickHandler(this)"</strong>&gt;
Click for awesomeness!
&lt;/button&gt;
......@@ -317,8 +320,13 @@
JavaScript file (<code>popup.js</code> would be a good target).
</li>
<li>
The inline event handler definition must be rewritten in terms of
<code>addEventListener</code> and extracted into <code>popup.js</code>.
<p>The inline event handler definitions must be rewritten in terms of
<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>
The <code>setTimeout</code> call will need to be rewritten to avoid
......@@ -337,22 +345,25 @@ function awesome() {
function totallyAwesome() {
// do something TOTALLY awesome!
}
<strong>
function awesomeTask() {
<strong>function awesomeTask() {
awesome();
totallyAwesome();
}
</strong>
}</strong>
function clickHandler(e) {
setTimeout(<strong>awesomeTask</strong>, 1000);
}
function main() {
// Initialization work goes here.
}
// Add event listeners once the DOM has fully loaded by listening for the
// `DOMContentLoaded` event on the document, and adding your listeners to
// specific elements when it triggers.
document.addEventListener('DOMContentLoaded', function () {
<strong>document.addEventListener('DOMContentLoaded', function () {</strong>
document.querySelector('button').addEventListener('click', clickHandler);
main();
});
popup.html:
</pre>
<pre>popup.html:
===========
&lt;!doctype html&gt;
&lt;html&gt;
......
chrome/common/extensions/docs/server2/templates/articles/contentSecurityPolicy.html
View file @ c0679892
......@@ -95,9 +95,13 @@
function clickHandler(element) {
setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000);
}
function main() {
// Initialization work goes here.
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;body onload="main();"&gt;
&lt;button <strong>onclick="clickHandler(this)"</strong>&gt;
Click for awesomeness!
&lt;/button&gt;
......@@ -115,8 +119,13 @@
JavaScript file (<code>popup.js</code> would be a good target).
</li>
<li>
The inline event handler definition must be rewritten in terms of
<code>addEventListener</code> and extracted into <code>popup.js</code>.
<p>The inline event handler definitions must be rewritten in terms of
<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>
The <code>setTimeout</code> call will need to be rewritten to avoid
......@@ -140,25 +149,28 @@ function totallyAwesome() {
// do something TOTALLY awesome!
}
<strong>
function awesomeTask() {
<strong>function awesomeTask() {
awesome();
totallyAwesome();
}
</strong>
}</strong>
function clickHandler(e) {
setTimeout(<strong>awesomeTask</strong>, 1000);
}
function main() {
// Initialization work goes here.
}
// Add event listeners once the DOM has fully loaded by listening for the
// `DOMContentLoaded` event on the document, and adding your listeners to
// specific elements when it triggers.
document.addEventListener('DOMContentLoaded', function () {
<strong>document.addEventListener('DOMContentLoaded', function () {</strong>
document.querySelector('button').addEventListener('click', clickHandler);
main();
});
popup.html:
</pre>
<pre>popup.html:
===========
&lt;!doctype html&gt;
......
chrome/common/extensions/docs/static/contentSecurityPolicy.html
View file @ c0679892
......@@ -95,9 +95,13 @@
function clickHandler(element) {
setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000);
}
function main() {
// Initialization work goes here.
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;body onload="main();"&gt;
&lt;button <strong>onclick="clickHandler(this)"</strong>&gt;
Click for awesomeness!
&lt;/button&gt;
......@@ -115,8 +119,13 @@
JavaScript file (<code>popup.js</code> would be a good target).
</li>
<li>
The inline event handler definition must be rewritten in terms of
<code>addEventListener</code> and extracted into <code>popup.js</code>.
<p>The inline event handler definitions must be rewritten in terms of
<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>
The <code>setTimeout</code> call will need to be rewritten to avoid
......@@ -140,25 +149,28 @@ function totallyAwesome() {
// do something TOTALLY awesome!
}
<strong>
function awesomeTask() {
<strong>function awesomeTask() {
awesome();
totallyAwesome();
}
</strong>
}</strong>
function clickHandler(e) {
setTimeout(<strong>awesomeTask</strong>, 1000);
}
function main() {
// Initialization work goes here.
}
// Add event listeners once the DOM has fully loaded by listening for the
// `DOMContentLoaded` event on the document, and adding your listeners to
// specific elements when it triggers.
document.addEventListener('DOMContentLoaded', function () {
<strong>document.addEventListener('DOMContentLoaded', function () {</strong>
document.querySelector('button').addEventListener('click', clickHandler);
main();
});
popup.html:
</pre>
<pre>popup.html:
===========
&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