gpt4 book ai didi

javascript - 防止从脚本加载图像

转载 作者:行者123 更新时间:2023-11-28 06:50:07 24 4
gpt4 key购买 nike

我在使用某些图像标签时遇到了一些小问题。我们有一个返回一堆 HTML 的服务(遗留)。此处的图像标签在其 HTML 中包含相对路径,该路径相对于错误的基数。对我来说解决这个问题很简单 - 只需将其放入 div 中,选择图像,然后修改它们的 URL。

问题是,一旦您将该 HTML 放入 div 中,浏览器就会请求错误的 URL。因此,即使将图像放入 div 的目的是为了纠正问题,控制台也会出现图像 404 警告。

我发现您可以使用 noscript 标记来阻止图像加载。不幸的是,当用 noscript 替换 div 时,我们遇到了一个相当大的问题 - 似乎从 script 操作 noscript 标签非常困难。 native 函数(在 Chrome 中)似乎返回完全不同的结果。例如,当我们尝试设置 noscript 的内部 HTML 时,它似乎认为我们实际上打算将该 HTML 设置为文本。

如何防止图像标记加载其 URL,直到我修复它们?

编辑:我从 AJAX 请求中以字符串形式返回了 HTML。

最佳答案

这可能/可能无法解决您的特定问题,因为我没有任何代码可以评估。此方法已在 Chrome/Edge/FF 上成功测试(没有控制台错误)。

根据您使用 AJAX 的编辑,使用脚本添加 html 字符串:

var el = document.createElement("DIV");
el.innerHTML = '<img src="wrong_path.jpg" />';
var imgs = el.getElementsByTagName("IMG");
imgs[0].src = "http://placehold.it/350x150";
document.body.appendChild(el);

另一种可能解决这个问题的方法是使用 DOM 解析器,将字符串转换为 HTML,迭代图像并更新其“src”,然后返回要插入到现有 DOM 中的 DOM 子集。

来源:https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

如果需要捕获插入来手动检查插入的元素,可以使用 DOM 节点插入:

来源:https://stackoverflow.com/a/18152595/2827823

document.body.addEventListener("DOMNodeInserted", function (evt) {
if (evt.target.tagName == "IMG") {
evt.target.src = "http://placehold.it/350x150";
}
});

document.body.innerHTML = '<img id="foo" src="wrong_path_bar.png"/>';

如果需要捕获这些生成的错误而不手动查找它们,可以使用错误事件处理程序:

来源:Alter the prototype of an image tag?

window.addEventListener("error", function(e) {
if ( e && e.target && e.target.nodeName && e.target.nodeName.toLowerCase() == "img" ) {
// Bad image src
// e.target.src = "Do an url replacement";
}
}, true);

关于javascript - 防止从脚本加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33035802/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com