Javascript 在浏览器向服务器发送任何操作URI的请求之前执行代码块

也许我要求太多了，但要求它比假设它不存在要好得多

为了将网页转换成单个文件（包括html中的所有外部资源），我计划使用数据URI方案。但是这种转换的问题是，很多页面都包含Javascript代码来生成资源的URI。我E页面使用JS设置图像的

src

是完全正常的

在最坏的情况下，URI是由数据URI方案组成的，在这种情况下，用数据URI方案替换URI是绝对不可能的。g

img.src='domain.com/'+some_variable+'.png'

我能想到的克服这种情况和所有其他情况的唯一方法是在URI更改之后和下载之前引入一个中间代码块。如果这样的机会存在，我可以处理请求的URI，并用适当的数据URI方案替换它。它还受益于全局数据URI方案存储，从而减小html文件大小

有人知道这样的机会是否存在吗？或者如果有人能创造它

[编辑]

我希望我的单文件网页是这样的：

<script>
var uri_dictionary = {
    'http://www.domain.com/1.png': 'data:image/png;base64,iVBORw0KGgoAAAAN...',
    'http://www.domain.com/2.png': 'data:image/png;base64,iVBORw0KGgoAAAAN...'
};

function translateURI(url) {
    if (uri_dictionary[url]) {
        return uri_dictionary[url];
    }
    else {
        return url;
    }
}
</script>


变量uri_字典={
'http://www.domain.com/1.png“：”数据：image/png；base64，ivborw0kggoaaan，
'http://www.domain.com/2.png“：”数据：image/png；base64，ivborw0kggoaaan…“
};
函数translateURI（url）{
如果（uri\U字典[url]）{
返回uri_字典[url]；
}
否则{
返回url；
}
}

上面是我计划注入到我将要生成的单个文件网页中的代码的简化版本。只是
translateURI
函数需要在发送所有传出请求之前拦截它们。并在可行的情况下替换它们请求的URI。
我认为这个问题没有通用的解决方案。从理论上讲，您可以分析代码路径并尝试所有可能的情况，但这会“有点”过头，可能会导致站点将数百万图像加载到HTML中。您还可以尝试手动指定要加载的图像，因为它是您自己的站点

您拦截图像加载事件的方法也是不可能的（根据）

您不能只是“取消”图像的加载过程（将src属性设置为空字符串不是一个好主意）。事实上，即使可以，这样做也只会让事情变得更糟，因为您的服务器会不断发送会被取消的数据，从而增加其负载系数并降低其速度

我也不太喜欢将图像嵌入HTML的想法，因为它绕过了所有缓存机制，给服务器增加了更多负载

编辑
我一起破解了一些代码，$（“img”）.removeAttr部分似乎工作正常（它足够快地中止了加载，至少在Chrome上是如此），其余部分未经测试

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
  var links = $("img").map(function() {
    return $(this).attr("src");
  });
  $("img").removeAttr("src");
  $("img").each(function (image,index) {
    $(image).attr("src",translateURI(links[index]));
  }
} );
</script>


$（文档）.ready（函数（）{
var links=$（“img”）.map（函数（）{
返回$（this.attr（“src”）；
});
$（“img”）.removeAttr（“src”）；
$（“img”）。每个功能（图像、索引）{
$（图片）.attr（“src”，translateURI（链接[索引]）；
}
} );

试着把它放在页面的开头
你想在你自己的网站上还是在别人的网站上做这件事？我自己，为我编写的网站。但我不明白这有什么关系？你能使用PhantomJS吗？它可以运行整个javascript，你以后可以使用完整的URL下载图像。如果你感兴趣，我可以提供一个例子。实际上我会o计划使用PhantomJs。但我认为这不会解决任何问题。演示这个问题的最简单的例子是一个图像，它在单击后在两个源之间切换。新源的URI将由JS代码组成。你打算如何从PhantomJs解决如此复杂的问题中获益？你完全正确防止缓存和嵌入式资源的所有缺点。但我正在研究一个场景，它不仅是可行的（由于资源小）但这也是唯一的方法。换句话说，我不可能将一个网页保存在多个文件中。那么我的第一个方法是将数据插入Javascript，而不是链接。如果这也不可能，请看canvas标签。坦率地说，如果我能做到我所要求的，我会感到惊讶。但你提到的帖子并不是对r我的问题。我没有试图中止发送的请求。我试图在发送请求之前将其转移。这意味着我试图阻止任何请求发送，而是从以前下载的数据URI方案字符串加载它们。尽管您的黑客程序解决了
src
的初始值问题，但如果
src
稍后由一个代码更新。注册一个DOM修改处理程序（），并对我上面所做的每一个更改执行相同的操作。