如何在Product1页面让用户添加Product2链接为书签，解决旧API兼容问题

问题说明 #

你所使用的window.sidebar.addPanel（火狐旧版专属接口）和window.external.AddFavorite（IE旧版专属接口）均已被所有主流浏览器废弃，这就是你收到Uncaught TypeError: window.sidebar.addPanel is not a function报错的核心原因。
现代浏览器出于安全限制，已经完全禁止网页通过JS主动触发添加书签的操作，没有可兼容全浏览器的原生调用接口。

兼容主流浏览器的落地解决方案 #

当前行业通用的实现逻辑是：优先适配仍有相关原生支持的小众浏览器，其余场景直接弹出引导提示，告知用户手动操作添加书签，你的PHP后端无需做额外适配，直接在前端页面嵌入如下代码即可：

<head>
  <script type="text/javascript">
    function addToBookmark(url, title) {
      // 适配极少数仍支持相关接口的浏览器
      if (window.sidebar && window.sidebar.addPanel) {
        window.sidebar.addPanel(title, url, '');
        return true;
      } else if (window.external && ('AddFavorite' in window.external)) {
        window.external.AddFavorite(url, title);
        return true;
      } else if (window.opera && window.print) {
        // 旧版欧朋浏览器支持
        const bookmarkLink = document.createElement('a');
        bookmarkLink.setAttribute('href', url);
        bookmarkLink.setAttribute('title', title);
        bookmarkLink.setAttribute('rel', 'sidebar');
        bookmarkLink.click();
        return true;
      } else {
        // 其余主流浏览器（Chrome、Edge、Safari、新版火狐等）弹出引导提示
        alert('添加书签失败，请手动操作：\nWindows/Linux系统按 Ctrl + D \nMac系统按 Command + D \n或点击浏览器地址栏的星形图标完成添加');
        return false;
      }
    }
  </script>
</head>
<body>
  <!-- 按钮点击时传入你要添加的Product2的链接和标题即可 -->
  <button onclick="addToBookmark('https://你的Product2链接', '要显示的书签标题');">添加Product2到书签</button>
</body>

注意事项 #

• 所有宣传可以实现“全浏览器自动点击添加书签”的方案均不符合现代浏览器安全规范，无法落地
• 引导文案可以根据你的产品需求自行修改，也可以替换成自定义弹窗UI替代系统alert提示，逻辑完全一致

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