4.16. 处理已渲染的页面 [深入浅出 Greasemonkey]

4.16. 处理已渲染的页面

由于 Firefox 保存已渲染页面的内在方式，应该在页面加载完成以后，才能对页面上的 DOM 做出大规模的改动，那么这个操作应该发生在页面完成载入之后，这是由已执行页面在 Firefox 内的存储方式决定的。您可以用 addEventListener 函数来延迟函数的执行。

例 4.20. 替换全部页面为自定义的内容

var newBody = 
'<html>' +
'<head>' +
'<title>My New Page</title>' +
'</head>' +
'<body>' +
'<p>This page is a complete replacement of the original.</p>' +
'</body>' +
'</html>';
window.addEventListener(
	'load', 
	function() { document.body.innerHTML = newBody; },
	true);

仔细看这段代码，您可能自然地想知道它是怎么执行的。我声明了一个匿名函数来做为 window.addEventListener 的第二个参数传入，它访问了在这个函数外定义的变量 newBody。这种方法称为 “闭包(closure)”，在 Javascript 中是完全有效的。一般说来，在“外层”函数中定义的“内层”函数可以访问外层函数的所有局部变量 -- 甚至在外层函数执行结束以后。这是一个很有用的特性，可以通过它来创建事件句柄和用来在运行时建立的数据构架的其他函数。

删除和替换 document.body.innerHTML 并不会更改页面。原页面在 <head> 中定义的所有内容仍然是有效的，包括页面的标题，CSS 样式，以及脚本。可以分开修改或者移除。

实例

← 设置元素样式

匹配大小写无关的属性值 →