Question

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

为了将网页转换器创建为单个文件（包括html的所有外部资源），我计划使用数据URI方案。但是这种转换的问题在于，许多页面都包含Javascript代码以提供资源的URI。一世。即对于页面来说，使用JS设置图像的src是完全普通的。

在最坏的情况下，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>

以上是我计划注入我将要生成的单个文件网页的代码的简化版本。只是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>

尝试将其放在页面的头部

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

1 个答案: