Javascript 使用AJAX获取外部页面（同一域）上DOM元素的URL，这些URL由支持JS的用户单击生成

我希望这个标题不是太复杂而无法理解。。。请耐心等待我的解释，因为我正在工作的平台的限制使这个问题变得复杂

我正在商业电子商务平台（即BigCommerce）上开发一个功能特性。这在做什么和如何做方面造成了许多限制

我正在努力实现的目标：

• 当用户单击colorswatch“功能中的颜色时，我需要将连接到相应产品图像颜色的色样带到网站的类别页面

• 此功能已经存在于各个产品页面上，但是没有直接的方法将其带到类别页面，因此使用此脚本

• 因此，本质上，当用户在产品页面上时，他们会看到一行小彩色框（即，红色、绿色、蓝色、黄色等），单击这些框时，会将相应的产品颜色图像显示到主图像DOM元素中（因此，如果单击红色，则在主图像DOM元素中显示红色产品，如果单击绿色，则显示绿色产品，依此类推）

实施这项计划的问题是：

由于某些可怕的原因，开发人员无法使用将特定颜色与特定图像匹配的规则集。它们甚至无法通过任何语言（ruby、python、PHP）的API使用

在产品页面上，该特性存在，URL不存在，因为当用户单击框时，它们是由后端PHP（我认为）自动生成的。（老实说，我不知道图片的URL是如何生成的，但我无法直接或通过动态规则找到对URL的任何引用。我已经手动搜索了所有JS，并通过一些搜索找到了对该功能的任何引用）

我编写了一个脚本来模拟用户单击，因为这似乎是唯一更改图像的操作。我还尝试编写了一个脚本，该脚本复制与单击相同的行为（即，将一个框的类从selectedValue更改为nothing，并将clicked框设置为selectedValue，但这不会更改DOM元素）。我正在使用的脚本利用了.click（）。click（）是否可以与AJAX一起用于模拟外部页面上的用户行为，生成动态内容，然后将该操作的结果显示到当前页面

我的问题:

• 有没有可能通过以下方式实现这一点
• 使用AJAX访问每个产品页面
• 模仿用户点击每个颜色框
• 记录通过单击更改的图像DOM元素的每个URL
• 然后将这些URL及其各自的颜色值带到当前页面
• 并利用它们在该页面上重新创建色样单击行为

你有没有其他方法可以实现这一点？

---

我非常乐意与大家分享我写的JS，以及两个页面中的相关HTML，但我不认为这对回答我的问题一定有帮助。

我不能100%确定我是否找到了您想要的解决方案。您最好加载整个页面并运行一个脚本来为您完成所有导航。但这不适用于跨站点。如果您正在处理同一项目，请使用提交页面来处理您的请求。但我不确定您是否能够做到这一点

不管怎么说，这里有一些代码可以给你看

<button class='clickable' data-href='page.php'>URL One</button>
<button class='clickable' data-href='otherpage.php'>URL Two</button>
<input name='color' class='data' value='black'/>
<input name='color2' class='data' value='yellow'/>
<div class='text-center' id='container'></div>

$('.clickable').click(function () {
    var href = $(this).data('href');
    var data = $('.data').serialize();
    $.post(href, data, function (html) {
        $('#container').html(html);
    });
});