Google Plus文本分享按钮无法获取输入框内容问题咨询

你遇到的问题很典型——默认的Google+分享按钮组件不会自动读取输入框里的内容，它默认是分享当前页面的信息（比如URL、标题）。要实现点击按钮时自动发布输入框的文本，我们需要用JavaScript手动获取输入值，再调用Google+的分享接口来传递内容。

下面是修改后的完整代码，我会一步步解释关键改动：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Forms</title>
</head>
<body>
<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text" placeholder="输入要分享的内容">
  </div>
  <div>
    <!-- 换成普通按钮，我们自己绑定点击事件 -->
    <button type="button" id="googleShareBtn">分享到Google+</button>
  </div>
</form>

<script>
window.___gcfg = { lang: 'zh-CN', parsetags: 'onload' };

// 等待Google API加载完成后初始化分享逻辑
function initShare() {
  // 获取按钮和输入框元素
  const shareBtn = document.getElementById('googleShareBtn');
  const inputText = document.getElementById('example');

  shareBtn.addEventListener('click', function() {
    const shareContent = inputText.value.trim();
    if (!shareContent) {
      alert('请输入要分享的内容');
      return;
    }

    // 调用Google+分享接口，传入自定义文本
    gapi.plus.share.render('googleShareBtn', {
      'contenturl': window.location.href, // 可以留当前页面URL，或者替换成你想关联的链接
      'annotation': 'bubble',
      'calltoactionlabel': 'SHARE',
      'calltoactionurl': window.location.href,
      // 关键：这里传入输入框的文本作为分享内容
      'prefilltext': shareContent
    });
  });
}
</script>
<!-- 加载API时指定回调函数，确保API加载完成后再执行我们的代码 -->
<script src="https://apis.google.com/js/client:platform.js?onload=initShare" async defer></script>
</body>
</html>

关键改动说明： #

• 替换默认分享按钮：把原来的<g:plus>标签换成普通按钮，这样我们可以完全控制点击行为。
• 监听按钮点击事件：点击时先获取输入框的文本，做简单的非空校验，避免分享空内容。
• 调用Google+分享API：使用gapi.plus.share.render方法，通过prefilltext参数传入输入框的文本，这样分享弹窗里就会自动填充你输入的内容。
• 确保API加载完成：在加载API的script标签里加上?onload=initShare，这样Google的API加载完成后会自动调用我们的initShare函数，避免出现API未加载就调用的错误。

另外要注意：Google+的分享API需要在支持的环境下运行，如果你是本地直接打开HTML文件（file://协议），可能会有跨域问题，建议用本地服务器（比如Python的http.server、XAMPP）来测试。

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