Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

DOM 操作拦截器

  虽然 DOM 监控这件事本身有 Mutation Observer API 可以用,但是这套 API 的设计是属于后监控。它会在当前脚本执行帧结束后在另一个执行帧中处理监控到的数据,也就是页面先渲染,然后才被监控到。也就是最基本的异步监控而已,无法拦截也无法篡改具体操作。
  以前兼容低版本 IE 的时代,浏览器对很多特性的实现都是通过黑科技的。比如 DOM 元素这类对象在古老的 IE 中根本就没有原型链的概念。所以当时想通过劫持来实现 DOM 监控就像做梦一样。如今就不同了,现代浏览器上的各种原生属性和方法也是通过 JavaScript 的语言特性来实现的。因此我们可以愉快地劫持这些方法和属性来实现对 DOM 的入侵。
  一个最简单的例子就是把 appendChild 给劫持掉,它被设置在 Node.prototype.appendChild 上。于是可以这么玩 void function() { var appendChild = Node.prototype.appendChild; Node.prototype.appendChild = function() { console.log(this, arguments); return appendChild.apply(this, arguments); }; }();   对属性的劫持呢?就拿 innerHTML 为例吧,我们同样可以这么玩 void function() { var ep = Element.prototype; var desc = Object.getOwnPropertyDescriptor(ep, 'innerHTML'); var get = desc.get; var set = desc.set; desc.get = function() { console.log('get', this, arguments); return get.apply(this, arguments); }; desc.set = function() { console.log('set', this, arguments); return set.apply(this, arguments); }; Object.defineProperty(ep, 'innerHTML', desc); }();   上面这两个操作只是个范例,DOM 操作还有很多很多。当我们劫持了所有 DOM 操作之后就可以发现,整个文档都是自己可以驾驭的了。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^