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

Question

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

为了将网页转换器创建为单个文件（包括 html 的所有外部资源），我计划使用数据 URI 方案。但是这种转换的问题是很多页面都包含 Javascript 代码来提供资源的 URI。一世。 e.页面用JS设置图片的src是完全正常的。

在最坏的情况下，URI 是组合的，在这种情况下，绝对不可能用 Data URI Scheme 替换 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>

以上是我计划注入到我将要生成的单文件网页中的代码的简化版本。只是translateURI函数需要在发出之前拦截所有的外发请求。并在可行的情况下替换他们请求的 URI。

Answer 1

我认为这个问题没有通用的解决方案。您可以（理论上）分析代码路径并尝试所有可能的情况，但这会“有点”矫枉过正，可能会导致网站将数百万张图像加载到 HTML 中。您也可以尝试手动指定要加载的图像，因为它是您自己的网站。

你拦截图片加载事件的方法也是不可能的（根据https://stackoverflow.com/a/6974878/2224188）

您不能只是“取消”图像的加载过程（将 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>

试着把它放在页面的头部