XXSS与插件如何使用插件.docx

《XXSS与插件如何使用插件.docx》由会员分享，可在线阅读，更多相关《XXSS与插件如何使用插件.docx（14页珍藏版）》请在冰豆网上搜索。

XXSS与插件如何使用插件

第1章

如何使用插件

由于CSS得到了所有主流浏览器的支持，因此，大家认为使用它就像使用文本编辑器和Web浏览器一样容易。

虽然可以这样想，但如果希望生成在所有主流浏览器上都能最佳显示的页面，实际上还要考虑很多事情。

首先，尽管几乎所有Web浏览器都支持CSS，但在实现特定功能的方式上它们之间还是有差异的，包括元素周围的空间，甚至元素的大小。

这意味着需要在所有主流浏览器上测试Web页面，以确保它们在所有情况下都能很好地显示。

因此，如果使用MacOSX或其他操作系统（如Linux），那还需要能访问Windows计算机，因为InternetExplorer目前的版本只支持Windows操作系统。

1.1下载和安装Web浏览器

表1-1列出了5种主流Web浏览器及它们的Internet下载地址。

尽管所有这些浏览器都可在WindowsPC上安装，但它们并不都支持OSX或Linux。

这些URL处的网页是智能的，会根据操作系统提供相应的下载版本（如果支持）。

在准备学习本书之前，笔者建议你尽可能将这些浏览器都安装到你的计算机上。

如果运行的是XP或以上版本的Windows系统，那就能够安装所有浏览器，但在其他操作系统上，想都安装则不太容易。

例如，在MacOSX上（因为针对Mac的IE只开发到了版本5，其后已就没有开发了），可以安装除MicrosoftInternetExplorer之外的所有浏览器。

尽管可以在Mac上安装Wine软件的执行部分Windows应用程序，如使用它运行InternetExplorer，但笔者发现这一过程比较费力且结果不一致。

因此，笔者不建议采用这一方法。

也不建议依赖那些在不同的浏览器中对Web页面进行屏幕截图的网站，因为它们不能告诉你鼠标、键盘和其他功能是否工作良好或者根本不工作。

最好的选择是进行双系统（Windows和MacOSX）安装，或是确保能访问WindowsPC。

毕竟，除非特意针对Mac计算机开发，否则使用Windows操作系统的用户还是占大多数。

至于Linux，它不但不能访问InternetExplorer，而且也没有Safari版本，不过所有其他的浏览器都支持Linux系统。

和OSX一样，尽管存在集成Wine来运行InternetExplorer的各种解决方案，但它们只适用于部分发布版本，要想找到在Linux上运行Windows浏览器的完美方法还是有点困难的。

因此，如果你准备在非Windows计算机上进行开发，应保证它能访问WindowsPC或者在安装主操作系统的同时安装Windows实现双启动（或作为虚拟机），这样可以在将Web站点发布到Web之前对其进行完全测试。

表1-1Web浏览器的下载URL以及支持的操作系统

Web浏览器

下载URL

Windows

Mac

Linux

AppleSafari

√

√

GoogleChrome

√

√

√

MicrosoftInternetExplorer

√

MozillaFirefox

√

√

√

Opera

√

√

√

1.2老版本的MicrosoftInternetExplorer

虽然InternetExplorer的最新版本（在写本书时是IE8，不过IE9也在开发当中）能与其他主流浏览器非常好地兼容，但仍有大量运行IE7甚至IE6的用户。

据统计，截至2010年中，浏览器的使用率如图1-1所示。

图1-1截至2010年6月的浏览器市场份额

由于InternetExplorer的每个版本的工作方式不尽相同（IE6和IE7约有超过25%的用户），因此除了在主流浏览器的最新版本中测试Web页面外，还需要在这些较老版本中测试。

我们知道这很痛苦，但又必须去做。

幸运的是，有使其变简单的方法。

1.2.1模拟IE6和IE7

为了帮助设计Web站点的开发人员专门针对较老版本做些工作，InternetExplorer的开发人员创建了元标记，可将其添加到Web页面的头部，从而让IE知道它是较老的版本。

下面是两个主要的元标记。

下面是如何使用IE7标记的例子：

...WebsiteContents...

没有IE=6选项（可能因为IE5和IE6的呈现引擎是类似的），因此使用IE=5选项使Internet

Explorer进入所谓的特殊模式。

在该模式下，其行为类似于IE5和IE6。

顺便提一下，如果想强制InternetExplorer进入完全标准模式（即尽可能与其他浏览器兼容），可使用选项IE=8。

或者，没有元标记，InternetExplorer将使用其自己的、专有的优化设置，即边缘模式——也可以选择IE=edge。

当然，一旦完成测试，除非有特殊理由，应删除或注释掉这些元标记。

另外，应总是确保在每个文档的开头有一个合适的HTML文档类型声明。

例如，最常见的文档类型如下所示，它是经过完全测试的，适用于本书中所有插件。

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"http:

//www.w3.org/TR/html4/loose.dtd">

提示：

如果使用不同于此的文档类型，特定的插件可能有不同的行为，因而必须对其稍作修改。

笔者经常使用前面所示的“松散”文档类型和IE7元标记获得与其他主流浏览器最大的兼容。

记住，如果你的Web页面在所有其他浏览器中都正常工作但在IE中行为怪异，那么解决方案就是修改文档类型和IE5/IE7元标记。

如果对浏览器兼容性和它们间各种细微差别感兴趣，可访问QuirksMode网站（quirksmode.org）。

1.3配套网站

为了省去输入插件代码的工作，可从本书的配套网站（）下载插件，如图1-2所示。

单击Download链接下载文件plug-ins.zip，这是个包含了所有插件的压缩文件（在所有操作系统中都可解压缩）。

解压缩之后，可看到所有插件按数字顺序保存在PC.css文件中。

还有一个名为ReadMe.txt的文件，该文件包含了有关插件的最新信息，包括自本书出版后所做的所有改进或更新。

另外，还包含有演示每个插件用法的各种示例文件，可将它们加载到浏览器中测试。

同时还有两个JavaScript文件PJ.js和PC.js，本章最后一节在介绍JavaScript时将对这两个文件进行说明，第12章中的插件将会使用它们。

图1-2配套网站

警告：

默认情况下，Windows计算机可能不显示文件扩展名，除非启用这一功能。

在这种情况下，文件将显示为index（而不是index.html）或PC（而不是PC.css）等。

1.4关于文档对象模型

当HTML出现时，一个重要的设计决定是将其基于DOM（DocumentObjectModel，文档对象模型）。

这是一种将Web页面中的不同元素分成单独对象的方法，每个对象有其自己的属性和值。

这是个明智的决定，因为这样就引入了样式表，使得Web页面的内容与其样式完全分开，同时使HTML文档易于用如JavaScript这样的语言修改，从而提供动态用户交互功能。

当将Web页面放入DOM中时，用CSS样式化其每个部分是很容易的。

例如，每个标题将位于像

…

这样就可以完全改变页面设计而不修改HTML，正如在后面的一些插件中将看到的，一些样式设置甚至可以使页面元素在鼠标划过时有动态效果（例如，改变其颜色和其他属性）或使用专门的浏览器扩展创建渐变效果。

1.4.1DOM的工作原理

DOM将HTML文档的各个部分组成一个对象层次结构，每个对象有其自己的属性。

术语“属性”用于表示对象的特性，如对象包含的HTML、对象宽度和高度等。

最外层的对象是window对象，它表示的是当前浏览器窗口、tab、iframe或弹出式窗口。

在其下是document对象，可以有多个文档（例如将几个文档加载到同一页面的不同iframe中）。

在文档中有一些其他对象，如页面头部和主体等。

在页面头部中，又有其他对象，如标题和元对象，而主体对象可包含大量其他对象，包括标题、锚、表单等的HTML标记。

图1-3显示了示例文档的DOM表示，其头部有一个标题Hello和一个元标记，其主体部分有3个HTML元素（链接、表单和图像）。

当然，即使是最简单的Web页面，其结构也比这里的复杂，这里只是用于演示DOM的工作原理。

从最外部开始是窗口，其中有一个文档，在该文档中是各种元素或对象，它们互相联系。

在图1-3中，属性用较黑的背景和斜体表示。

例如，值robots是name的属性，name又是meta的属性，依此类推。

尽管图中没有显示，元标记应还有另一个匹配的属性content，该属性包含一个字符串，指定哪个机器人可以访问Web页面的内容。

其他属性包括（它是href标记的属性，href又是a的属性，依此类推）和Hello（它是title的属性）。

所有其他项均是对象或对象参数名。

如果将图1-3向纵向和横向扩展，则将显示出其他对象和属性。

图中两个这样的地方用断开的虚线表示。

图1-3显示头部和主体部分的DOM示例

如果将该DOM示例表示成HTML代码，头部的结构如下所示：

HTML的主体部分如下所示：

VisitGoogle

orenteryourusernameandpasswordtocontinue...

记住，HTML的这两个部分是同一文档的一部分，我们将它们放在标记中，如下所示：

VisitGoogle,

orenteryourusernameandpasswordtocontinue...

当然，实际的Web页面可能与此完全不同，但它们常采用同样的形式。

尽管并不总是这样，因为大部分浏览器比较宽容，允许省略一些内容，如末尾的结束标记及开始标记等。

不过，笔者不建议这样做，因为后面你还有可能将页面转换成XHTML，而后者要严格得多。

因此，闭合每个标记并确保顺序正确是个好习惯。

例如，不应将放在后面来闭合文档，因为这样的标记嵌套顺序是不正确的。

同理，应有自关闭没有结束标记的标记的习惯。

如，它没有匹配的标记，因此，要求在最后的>符号之前有一个/字符以正确关闭它。

同样，
变成
等。

还应记住，标记中的参数必须由单引号或双引号引起来，以实现与XHTML的兼容，尽管几乎所有浏览器都允许省略它。

注意：

在Web早期，大部分用户使用非常慢的拨号调制解调器，所以经常看到在Web页面中省略引号和各种标记的现象。

但如今，大部分用户获得了相当不错的带宽速度，因而也就不需要这样做了。

1.5关于CSS

使用CSS，可以按自己的意愿对Web页面应用样式。

这是可行的，因为CSS是与DOM相联系的，因此可以快速而容易地改变元素样式。

例如，如果不喜欢

、

等标题标记的默认样式，可以指派新样式来覆盖所使用的字体系列和大小的默认设置，或决定是否设置粗体或斜体及许多其他属性。

给Web页面添加样式的一种方式是将所需的语句插入到Web页面的头部中，即和标记之间。

因此，要改变

标记的样式，可使用下列代码：

在HTML页面中，结果如下所示（见图1-4）：

Hellothere

图1-4样式化

标记，小窗口中显示的是原样式

1.5.1导入样式表

当希望样式化整个站点而不是单个页面时，较好的管理样式表的方法是将它们完全从Web页面中移除，放到单独的文件中，然后导入需要的文件。

这样针对不同的布局（如Web布局和打印布局）就有了不同的样式表，而不会改变HTML。

可以通过两种不同的方法达到此目的，一种是使用CSS的@import指令，如下所示：

这一语句告诉浏览器从/css文件夹中取出名为styles.css的样式表。

@import命令是非常灵活的，如可以创建导入其他样式表的样式表等。

但要确保在任何外部样式表中没有标记，否则就不行。

1.从HTML内部导入CSS

也可以用HTML标记包括进样式表，如下所示：

这与@import指令的效果是一样的，除了是个HTML标记，而不是个有效的样式指令外。

因此，它不能用于从一个样式表中导入另一个样式表，也不能放在标记对中。

正如可以在CSS中使用多个@import指令包括多个外部样式表一样，也可以在HTML中使用任意多条语句。

1.5.2局部样式设置

也可以分情况单独设置或覆盖当前页面上的特定样式，方法是直接在HTML中插入样式语句，如下所示（该样式语句使标记中的文本为蓝色斜体）：

italic;color:

blue;">Hello