The Head: Script Includes and Styles

We start with the head of our document. This is where we will load in all of the script includes and styles that we’ll use in the example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<title>Web sanitization with Caja</title>
<script src="jquery.min.js" type="text/javascript"></script>

<!-- caja cajoler script and whitelist definitions -->
<script src="../../src/com/google/caja/plugin/html-sanitizer.js"></script>
<script src="html4-defs.js"></script>

<style>
.contentBox{ width:400px;
             padding:5px;
             float:left;
             border:1px solid #868686;
             margin-right:10px; }
.contentRendered{ height:400px;
                  overflow:hidden; }
.contentRaw{ height:200px;
             overflow:auto; }
.contentBox *, form *{ font:12px arial,helvetica,sans-serif; }
.header{ background-color:#868686;
         color:#fff;
         font-size:16px;
         font-weight:bold;
         text-align:center;
         padding:5px; }
.clear{ clear:both;
        height:10px; }

#file{ width:300px; }
#errorMsg{ color:#d32424;
           font-weight:bold;
           display:none;  }
</style>
</head>

First, let’s look at the script includes that we are adding:

jquery.min.js

This is the minified JQuery base file we’re loading in. We will use the JQuery JavaScript library for DOM selection, for AJAX requests, and for inserting the text/HTML into their appropriate boxes in the example. We’re using a local file, but you could instead link to the CDN hosted file from http://docs.jquery.com/Downloading_jQuery ...

Get Programming Social Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial