Tumblr独立域名博客自定义SVG点赞/转发按钮变色实现问询

问题根源 #

独立域名环境下，原代码直接本地切换按钮类名，但未监听Tumblr操作请求的完成状态，导致本地状态与服务器状态可能不一致；同时CSS选择器与JS添加的类名不匹配，无法正确渲染已点赞状态。

修复步骤及代码调整 #

1. 修正JavaScript逻辑 #

监听隐藏iframe的加载完成事件，确保Tumblr服务器处理完点赞/取消操作后再切换按钮状态；同时优化事件委托，确保点击SVG内部也能触发操作：

window.onload = function () {
  // 创建隐藏iframe
  const likeFrame = document.createElement('iframe');
  likeFrame.id = 'my-like-frame';
  likeFrame.style.display = 'none';
  document.body.appendChild(likeFrame);

  document.addEventListener('click', function (event) {
    // 找到点击元素所属的.my-like容器（兼容点击SVG的情况）
    const myLikeBtn = event.target.closest('.my-like');
    if (!myLikeBtn) return;

    const isLiked = myLikeBtn.classList.contains('my-liked');
    const command = isLiked ? 'unlike' : 'like';
    const reblogUrl = myLikeBtn.getAttribute('data-reblog');
    const postId = myLikeBtn.getAttribute('data-id');
    const oauthToken = reblogUrl.slice(-8);

    // 重置iframe加载事件，避免重复触发
    likeFrame.onload = null;
    // 发送点赞/取消请求到Tumblr
    likeFrame.src = `https://www.tumblr.com/${command}/${oauthToken}?id=${postId}`;

    // 请求完成后同步按钮状态
    likeFrame.onload = function() {
      myLikeBtn.classList.toggle('my-liked', !isLiked);
      myLikeBtn.classList.toggle('my-like', isLiked);
    };
  }, false);
};

2. 调整CSS选择器 #

确保样式能正确匹配JS添加的my-liked类，同时优化SVG路径的颜色控制：

/* like and reblog buttons */
.controls .my-like .like_button iframe {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:2;
    opacity:0;
}
.svg {
    cursor: pointer;
    height: 22px;
    width: 22px;
    opacity:1;
    padding:1px;
    overflow:visible;
    display:inline-block;
    vertical-align:top;
}
.controls a {
    position:relative;
    display:inline-block;
    overflow:visible;
    padding:5px 0px 10px 0px;
    margin:-38px 35px 0px 0px;
    height:22px;
    width:22px;
}
.controls .reblog {
    opacity:1;
    margin:-37px 5px 0px 0px;
}
.controls .reblog svg {
    height:22px;
    width:22px;
    margin-top:1px;
}
.controls .reblog path {
    fill: #000;
    transition: fill 0.2s ease;
}
.controls .reblog:hover path {
    fill: #ec5a5a;
}
/* 点赞按钮默认样式 */
.controls .my-like .svg path {
    fill: #000;
    transition: fill 0.2s ease;
    cursor: pointer;
}
/* 点赞后样式 */
.controls .my-liked .svg path {
    fill: #ec5a5a;
}
/* 点赞按钮hover样式 */
.controls .my-like:hover .svg path {
    fill: #ec5a5a;
}
.controls .my-like {
    cursor: pointer;
    background-image: url() !important;
    margin:-38px 35px 0px 0px;
    height:22px;
    width:22px;
    display:inline-block;
    vertical-align:top;
}

3. HTML代码无需修改 #

保留原有的按钮结构即可，确保data-reblog和data-id属性正确获取Tumblr模板变量值。

修复说明 #

• 通过监听iframe加载完成事件，保证本地状态与Tumblr服务器状态同步，解决跨域环境下的状态不一致问题；
• 使用closest()方法兼容点击SVG内部的场景，避免事件触发失效；
• 调整CSS选择器直接控制SVG路径的颜色，确保样式正确应用；
• 添加过渡动画提升交互体验。

内容的提问来源于stack exchange，提问作者online-user