Как сделать сценарий mraid в airpush

Question

У меня есть вопрос, можете ли вы мне помочь? Я хочу опубликовать кампании со скриптом mraid в airpush, и я протестировал симулятор mraid ( http://webtester.mraid.org/), который отлично работает на этом скрипте. Мой скрипт:

         <div id="adContainer" style="margin:0px;padding:0px;background-color:white;">
        <div id="normal" style="display:none;margin:auto;position:relative;top:0px;left:0px;background-color:white;border-style:solid;border-width:1px;border-color:rgb(238,50,36);" onclick="javascript:resize();"><img id="smallbanner" style="position:relative!important;top:0px;left:0px;" src="http://winnowwin.com/ap/directory2422/21_banner.jpg" />
        <a href="">
        <div style="position:absolute;top:5px;right:5px;background-color:rgb(238,50,36);">
            <div style="width:20px;height:20px;display:table-cell;text-align:center;vertical-align:middle;font-family: Arial, Helvetica, sans-serif;">X</div>
        </div>
        </a>
        </div>
        <div id="resized" style="display:none;margin:auto;position:relative;top:0px;left:0px;background-color:white;border-style:solid;border-width:1px;border-color:rgb(238,50,36);">
        <a href="http://downloadactivity.com/main/click.php?id=qN2jYuhcjQKfEBnTa3SsCg&c2=812_xxx&c3=%dapp%&c4=%pubid%&c5=%carrier%&c6=%campaignid%&c7=%creativeid%&c8=%wifi%&c9=%idfa%" target="_blank"><img id="bigbanner" src="http://winnowwin.com/ap/directory2422/19_bg.png" /></a>
        <div style="position:absolute;top:5px;right:5px;background-color:rgb(238,50,36);">
        <div style="width:20px;height:20px;display:table-cell;text-align:center;vertical-align:middle;font-family: Arial, Helvetica, sans-serif;">X</div>
        </div>
        </div>
        </div>
        <script>
        function collapse() {
        mraid.close();
        }
        function showMyAd() {
        var el = document.getElementById("normal");
        el.style.display = "";
        mraid.addEventListener("stateChange", updateAd);
        }
        function resize() {
        mraid.setResizeProperties({
        "width": bw,
        "height": bh,
        "offsetX": 0,
        "offsetY": 0,
        "allowOffscreen": false
    });
    mraid.resize();
}
    function updateAd(state) {
    if (state == "resized") {
        toggleLayer("normal", "resized");
    } else if (state == "default") {
        toggleLayer("resized", "normal");
    }
}
    function toggleLayer(fromLayer, toLayer) {
    var fromElem = document.getElementById(fromLayer);
    fromElem.style.display = "none";
    var toElem = document.getElementById(toLayer);
    toElem.style.display = "";
}

    function doReadyCheck() {
    var currentPosition = mraid.getCurrentPosition();
    sw = currentPosition.width;
    sh = currentPosition.height;
    var adcon = document.getElementById("adContainer");
    adcon.style.width = sw + "px";
    var sb = document.getElementById("smallbanner");
    sb.height = sh;
    sb.width = sw;
    var nor = document.getElementById("normal");
    nor.style.width = parseInt(sw) - 2 + "px";
    nor.style.height = parseInt(sh) - 2 + "px";
    var maxSize = mraid.getMaxSize();
    bw = maxSize.width;
    bh = maxSize.height;
    var bb = document.getElementById("bigbanner");
    bb.height = bh;
    bb.width = bw;
    var e2 = document.getElementById("resized");
    e2.style.width = bw + "px";
    e2.style.height = bh + "px";
    showMyAd();
    }
    var bw = "";
    var bh = "";
    var sw = "";
    var sh = "";
    doReadyCheck();
    </script>

Я столкнулся с проблемой, во время публикации скрипт не рендерится на воздушной подушке. Можете ли вы сказать мне, почему это происходит?

Answer 1

Ваша проблема в том, что вы напрямую используете функциональность, связанную с Mraid, не дожидаясь, пока контейнер mraid будет в состоянии готовности Вам нужно подождать, пока SDK/Container завершит инициализацию библиотеки MRAID в веб-просмотре, без чего ваше объявление будет в плохом / поврежденном состоянии, потому что большинство методов, связанных с mraid, будут возвращать неверные данные или генерировать исключения.

Поэтому вам нужно сначала подождать, пока Mraid не будет в состоянии готовности, а затем добавить связанные с mraid слушатели или функции

Например

function doReadyCheck()
{
    if (mraid.getState() == 'loading')
    {

        mraid.addEventListener("ready", mraidIsReady);
    }
    else
    {
        mraidIsReady();
    }
}

function mraidIsReady()
{
    mraid.removeEventListener("ready", mraidIsReady);

    //NOTE: Here you shall do rest of the stuff which you are currently doing in doReadyCheck method

    var currentPosition = mraid.getCurrentPosition();
    sw = currentPosition.width;
    sh = currentPosition.height;
    var adcon = document.getElementById("adContainer");
    adcon.style.width = sw + "px";
    var sb = document.getElementById("smallbanner");
    sb.height = sh;
    sb.width = sw;
    var nor = document.getElementById("normal");
    nor.style.width = parseInt(sw) - 2 + "px";
    nor.style.height = parseInt(sh) - 2 + "px";
    var maxSize = mraid.getMaxSize();
    bw = maxSize.width;
    bh = maxSize.height;
    var bb = document.getElementById("bigbanner");
    bb.height = bh;
    bb.width = bw;
    var e2 = document.getElementById("resized");
    e2.style.width = bw + "px";
    e2.style.height = bh + "px";
    showMyAd();        
}
doReadyCheck();