使用Greasemonkey修改HTML的data-bind值，避免页面事件丢失

嘿，我太懂你遇到的糟心事了！直接替换document.body.innerHTML确实会把Knockout已经绑定好的事件和数据上下文全搞乱，这就是为啥页面会出现内容空、交互失效的情况。下面给你一个精准又安全的解决方案：

核心思路 #

别粗暴替换整个页面HTML，而是走精准定位目标元素→修改它的data-bind属性→让Knockout重新解析绑定的路子，这样既不会破坏其他元素的绑定，也能让新的价格显示逻辑正常生效。

具体实现代码 #

// 1. 定义汇率（你可以改成实时获取逻辑，比如调用汇率API）
const current_exchange_rate = 1.25; // 示例：1 GBP = 1.25 USD

// 2. 精准找到带有目标data-bind的元素
const priceElements = document.querySelectorAll('[data-bind="text: \'Price: \' + db.totalpr().toFixed(2) + \' GBP\'"]');

// 3. 逐个处理目标元素
priceElements.forEach(el => {
    // 构造新的data-bind内容，保留toFixed(2)避免小数位数混乱
    const newDataBind = `text: 'Price: ' + (db.totalpr().toFixed(2)*${current_exchange_rate}).toFixed(2) + ' USD'`;
    
    // 更新元素的data-bind属性
    el.setAttribute('data-bind', newDataBind);
    
    // 4. 让Knockout重新解析这个元素的绑定
    if (typeof ko !== 'undefined') {
        ko.cleanNode(el); // 先清理旧的绑定上下文
        ko.applyBindingsToNode(el, ko.parseBindingsString(newDataBind));
    }
});

关键注意事项 #

• 时机要选对：确保脚本在Knockout加载完成后运行，你可以在Greasemonkey脚本开头加@run-at document-idle，或者写个简单的等待逻辑确认ko对象存在。
• 动态元素适配：如果目标价格元素是页面加载后才生成的，得用MutationObserver监听DOM变化，等目标元素出现时再执行修改逻辑。
• 实时汇率获取：要是需要实时汇率，用fetch请求公开的汇率API就行，拿到数值后再执行替换操作。

为啥之前的方法不行？ #

直接替换document.body.innerHTML会把页面上所有已经被Knockout初始化的元素全重新创建一遍，原来的绑定函数、事件监听和数据上下文都会被彻底清除，自然就会出现内容空、交互失效的问题。而我们的方法只针对目标元素做最小修改，完全不会影响其他部分的功能。

内容的提问来源于stack exchange，提问作者Mr D