如何将 Javascript 注入网站，然后确保它与跨浏览器兼容？答案

【问题标题】：How can I inject Javascript into a site, then make sure it's cross-browser compatible?如何将 Javascript 注入网站，然后确保它与跨浏览器兼容？
【发布时间】：2011-06-20 12:55:23
【问题描述】：

我正在做一些合同工作，其中我需要为客户端站点编写小的 Javascript sn-ps，然后确保它们在所有浏览器中都能工作。

我自己无法访问站点的服务器，因此我需要能够以其他方式注入 sn-ps。

我尝试在 PHP 中编写一个代理脚本，该脚本获取站点的源代码、绝对化所有 URL，然后注入 Javascript，它适用于某些客户端站点（并且具有在多个浏览器中易于测试的优点）。

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

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

当您无法访问最终将驻留 Javascript 的网站时，谁能建议一种进行跨浏览器 Javascript 开发的方法？

【问题讨论】：

标签： javascript proxy cross-browser greasemonkey

【解决方案1】：

您可以使用bookmarklet 通过注入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 个。）

【讨论】：

【解决方案2】：

一个快速简单的解决方案是使用Privoxy。

【讨论】：

【解决方案3】：

您可以尝试将 jQuery 与来自 hugoware 的 jsShell 插件一起使用。然后，您可以使用 chrome 将 jQuery 应用于已加载的页面。 jQuery 应该是跨浏览器兼容的。

http://hugoware.net/projects/jsshell

【讨论】：