使用Fiddler将JavaScript注入网站的head元素 [英] Injecting JavaScript into head element of website using Fiddler
问题描述
我正在考虑将Fiddler用于以下目的...
I was thinking of using Fiddler for the following purpose...
我想向潜在客户展示基于JavaScript的服务。为了向他们展示如果他们安装（包括）我的脚本，他们的网站会是什么样子，我想在我的电脑上设置Fiddler，以便在获取客户的网站时，
I have a JavaScript based service I want to demonstrate to potential clients. In order to show them what their website could look like if they install (i.e. include) my script, I want to set up Fiddler on my PC, so that when fetching the client's website, the
<script type="text/JavaScript" src="myscript.js"></script>
行将包含在HTML < head> 部分。
line will be included in the HTML <head> section.
这可以通过Fiddler轻松完成吗？有人能指出我在哪里可以找到涵盖的文件，如果是的话？
Can this be easily done with Fiddler? Could someone point me to where I may find the documentation covering that, if it is?
谢谢！
----更新----
----Update----
目前我已经使用BHO将我的脚本添加到页面中。我在onDocumentComplete上使用execScript（）来运行一段简单的JavaScript，它将我需要的.js文件附加到页面上。但EricLaw的指针和抖动的答案似乎是采用更完整（和优雅）的方式来做我需要的方式。
For the time being I have resorted to using a BHO to add my script to the page. I use execScript(), upon onDocumentComplete, to run a simple piece of JavaScript which appends the .js file I need to the page. But EricLaw's pointers and jitter's answer seem like the way to go for a more complete (and elegant) way to do what I need.
如果有人有兴趣我可以上传BHO代码在这里。
-Thanks！
If someone is interested I could upload the BHO code here. -Thanks!
推荐答案
打开提琴手 - >菜单规则 - >自定义规则（或按Ctrl + R）
Open fiddler -> Menu Rules -> Customize Rules (or hit Ctrl+R)
CustomRule.js 文件打开。向下滚动，直至找到该行
The CustomRule.js file opens. Scroll down until you find the line
static function OnBeforeResponse(oSession: Session)
这是您的代码所在。在这里，您可以在浏览器看到之前更改服务器响应。
This is where your code goes. Here you can change the server response before the browser sees it.
以下代码示例显示如何包含替换未答复链接，其中包含一个的简短链接未回答的jQuery问题
The following code sample shows how to include a custom piece of jQuery code which replaces the Unanswered link in the horizontal menu with a link which serves as short cut to Unanswered jQuery Questions
我首先向您展示我想要包含的jQuery代码
I first show you the jQuery code I want to include
<script type='text/javascript'>
$(function() {
var newLink = '<a href="/unanswered/tagged/jquery">Unanswered jQuery</a>';
$('div#hmenus div.nav:first ul li:last a').replaceWith(newLink);
});
</script>
现在是fiddler代码（基于 CustomRules.js 中的代码和来自 FiddlerScript CookBook 的代码示例
Now the fiddler code (based on code found in CustomRules.js and code samples from the FiddlerScript CookBook)
//is it a html-response and is it from stackoverflow.com
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html") &&
oSession.HostnameIs("stackoverflow.com")) {
// Remove any compression or chunking
oSession.utilDecodeResponse();
var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);
// Match the jQuery script tag
var oRegEx = /(<script[^>]*jquery.min.js"><\/script>)/gi;
// replace the script tag withitself (no change) + append custom script tag
oBody = oBody.replace(oRegEx, "$1<script type='text/javascript'>$(function() {$('div#hmenus div.nav:first ul li:last a').replaceWith('<a href=\"/unanswered/tagged/jquery\">Unanswered jQuery</a>');})</script>");
// Set the response body to the changed body string
oSession.utilSetResponseBody(oBody);
}
结果如下所示
已修改stackoverflow.com http://img269.imageshack.us/img269/570/clipboard01ym.jpg
我认为你现在应该能够自己解决一段适合你问题的代码。
I think you should now able to hackyourself together a piece of code which fits your problem.
实施例
// Match the head end
var oRegEx = /(<\/head>)/gi;
// replace with new script
oBody = oBody.replace(oRegEx, "<script type='text/javascript' src='http://url/myscript.js'></script>$1");
这篇关于使用Fiddler将JavaScript注入网站的head元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
