使用append()函数时内容重复

Question

我曾经使用javascript和jQuery将内容附加到页面上，它在Chrome上运行得很好，但在火狐上尝试时，它会复制附加的内容。

下面是一个示例：

​

我使用以下代码将内容附加到div：

function PlayGames() {
    $(".gameActions, #flash-game").show();
    $(".TheGame").show().append("<object id='flash-game' type='application/x-shockwave-flash' height='100%' width='100%' frameborder='0' scrolling='no' data='URL'>");
        }

我不知道为什么这种情况只发生在Firefox和IE中。下面是完整的javascript代码：

<script src="js/jquery-1.11.3.js"></script>
        <script>        
        jQuery.noConflict();
        jQuery( document ).ready(function($) {
          $("TheGame").hide();
        });
        window.onload = function(){
         var mainDiv = $( "games" );
        }

        var isShowAd = '1';

        setTimeout(function () {
            if (typeof(Noads) === 'undefined') {
                $(".AdBlock").hide();
            }
        });

        function PlayBtn() {
            $.ajax({
                type: 'GET',
                url: 'TheURL',
            });
            $(".TheGameInfo").hide();
            if (!isShowAd) {
                PlayGames();
            } else {
                if (typeof (Noads) === 'undefined') {
                    $(".TheGameInfo,.AdBlock").show();
                } else {
                    StartPlayAds();
                }
            }
        }

        function StartPlayAds() {
            var SizeWindow =$('.TheGame');
            var Height = $(SizeWindow).innerHeight();
            var Width = $(SizeWindow).innerWidth();
            $(SizeWindow).append("<div id='mainContainer'><div id='ContentElementBox'><video id='contentElement'></video></div><div id='adContainer'></div></div>").trigger('create');
            try {
                var googleAds = new GoogleAds(
                    document.getElementById('adContainer'),
                    document.getElementById('contentElement'),
                    Width, Height,
                    function (action) {
                        if (action === GoogleAds.CallbackAction.CONTENT_PLAY) {
                            $("#mainContainer").remove();
                            PlayGames();
                        }
                    });
                googleAds.playAds();
            } catch (e) {
                $("#mainContainer").remove();
                PlayGames();
            }
        }

        function PlayGames() {
            $(".gameActions, #flash-game").show();
            $(".TheGame").show().append("<object id='flash-game' type='application/x-shockwave-flash' height='100%' width='100%' frameborder='0' scrolling='no' data='URL'>");
        }

        function RefreshGame() {
            $("#flash-game").remove();
            StartPlayAds();
        }
        });
</script>

Answer 1

好了，我想通了！遇到这样的问题的人请阅读这篇文章。当跳过广告按钮单击.append()函数时，会附加一个重复的元素，比如iframe、DIV或在我的例子中是iframe。

我的旧代码只是检查#mainContainer是否存在，然后删除它并开始玩游戏，步骤如下：

function (action) {
 if (action === GoogleAds.CallbackAction.CONTENT_PLAY) {
    $("#mainContainer").remove();
    PlayGames();
 }

因此，我尝试包含主游戏iframe ID (这会导致重复问题)，它工作得很好，当AD跳过时，iframe将被移除，如下所示：

function (action) {
 if (action === GoogleAds.CallbackAction.CONTENT_PLAY) {
    $("#mainContainer, #flash-game").remove();
    PlayGames();
 }

现在，它完全按照需要工作。

谢谢。