Twitter的分享按钮（小部件）不工作在Firefox的jQuery的淡出功能

本文介绍了Twitter的分享按钮（小部件）不工作在Firefox的jQuery的淡出功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的是Firefox 50.1.0，当我添加淡出或淡入淡出的jQuery功能的Twitter分享按钮不显示。 iframe正在加载，但按钮不显示。该按钮在除FIREFOX以外的所有浏览器都能正常工作。
这是我的小提琴

 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8> 
< meta http-equiv =x-ua-compatiblecontent =ie = edge> 
< meta name =viewportcontent =width = device-width，initial-scale = 1，user-scalable = no> 
 
< / head> 
< body> 
< div class =containerid =form-puzzle> 
 
 
< div class =col-md-12 text-align> 
< button class =btn btn-success btn-md btn-margintype =submitid =btn-submit>提交< / button> 
< / div> 
< / div> 
< div class =containerid =message-id> 
< div class =row> 
< div class =col-md-12 text-center message-color> 
< h1>恭喜!!!!! ....< / h1> 
< / div> 
< div class =col-md-12 text-alignstyle =display：block！important;> 
< div class =gap>< / div> 
 
  data-show- < i class =btn-icon>< / i>< / a>< script async src =// platform.twitter.com/widgets.jscharset = UTF-8 >< /脚本> 
< / div> 
< / div> 
< / div> 
< script src ='http：//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>< / script> 
 
< script> 
 $（document）.ready（function（）{
 $（'＃message-id'）。hide（）; 
 $（'＃btn-submit'）。click （）
 $（'＃message-id'）。fadeIn（2000）; 
 $（'＃form-puzzle'）。fadeOut（2000）; 
}）; 
}）; 
< / script> 
< / body> 
< / html>

解决方案

身体。您需要正确使用jQuery，Bootstrap css和Bootstrap js。这可以通过点击获取小部件脚本，然后使用小部件代码扫描dom的div来执行解决与Firefox的异步问题。

 <！DOCTYPE html>< html>< head> < meta charset =utf-8> < meta http-equiv =x-ua-compatiblecontent =ie = edge> < meta name =viewportcontent =width = device-width，initial-scale = 1，user-scalable = no>代码集成关闭< script src =https://code.jquery.com/jquery-3.1.1.min.jsintegrity =sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8 =crossorigin =anonymous>< / script> <！ - 最新的编译和缩小的CSS  - > < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous > <！ - 最新的编译和缩小的JavaScript  - > < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.jsintegrity =sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =anonymous>< / script> <标题>家庭和LT; /标题>< /头><身体GT; < div class =containerid =form-puzzle> < div class =col-md-12 text-align> < button class =btn btn-success btn-md btn-margintype =submitid =btn-submit>提交< / button> < / DIV> < / DIV> < div class =containerid =message-id> < div class =row> < div class =col-md-12 text-center message-color> < h1>恭喜!!!!! ....< / h1> < / DIV> < div class =col-md-12 text-alignstyle =display：block！important;> < div class =gap>< / div> < a href =https://twitter.com/shareclass =twitter-share-buttondata-show-count =false> Tweet< / a> < / DIV> < / DIV> < / DIV> <脚本> $（document）.ready（function（）{$（'＃message-id'）。hide（）; $（'＃btn-submit'）。click（function（）{$ .getScript（https：// （function）（）{$（'＃message-id'）。show（function（）{$（'＃form-puzzle'）。fadeOut（2000）; twttr .widgets.load（＃message-id））;}）;}）}）;}）; < / script>< / body>< / html>

I'm using firefox 50.1.0 when I add fadeout or fadein jquery functions the twitter share button doesn't show up. The iframe is getting loaded but the button is not showing up. The button works fine in all browsers except FIREFOX. This my fiddle https://jsfiddle.net/trvh8r12/

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

</head>
<body>
    <div class="container" id="form-puzzle">


        <div class="col-md-12 text-align">
                <button class="btn btn-success btn-md btn-margin" type="submit" id="btn-submit">Submit</button>
        </div>
    </div>
    <div class="container" id="message-id">
            <div class="row">
                    <div class="col-md-12 text-center message-color">
                            <h1>Congrats !!!!!....</h1>
                    </div>
                    <div class="col-md-12 text-align" style="display:block !important;">
                                <div class="gap"></div>

                        <a href="https://twitter.com/share" class="twitter-share-button btn-icon" data-text=" "
                     data-show-count="false"><i class="btn-icon"></i></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
                 </div>
            </div>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script>
            $(document).ready(function(){
                    $('#message-id').hide();
                    $('#btn-submit').click(function(){
                            $('#message-id').fadeIn(2000);
                            $('#form-puzzle').fadeOut(2000);
                    });
            });
    </script>
</body>
</html>

解决方案

Generally, Keep your script references in the Head not the body. You need to include jQuery, Bootstrap css and Bootstrap js correctly to use it. This works by getting the widget script on click and then scanning the dom for the div with the widget code to execute solving the async problem with Firefox.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> Code Integration Close
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>Home</title>
</head>

<body>
    <div class="container" id="form-puzzle">


        <div class="col-md-12 text-align">
            <button class="btn btn-success btn-md btn-margin" type="submit" id="btn-submit">Submit</button>
        </div>
    </div>
    <div class="container" id="message-id">
        <div class="row">
            <div class="col-md-12 text-center message-color">
                <h1>Congrats !!!!!....</h1>
            </div>
            <div class="col-md-12 text-align" style="display:block !important;">
                <div class="gap"></div>
                <a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#message-id').hide();
            $('#btn-submit').click(function() {
                $.getScript("https://platform.twitter.com/widgets.js")
                    .done(function() {
                        $('#message-id').show(function() {
                            $('#form-puzzle').fadeOut(2000);
                            twttr.widgets.load(
                                document.getElementById("#message-id")
                            );
                        });
                    })
            });
        });
    </script>

</body>

</html>

这篇关于Twitter的分享按钮（小部件）不工作在Firefox的jQuery的淡出功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！