使用原生JS设置data属性如何能被jQuery正常识别读取？

jQuery的.data()方法有内置缓存机制：第一次读取对应data-*属性时，会把值永久缓存到jQuery内部私有数据对象中，后续不会再主动同步DOM上data-*属性的变更。你用原生setAttribute、修改dataset都是直接操作DOM属性，不会触发jQuery缓存更新，因此后续.data()读取的永远是第一次缓存的旧值。

因为属性设置逻辑运行在无jQuery的iframe中，可直接操作DOM元素上jQuery挂载的缓存对象实现同步，代码如下：

// 获取父窗口目标元素
var iframeHolder = parent.document.getElementById('test');
var dataAttrName = 'data-test'; // DOM属性名
var jqueryDataKey = 'test'; // jQuery.data()使用的小驼峰键名
var newValue = 6;

// 第一步：更新DOM原生属性，保证原生API读取正常
iframeHolder.setAttribute(dataAttrName, newValue);

// 第二步：更新jQuery内部缓存，让$.data()可以读到最新值
for (var prop in iframeHolder) {
  // jQuery的缓存挂载属性名格式为jQuery+随机数字串
  if (prop.startsWith('jQuery')) {
    var jqueryCache = iframeHolder[prop];
    if (jqueryCache && jqueryCache.data) {
      jqueryCache.data[jqueryDataKey] = newValue;
      break;
    }
  }
}

该方案无需依赖jQuery，修改完成后，原生getAttribute、dataset和父窗口的$().data()都可以读取到最新的属性值。

如果可以调整父窗口的jQuery调用逻辑，可在每次读取data前先清除对应缓存，强制jQuery重新拉取DOM属性：

// 父窗口jQuery代码
console.log($iframe.removeData('test').data('test'));

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