javascript - 如何将 Javascript 注入(inject)站点，然后确保它跨浏览器兼容？

Question

我正在做一些契约(Contract)工作，我需要为客户站点编写一小段 Javascript，然后确保它们在所有浏览器中都能正常工作。

我无法访问网站的服务器本身，因此我需要能够以其他方式注入(inject)代码段。

我尝试用 PHP 编写一个代理脚本，它获取站点的源代码，绝对化所有 URL，然后注入(inject) Javascript，这适用于某些客户端站点(并且具有可以在多个浏览器中轻松测试的优势)。

但是一些大量使用 Javascript 的网站不使用这种方法——它们会做一些事情，比如测试 window.location 以确保它没有被欺骗，或者它们会包含对本地服务器上文件的引用代理脚本无法过滤。

作为替代方案，我想我可以使用 Greasemonkey 来注入(inject) Javascript ...这会让我看到代码在 Firefox 中的外观，但是我如何在 IE6 中进行测试？

当您无法访问最终将驻留 Javascript 的站点时，有人可以建议一种进行跨浏览器 Javascript 开发的方法吗？

Answer 1

您可以使用 bookmarklet通过注入(inject) script 标记来插入您的 JavaScript。

代码本身看起来像这样:

(function() {
    var d = document,
        s = d.createElement('script'),
        t = d.body || d.getElementsByTagName('head')[0] || d.documentElement;
    s.src = "http://path/to/your/script.js";
    t.appendChild(s);
})();

然后将其加入书签(搜索“bookmarklet maker”，您会找到一群为您完成这项工作的人)。为结果添加书签，访问要测试的页面，然后单击书签进行测试。

例如:

javascript:(function(){%28function%28%29%20%7Bvar%20d%20%3D%20document%2Cs%20%3D%20d.createElement%28%27script%27%29%2Ct%20%3D%20d.body%20%7C%7C%20d.getElementsByTagName%28%27head%27%29%5B0%5D%20%7C%7C%20d.documentElement%3Bs.src%20%3D%20%22http%3A//jsbin.com/ajubo4%22%3Bt.appendChild%28s%29%3B%7D%29%28%29%3B})();

如果您将其复制到书签的 URL 中，当您在任何主流浏览器上激活书签时，它会从 http://jsbin.com 加载一个简单的脚本。 (您可以找到 here )它会发出警报，告诉您页面上有多少 p 元素。 (目前此页面上有 23 个。)