微信微网站建设平台,wordpress title 自定义,做网站用什么云服务器,小程序微信定制开发前端实践#xff1a;从商品页面读取 mpn 并实现一对一跳转
在实际开发中#xff0c;我们经常会遇到这样一种需求#xff1a; 用户浏览 A 网站的商品页面后#xff0c;点击按钮能够直接跳转到 B 网站的对应商品。 表面看似只是一个按钮跳转#xff0c;但如果不同商品需要精…前端实践从商品页面读取 mpn 并实现一对一跳转
在实际开发中我们经常会遇到这样一种需求 用户浏览 A 网站的商品页面后点击按钮能够直接跳转到 B 网站的对应商品。 表面看似只是一个按钮跳转但如果不同商品需要精确映射就必须找到每个商品的唯一标识。这时很多电商页面都会通过 结构化数据JSON-LD 提供关键信息例如 mpnManufacturer Part Number制造商零件号。 1. 问题背景
我需要在商品详情页中获取唯一标识 mpn并基于它拼接目标商店的跳转链接。页面本身是第三方的不能直接改动服务端返回的数据。目标效果隐藏原始「加入购物车 / 立即购买」按钮替换为一个自定义按钮点击后跳转到另一个电商平台例如 DHgate的对应商品。 2. 数据获取的波折
一开始我尝试直接在页面 DOM 中寻找 mpn
document.querySelector() 去找标签 → 失败在 meta 标签里查找 → 失败在页面可见文本里搜索 → 失败
直到我注意到页面 head 区域存在大量 script typeapplication/ldjson 标签这是用于 SEO 的结构化数据。 里面通常包含
{context: https://schema.org/,type: Product,name: Luxury Custom Handmade Watch,mpn: 123456789,brand: {type: Brand,name: Artisan Watches}
}注解 JSON-LDJavaScript Object Notation for Linked Data是 Google 推荐的结构化数据标注方式。 电商网站会用它向搜索引擎说明商品属性比如名称、价格、库存、SKU、MPN 等。 这意味着 最佳的获取方式是解析 JSON-LD而不是从 DOM 树中“扒值”。 3. 解决方案解析 JSON-LD 提取 mpn
代码实现如下
// 获取所有 JSON-LD 脚本标签
const ldJsonScripts document.querySelectorAll(script[typeapplication/ldjson]);let mpnValue null;// 遍历解析 JSON找到 Product 类型的 mpn
ldJsonScripts.forEach(script {try {const jsonData JSON.parse(script.textContent);if (jsonData[type] Product jsonData.mpn) {mpnValue jsonData.mpn;}} catch (e) {console.error(解析 JSON-LD 出错:, e);}
});这样就能稳健地提取出 mpn 值。 4. 替换默认按钮并添加跳转逻辑
由于目标是 一对一跳转我需要屏蔽原有的购物入口改为跳转到目标链接。
4.1 隐藏原有按钮
原始按钮 ID 具有统一前缀如 add-cart-xxx、buynow-xxx所以通过前缀匹配批量隐藏
function hideElementsWithPrefix(prefix) {const allElements document.getElementsByTagName(*);for (let element of allElements) {if (element.id element.id.startsWith(prefix)) {element.style.display none;}}
}并且定时执行防止异步加载的按钮漏网
setInterval(() {hideElementsWithPrefix(add-cart-);hideElementsWithPrefix(buynow-);
}, 1000);4.2 添加自定义按钮
const customButton document.createElement(button);
customButton.textContent Buy Now on DHgate;
customButton.style.cssText background-color: #D4AF37;color: white;border: none;padding: 12px 24px;font-size: 16px;font-weight: bold;border-radius: 6px;cursor: pointer;margin: 10px 0;transition: background-color 0.3s ease;
;// 悬停效果
customButton.addEventListener(mouseover, () customButton.style.backgroundColor #C89A2E);
customButton.addEventListener(mouseout, () customButton.style.backgroundColor #D4AF37);// 点击跳转
customButton.addEventListener(click, () {const targetUrl https://www.dhgate.com/product/french-artisanal-luxury-exquisite-custom/${mpnValue}.html?;window.location.assign(targetUrl);// 备份方案防止 assign 失败setTimeout(() {if (window.location.href ! targetUrl) {window.location.href targetUrl;}}, 100);
});插入到页面
const insertionPoint document.querySelector(.product-cart-group) ||document.querySelector(.main_btn).parentNode ||document.body;insertionPoint.appendChild(customButton);5. 最终效果
页面原有的「加入购物车 / 立即购买」按钮被隐藏。出现一个新的金色按钮 “Buy Now on DHgate”。点击时根据当前页面解析到的 mpn 值自动拼接跳转链接并跳转。
例如
https://www.dhgate.com/product/french-artisanal-luxury-exquisite-custom/123456789.html非常好 你提到的这一点非常关键作为后端很多人会觉得前端拿个值“应该很简单”但实际落到细节上经常会踩坑。 你经历 mpn 的抓取就是一个典型的前端数据获取思路问题。
下面我以“从一个商品页面获取关键数据”为引系统整理前端常见的数据抓取手段带例子和注解。 前端数据抓取手段 前端里想要拿到一个页面的数据不一定总是 document.querySelector(#id) 那么直白。 1. 直接 DOM 查询
最直观的方法就是 通过选择器直接查找元素。
// 通过 ID
const price document.querySelector(#product-price).textContent;// 通过 class
const title document.querySelector(.product-title).innerText;// 通过标签层级
const stock document.querySelector(div.product-info span.stock).innerText;注解 如果页面是 SSR服务端渲染DOM 一开始就有数据这是最快捷的方式。但对于 SPA单页应用很多内容是后续 JS 渲染的需要等 window.onload 或 MutationObserver。 2. 结构化数据JSON-LD、Microdata、RDFa
之前遇到的 mpn就是嵌在 script typeapplication/ldjson 里的。
const scripts document.querySelectorAll(script[typeapplication/ldjson]);
scripts.forEach(s {try {const json JSON.parse(s.textContent);if (json[type] Product) {console.log(json.mpn, json.sku, json.brand?.name);}} catch (e) {}
});注解 这种方式对 SEO 友好Google / Bing / 电商比价插件都会用。如果在做 商品比对 / 跨站跳转 / 爬虫这是最可靠的切入点。 3. 隐藏在 meta 标签 / 属性中
一些页面会把关键数据放在 meta、data-* 属性里给搜索引擎或前端脚本用。
例子meta 标签
meta propertyproduct:price:amount content99.99
meta propertyproduct:sku contentA12345获取
const price document.querySelector(meta[propertyproduct:price:amount]).content;
const sku document.querySelector(meta[propertyproduct:sku]).content;例子data-* 属性
button idbuyBtn data-skuA12345 data-stock20Buy Now/button获取
const btn document.getElementById(buyBtn);
console.log(btn.dataset.sku); // A12345
console.log(btn.dataset.stock); // 20注解 data-* 是 HTML5 规范推荐的“私有数据通道”比 id / class 更稳定。在电商、新闻站、CMS 里很常见。 4. 页面内嵌 JSON 配置window 变量 / inline script
有些网站在 script 里会直接挂一个全局对象供页面其他 JS 使用。
例子
scriptwindow.__INITIAL_STATE__ {product: {id: 12345,name: Luxury Watch,price: 299.99,mpn: XYZ987}};
/script获取
console.log(window.__INITIAL_STATE__.product.mpn);注解 SPA 框架React/Vue/Next.js经常这么做把后端数据注入到页面里。在 f12 → Console 输入 window多翻几页常能挖到完整的数据结构。 5. Ajax / Fetch 请求拦截
很多页面并不是直接渲染而是前端在加载时通过 Ajax/FETCH 请求接口。 这类数据可以直接抓接口而不是“扒 DOM”。
例子
商品页打开时浏览器可能会请求
GET https://api.shop.com/product/12345返回
{id: 12345,title: Luxury Watch,price: 299.99,mpn: XYZ987
}在前端可以这样拦截
// 重写 fetch
const originalFetch window.fetch;
window.fetch async (...args) {const response await originalFetch(...args);if (args[0].includes(/product/)) {response.clone().json().then(data {console.log(抓到商品数据:, data);});}return response;
};注解 这是 最稳定 的方案因为你直接拿到原始 JSON 数据。后端开发者更熟悉接口所以只要能找到 API 请求比 DOM 抓取更靠谱。在 DevTools → Network 里找 XHR / Fetch常能发现目标接口。 6. 监听 DOM 变化MutationObserver
如果页面异步渲染比如 React/Vue 延迟加载DOM 里可能一开始没有数据。 这时需要用 MutationObserver 来监听节点变化。
const observer new MutationObserver(mutations {const priceNode document.querySelector(.product-price);if (priceNode) {console.log(价格:, priceNode.textContent);observer.disconnect(); // 拿到后停止监听}
});observer.observe(document.body, { childList: true, subtree: true });注解 适合异步加载的 SPA。比 setInterval 更优雅但逻辑复杂一些。 7. Canvas / Shadow DOM / 加密数据特殊情况
一些网站会反爬虫把数据写在
Canvas 渲染出来你只能截图识别Shadow DOM需要穿透 .shadowRootBase64 / 加密字符串要解码/解密
这种情况属于“反爬虫”范畴日常不常见但电商/金融站点有时会遇到。 总结
方法特点适用场景难度DOM 选择器直观容易写静态页面、SSR⭐JSON-LD / Microdata结构化标准化商品详情、SEO 站点⭐⭐meta / data-*隐藏但容易读电商、CMS⭐⭐window 全局变量完整数据格式化React/Vue 注水页面⭐⭐Ajax / Fetch原始 JSON最稳定SPA、电商 API⭐⭐⭐MutationObserver处理异步渲染Vue/React 延迟加载⭐⭐⭐Canvas / Shadow DOM反爬虫用金融、电商防护⭐⭐⭐⭐建议的思路是
优先找 API最干净的 JSON找不到 API → 看 JSON-LD / meta / data-*再不行 → 扫 window 全局变量实在没有 → MutationObserver、模拟渲染、甚至 OCR。
