Twitter URL分享JS在Firefox异常及自定义分享URL需求咨询

嘿，我来帮你搞定这两个头疼的问题！咱们一个一个来解决：

问题1：Firefox中锚点弹出空白页 #

你原来用javascript:tweetCurrentPage()作为a标签的href属性，Firefox对这种伪协议的处理逻辑和Chrome/Edge不一样，再加上原来的return false没正确阻止默认跳转行为，就导致了空白页的问题。

修复方案很简单：

• 把a标签的href改成#或者javascript:void(0)，避免触发默认跳转
• 在点击事件里明确调用preventDefault()阻止默认行为，确保弹窗正常打开

问题2：自定义分享URL而非当前页面 #

只需要把代码里的escape(window.location.href)替换成你想要分享的目标URL就行。另外，这里推荐用encodeURIComponent替代已经被废弃的escape，兼容性和安全性更好。

修改后的完整代码（两种写法可选） #

写法1：保留内联点击事件（适合快速修改）

var twitterUsuario = 'User'; 

function tweetCurrentPage(e) {
  // 阻止默认跳转，解决Firefox空白页问题
  if (e) e.preventDefault();
  
  // 这里替换成你要分享的自定义URL
  var customShareUrl = 'https://your-target-url.com';
  var tweetContent = document.getElementById('suNombre').innerHTML + ' tengo un mensaje muy importante para ti desde @' + twitterUsuario;
  
  // 用encodeURIComponent做编码，避免URL或文本出现乱码
  var twitterShareUrl = 'https://twitter.com/share?url=' + encodeURIComponent(customShareUrl) + '&text=' + encodeURIComponent(tweetContent);
  
  window.open(twitterShareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
  return false;
}

对应的HTML：

<a href="#" onclick="tweetCurrentPage(event)" target="_blank" alt="Tweet this"><span>Tweet</span></a>

写法2：分离HTML与JS（更规范，推荐）

这种写法把JS逻辑和HTML结构分开，更易维护：

HTML部分：

<a id="twitterShareBtn" href="#" target="_blank" alt="Tweet this"><span>Tweet</span></a>

JS部分：

var twitterUsuario = 'User'; 
var shareBtn = document.getElementById('twitterShareBtn');

// 绑定点击事件
shareBtn.addEventListener('click', function(e) {
  // 必须阻止默认跳转行为
  e.preventDefault();
  
  // 自定义分享URL，替换成你的目标链接
  var customShareUrl = 'https://your-target-url.com';
  var tweetContent = document.getElementById('suNombre').innerHTML + ' tengo un mensaje muy importante para ti desde @' + twitterUsuario;
  
  var twitterShareUrl = 'https://twitter.com/share?url=' + encodeURIComponent(customShareUrl) + '&text=' + encodeURIComponent(tweetContent);
  
  window.open(twitterShareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
});

为什么这些修改有效？ #

• Firefox兼容：e.preventDefault()直接阻止了a标签的默认跳转动作，Firefox不会再触发空白页跳转；把href设为#也能保证即使JS失效，页面也不会跳转到错误地址。
• 自定义URL：通过customShareUrl变量直接指定要分享的链接，替换掉原来的当前页面URL，同时用encodeURIComponent确保链接和文本在传递到Twitter时编码正确，避免乱码或参数丢失。

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