未捕获的类型错误：对象 #<HTMLDivElement> 没有方法“addPanel”答案

【问题标题】：Uncaught TypeError: Object #<HTMLDivElement> has no method 'addPanel'未捕获的类型错误：对象 #<HTMLDivElement> 没有方法“addPanel”
【发布时间】：2013-07-19 13:40:28
【问题描述】：

我正在尝试实现一个几乎跨浏览器的书签功能，并在 SO： How do I add an "Add to Favorites" button or link on my website?

现在，我正在使用@PHPst 的答案..

<script type="text/javascript">
$(function() {
    $("#bookmarkme").click(function() {
        if (window.sidebar) { // Mozilla Firefox Bookmark
            window.sidebar.addPanel(location.href,document.title,"");
        } else if( /*@cc_on!@*/false) { // IE Favorite
            window.external.AddFavorite(location.href,document.title); 
        } else if(window.opera && window.print) { // Opera Hotlist
            this.title=document.title;
            return true;
        } else { // webkit - safari/chrome
            alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
        }
    });
});
</script>

它适用于普通网页.. 如下所示： http://jsfiddle.net/GXas4/

但是当我在 wordpress 模板中使用它时，在 chrome 中我得到一个像这样的 js 错误：

Uncaught TypeError: Object #<HTMLDivElement> has no method 'addPanel'

它不会在firefox的控制台上返回错误，但也不会做任何事情。

很多关于 SO 的帖子都有这样的问题（'Uncaught TypeError: Object # has no method'），但似乎没有什么能指出我正确的方向。

有人知道为什么会这样吗？

【问题讨论】：

标签： javascript jquery wordpress cross-browser

【解决方案1】：

您使用的 WordPress 主题可能有一个 id=sidebar 的元素。

除非显式定义了同名的全局变量，否则将为每个具有 id 的元素创建一个全局变量。

所以，第一个测试是不可靠的。例如，即使在 Chrome 中，在 stackoverflow 页面上评估 window.sidebar 也是正确的，因为该网站使用具有此类 id 的元素。

【讨论】：

是的，有一个#sidebar，那么您认为我可以如何规避这个问题？编辑：我会在 jsfiddle 上试试 ..
实际上，你是对的.. jsfiddle.net/hwZsa/1 但是，我如何编辑该代码以在带有#sidebar 的页面上工作？
将第一个测试改为(window.sidebar && ! (window.sidebar instanceof Node))
我如何获得window.sidebar.addPanel(location.href,document.title,"");线上的window.sidebar元素？
找到了！看看这个：stackoverflow.com/questions/107971/…For Firefox no need to set any JavaScript for the bookmark an page by script, only an anchor tag with title and rel="sidebar" can do this functionality这个工作..现在我会让firefox由它处理..让脚本处理所有其他的。非常感谢！

【解决方案2】：

你应该使用wp_enqueue_script (Documentation)

您的依赖项可能不会在该脚本之前被调用。如果您将脚本排入队列，则可以使用首先加载依赖项

wp_enqueue_script( $handle, $path to file, array( jquery ));`

由于我将 jQuery 放在数组中，它现在将在脚本之前加载 jQuery。

【讨论】：

该脚本所需的唯一依赖项是 jquery，并且在我执行该脚本之前它已经加载（默认在 wordpress 上）。我还调整了 wordpress 上的代码以使用 jQuery() 而不是$() 以避免冲突..
jquery 也已经在工作了.. 问题出在 jquery 调用的函数中.. 似乎 jquery 已经干预了远远高于代码的窗口对象，并在某处覆盖了窗口对象..跨度>

【解决方案3】：

addPanel 自 23 版以来已从 Firefox 中删除。但您可以改用标记：

<a href="http://stackoverflow.com" title="Stack Overflow" rel="sidebar">Bookmark me</a>

【讨论】：