《XXSS与插件如何使用插件》由会员分享，可在线阅读，更多相关《XXSS与插件如何使用插件（11页珍藏版）》请在金锄头文库上搜索。
1、第1章 如何使用插件第1章如何使用插件 由于CSS得到了所有主流浏览器的支持，因此，大家认为使用它就像使用文本编辑器和Web浏览器一样容易。虽然可以这样想，但如果希望生成在所有主流浏览器上都能最佳显示的页面，实际上还要考虑很多事情。首先，尽管几乎所有Web浏览器都支持CSS，但在实现特定功能的方式上它们之间还是有差异的，包括元素周围的空间，甚至元素的大小。这意味着需要在所有主流浏览器上测试Web页面，以确保它们在所有情况下都能很好地显示。因此，如果使用Mac OS X或其他操作系统(如Linux)，那还需要能访问Windows计算机，因为Internet Explorer目前的版本只支持Win
2、dows操作系统。1.1 下载和安装Web浏览器表1-1列出了5种主流Web浏览器及它们的Internet下载地址。尽管所有这些浏览器都可在Windows PC上安装，但它们并不都支持OS X或Linux。这些URL处的网页是智能的，会根据操作系统提供相应的下载版本(如果支持)。在准备学习本书之前，笔者建议你尽可能将这些浏览器都安装到你的计算机上。如果运行的是XP或以上版本的Windows系统，那就能够安装所有浏览器，但在其他操作系统上，想都安装则不太容易。例如，在Mac OS X上(因为针对Mac的IE只开发到了版本5，其后已就没有开发了)，可以安装除Microsoft Internet E
3、xplorer之外的所有浏览器。尽管可以在Mac上安装Wine软件的执行部分Windows应用程序，如使用它运行Internet Explorer，但笔者发现这一过程比较费力且结果不一致。因此，笔者不建议采用这一方法。也不建议依赖那些在不同的浏览器中对Web页面进行屏幕截图的网站，因为它们不能告诉你鼠标、键盘和其他功能是否工作良好或者根本不工作。最好的选择是进行双系统(Windows和Mac OS X)安装，或是确保能访问Windows PC。毕竟，除非特意针对Mac计算机开发，否则使用Windows操作系统的用户还是占大多数。至于Linux，它不但不能访问Internet Explorer，
4、而且也没有Safari版本，不过所有其他的浏览器都支持Linux系统。和OS X一样，尽管存在集成Wine来运行Internet Explorer的各种解决方案，但它们只适用于部分发布版本，要想找到在Linux上运行Windows浏览器的完美方法还是有点困难的。因此，如果你准备在非Windows计算机上进行开发，应保证它能访问Windows PC或者在安装主操作系统的同时安装Windows实现双启动(或作为虚拟机)，这样可以在将Web站点发布到Web之前对其进行完全测试。表1-1 Web浏览器的下载URL以及支持的操作系统Web浏览器下载URLWindowsMacLinuxApple S C
5、Internet E F 老版本的Microsoft Internet Explorer虽然Internet Explorer的最新版本(在写本书时是IE8，不过IE9也在开发当中)能与其他主流浏览器非常好地兼容，但仍有大量运行IE7甚至IE6的用户。据统计，截至2010年中，浏览器的使用率如图1-1所示。图1-1 截至2010年6月的浏览器市场份额由于Internet Explorer的每个版本的工作方式不尽相同(IE6和IE7约有超过25%的用户)，因此除了在主流浏览器的最新版本中测试Web页面外，还需要在这些较老版本中测试。我们知道这很痛苦，但又必须去做。幸运的是，有使其变简单的方法。1
6、.2.1 模拟IE6和IE7为了帮助设计Web站点的开发人员专门针对较老版本做些工作，Internet Explorer的开发人员创建了元标记，可将其添加到Web页面的头部，从而让IE知道它是较老的版本。下面是两个主要的元标记。下面是如何使用IE7标记的例子：My Website. Website Contents .没有IE=6选项(可能因为IE5和IE6的呈现引擎是类似的)，因此使用IE=5选项使Internet Explorer进入所谓的特殊模式。在该模式下，其行为类似于IE5和IE6。顺便提一下，如果想强制Internet Explorer进入完全标准模式(即尽可能与其他浏览器兼容)，
7、可使用选项IE=8。或者，没有元标记，Internet Explorer将使用其自己的、专有的优化设置，即边缘模式也可以选择IE=edge。当然，一旦完成测试，除非有特殊理由，应删除或注释掉这些元标记。另外，应总是确保在每个文档的开头有一个合适的HTML文档类型声明。例如，最常见的文档类型如下所示，它是经过完全测试的，适用于本书中所有插件。提示：如果使用不同于此的文档类型，特定的插件可能有不同的行为，因而必须对其稍作修改。笔者经常使用前面所示的“松散”文档类型和IE7元标记获得与其他主流浏览器最大的兼容。记住，如果你的Web页面在所有其他浏览器中都正常工作但在IE中行为怪异，那么解决方案就是修
8、改文档类型和IE5/IE7元标记。如果对浏览器兼容性和它们间各种细微差别感兴趣，可访问Quirks Mode网站(quirksmode.org)。1.3 配套网站为了省去输入插件代码的工作，可从本书的配套网站()下载插件，如图1-2所示。单击Download链接下载文件plug-ins.zip，这是个包含了所有插件的压缩文件(在所有操作系统中都可解压缩)。解压缩之后，可看到所有插件按数字顺序保存在PC.css文件中。还有一个名为ReadMe.txt的文件，该文件包含了有关插件的最新信息，包括自本书出版后所做的所有改进或更新。另外，还包含有演示每个插件用法的各种示例文件，可将它们加载到浏览器中测
9、试。同时还有两个JavaScript文件PJ.js和PC.js，本章最后一节在介绍JavaScript时将对这两个文件进行说明，第12章中的插件将会使用它们。图1-2 配套网站警告：默认情况下，Windows计算机可能不显示文件扩展名，除非启用这一功能。在这种情况下，文件将显示为index(而不是index.html)或PC(而不是PC.css)等。1.4 关于文档对象模型当HTML出现时，一个重要的设计决定是将其基于DOM(Document Object Model，文档对象模型)。这是一种将Web页面中的不同元素分成单独对象的方法，每个对象有其自己的属性和值。这是个明智的决定，因为这样就引
10、入了样式表，使得Web页面的内容与其样式完全分开，同时使HTML文档易于用如JavaScript这样的语言修改，从而提供动态用户交互功能。当将Web页面放入DOM中时，用CSS样式化其每个部分是很容易的。例如，每个标题将位于像这样的标记对中，单个CSS指令就可以设置文档中所有这样的标记的样式，如可以改变使用的字体、字体大小及任意字体修饰等。这样就可以完全改变页面设计而不修改HTML，正如在后面的一些插件中将看到的，一些样式设置甚至可以使页面元素在鼠标划过时有动态效果(例如，改变其颜色和其他属性)或使用专门的浏览器扩展创建渐变效果。1.4.1 DOM的工作原理DOM将HTML文档的各个部分组成一
11、个对象层次结构，每个对象有其自己的属性。术语“属性”用于表示对象的特性，如对象包含的HTML、对象宽度和高度等。最外层的对象是window对象，它表示的是当前浏览器窗口、tab、iframe或弹出式窗口。在其下是document对象，可以有多个文档(例如将几个文档加载到同一页面的不同iframe中)。在文档中有一些其他对象，如页面头部和主体等。在页面头部中，又有其他对象，如标题和元对象，而主体对象可包含大量其他对象，包括标题、锚、表单等的HTML标记。图1-3显示了示例文档的DOM表示，其头部有一个标题Hello和一个元标记，其主体部分有3个HTML元素(链接、表单和图像)。当然，即使是最简单
12、的Web页面，其结构也比这里的复杂，这里只是用于演示DOM的工作原理。从最外部开始是窗口，其中有一个文档，在该文档中是各种元素或对象，它们互相联系。在图1-3中，属性用较黑的背景和斜体表示。例如，值robots是name的属性，name又是meta的属性，依此类推。尽管图中没有显示，元标记应还有另一个匹配的属性content，该属性包含一个字符串，指定哪个机器人可以访问Web页面的内容。其他属性包括http:/(它是href标记的属性，href又是a的属性，依此类推)和Hello(它是title的属性)。所有其他项均是对象或对象参数名。如果将图1-3向纵向和横向扩展，则将显示出其他对象和属性。图中两个这样的地方用断开的虚线表示。图1-3 显示头部和主体部分的DOM示例如果将该DOM示例表示成HTML代码，头部的结构如下所示：HelloHTML的主体部分如下所示：Visit Googleor enter your username and password to continue.记住，HTML的这两个部分是同一文档的一部分，我们将它们放在标记中，如下所示：Helloa href=http:/go
