Question

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

这里是一个示例：

我使用以下代码将内容附加到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

好的，我知道了！！！任何面对此类问题的人请阅读此书点击 SKIP ADS 按钮时， .append（）函数会添加重复元素，例如iframe，DIV或其他任何iframe。

我的旧代码仅检查#mainContainer是否存在，然后将其删除并开始玩游戏，过程如下：

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

因此，我尝试添加主游戏iframe ID （这会导致重复问题），并且在 AD SKIPPED 时，iframe将被删除如下：

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

现在，它可以完全按需正常工作。

谢谢。

使用append（）函数时内容重复

1 个答案: