Question

为了节省性能，我在用户将鼠标悬停在follow / like按钮上时添加社交链接。例如：

jQuery(document).ready(function(){

    jQuery('.trigger').bind('click mouseover', function(){

        jQuery(this).html('<script src="http://platform.twitter.com/widgets.js"></script><a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="medium"> Follow @twitter </a>');

        jQuery('.trigger').unbind('click mouseover');

    });

});

工作正常。事实上，你也应该这样做。

问题是在Firefox中使用隐身模式时会阻止社交链接，因此.html（）不会输出任何内容。

一些阻止社交链接的浏览器插件存在同样的问题。

无论如何，要知道.html()是否输出了代码，，如果不是，只需添加以下链接：

jQuery(this).html('<a href="">Follow</a>');

Answer 1

您需要自己加载脚本而不是这种方式，然后检查它是否成功：

jQuery(document).ready(function($) {

    $('.trigger').one('click mouseover', function(){

        // we add just the HTML manually
        $(this).html('<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="medium"> Follow @twitter </a>');
        // and the script with jQuery
        $.getScript("http://platform.twitter.com/widgets.js").fail(function(err) { 
            // react to errors here, for example set the .html
        }).done(function(success) { 
            // here we can be sure the script loaded.
        });
    });

});

请注意，一个特别聪明的广告拦截器可以拦截请求并返回空响应而不是404 - 但实际上没有人做。

我通常也不同意你的断言它们应该是延迟加载的 - 一般来说，只需将单词async添加到脚本中就可以了，并且它不会阻止页面加载并在以后加载：

<!--- NOTE THE 'async' ---> 
<script async src="http://platform.twitter.com/widgets.js"></script>
<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="medium"> Follow @twitter </a>

async - 设置此布尔属性以指示浏览器应尽可能异步执行脚本。它对内联脚本（即没有src属性的脚本）没有影响。

From MDN

作为一般代码审核，ready采用一个可用于简称jQuery的参数（通常为$），您应该使用标准.on支持弃用的{{1} }（和.bind取消绑定）。

更新，我已经意识到您使用.off（bind/unbind）对进行的操作基本上是on/off，它仅在第一次触发事件一次 - 所以我更改了它到那。

jQuery：确认.html（）是否可添加

1 个答案: