如何将 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>

我遇到了问题，脚本在发布期间没有在 airpush 上呈现。你能告诉我为什么会这样吗？

Answer 1

您的问题是您直接使用 Mraid 相关功能，而无需等待 mraid 容器处于就绪状态。您需要等到 SDK/Container 完成将 MRAID 库初始化到 webview 中，否则将导致您的广告处于错误/损坏状态，因为大多数 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();