如何随机替换特定 URL 的 HREF? innerHTML 影响延迟加载
How do I randomly replace the HREF of a specific URL? innerHTML affects lazy loading
好吧,我的头已经撞了一个多星期了,我受不了了。
我的目标是随机替换任何给定页面上特定URL的HREF。
例如:https://example.com/offer/free-pizza/
我的 URL 的某些版本包含查询字符串参数,即我想忽略的 https://example.com/offer/free-pizza/?sliceapp,这就是为什么我明确使用正则表达式来在此行中为我的特定 URL 标出引号:
str.replace(/"https:\/\/example\.com\/offer\/free-pizza\/"/g
我正在 Google 标签管理器中使用自定义 HTML 标签部署下面的代码。不幸的是,这些链接不包含 ID,因此我无法具体调用这些 ID,所以我正在查看页面正文 中包含的所有内容 ,换句话说,,这是我正在处理的每个页面的主体。下面的代码完全按照预期工作, 除了 页面上的延迟加载图像不会出现。
<script>
function myfunction(){
var str = document.getElementById("main").innerHTML;
var res = str.replace(/"https:\/\/example\.com\/offer\/free-pizza\/"/g, function() {
return ['https://example.com/somewhere-else/', 'https://example.com/offer/free-pizza/'][Math.floor(Math.random() * 2)]
return Math.floor(Math.random() * (max - min + 1)) + min;
});
document.getElementById("main").innerHTML = res;
}
</script>
根据我的故障排除,我知道这个问题与使用 innerHTML 到 return 整个 。图片和 returned HTML 显然有些东西在那里不起作用。所以我开始只查看页面上的单个 URL,而不是整个 部分,这样我就可以完全绕过图像问题。
此时我一定已经编写了数十种变体来尝试实现这一点,但似乎没有任何效果。
var els = document.querySelectorAll("a[href^='https://example.com/offer/']");
for (var i = 0, l = els.length; i < l; i++) {
var el = els[i];
el = el.replace(/"https:\/\/example\.com\/offer\/free-pizza\/"/g, function() {
return ['https://example.com/somewhere-else/', 'https://example.com/offer/free-pizza/'][Math.floor(Math.random() * 2)]
return Math.floor(Math.random() * (max - min + 1)) + min;
})};
</script>
我希望比我聪明得多的人能够看到我明显的缺陷,并指出我如何根据上下文和我的目标以更有效的方式编写这篇文章的方向。
谢谢。
替换整个文档的 innerHTML
的问题是,您可能会删除(并替换)已附加事件侦听器的 DOM 节点,这会使它们无效。我猜懒加载机制就是利用了这个。
因此,无需替换整个文档的 innerHTML
,您只需遍历锚标记并替换 href
属性:
document
.querySelectorAll("a[href^='https://example.com/offer/']")
.forEach(function (el) {
el.href = el.href.replace(/https\:\/\/example\.com\/offer\//g, replaceFn);
});
function replaceFn() {
return [
'https://example.com/somewhere-else/',
'https://example.com/offer/free-pizza/'
][Math.floor(Math.random() * 2)];
}
好吧,我的头已经撞了一个多星期了,我受不了了。
我的目标是随机替换任何给定页面上特定URL的HREF。
例如:https://example.com/offer/free-pizza/
我的 URL 的某些版本包含查询字符串参数,即我想忽略的 https://example.com/offer/free-pizza/?sliceapp,这就是为什么我明确使用正则表达式来在此行中为我的特定 URL 标出引号:
str.replace(/"https:\/\/example\.com\/offer\/free-pizza\/"/g
我正在 Google 标签管理器中使用自定义 HTML 标签部署下面的代码。不幸的是,这些链接不包含 ID,因此我无法具体调用这些 ID,所以我正在查看页面正文 中包含的所有内容 ,换句话说,,这是我正在处理的每个页面的主体。下面的代码完全按照预期工作, 除了 页面上的延迟加载图像不会出现。
<script>
function myfunction(){
var str = document.getElementById("main").innerHTML;
var res = str.replace(/"https:\/\/example\.com\/offer\/free-pizza\/"/g, function() {
return ['https://example.com/somewhere-else/', 'https://example.com/offer/free-pizza/'][Math.floor(Math.random() * 2)]
return Math.floor(Math.random() * (max - min + 1)) + min;
});
document.getElementById("main").innerHTML = res;
}
</script>
根据我的故障排除,我知道这个问题与使用 innerHTML 到 return 整个 。图片和 returned HTML 显然有些东西在那里不起作用。所以我开始只查看页面上的单个 URL,而不是整个 部分,这样我就可以完全绕过图像问题。
此时我一定已经编写了数十种变体来尝试实现这一点,但似乎没有任何效果。
var els = document.querySelectorAll("a[href^='https://example.com/offer/']");
for (var i = 0, l = els.length; i < l; i++) {
var el = els[i];
el = el.replace(/"https:\/\/example\.com\/offer\/free-pizza\/"/g, function() {
return ['https://example.com/somewhere-else/', 'https://example.com/offer/free-pizza/'][Math.floor(Math.random() * 2)]
return Math.floor(Math.random() * (max - min + 1)) + min;
})};
</script>
我希望比我聪明得多的人能够看到我明显的缺陷,并指出我如何根据上下文和我的目标以更有效的方式编写这篇文章的方向。
谢谢。
替换整个文档的 innerHTML
的问题是,您可能会删除(并替换)已附加事件侦听器的 DOM 节点,这会使它们无效。我猜懒加载机制就是利用了这个。
因此,无需替换整个文档的 innerHTML
,您只需遍历锚标记并替换 href
属性:
document
.querySelectorAll("a[href^='https://example.com/offer/']")
.forEach(function (el) {
el.href = el.href.replace(/https\:\/\/example\.com\/offer\//g, replaceFn);
});
function replaceFn() {
return [
'https://example.com/somewhere-else/',
'https://example.com/offer/free-pizza/'
][Math.floor(Math.random() * 2)];
}