Adobe Edge HTML5 本地连接

Question

我正在尝试使用 adobeEdge 创建两个横幅并在第三个文件中使用 iframe 导入它们。所以结构应该是这样的：

banner1.html

banner2.html

index.html（其中 banner1 和 banner2 将通过 iframe 嵌入）。

这两个横幅将是动画的，但是文件大小、每个横幅的加载时间可能会有所不同，因此它们不会同时加载。

问题是我需要它们都在完全相同的时间开始播放（在称为本地连接的 flash 中），所以我的想法是检查两个 iframe 何时加载以及它们是否都发送 DONE 消息到另一个我会玩。

我写了一个实际有效的代码，但仍然有一个横幅总是有延迟。这是我的代码：

横幅 1

 <script type="text/javascript">
    var fr = window.parent.frames["frame2"];
    var frwin = fr.contentWindow;
    var otherLoaded = false;
    var selfLoaded = false;
    var process = setInterval(function(){load();},10);

    window.addEventListener("message", receiveMessage, false);

    function setLoaded(){
        selfLoaded = true;
        frwin.postMessage("Done", "DOMAIN");
    }

    function load(){
        if(otherLoaded === true && selfLoaded === true){
            clearInterval(process);

            AdobeEdge.bootstrapCallback(function(compId) {
                AdobeEdge.getComposition(compId).getStage().play();
            });

        }else if(selfLoaded === true && otherLoaded !== true){
            frwin.postMessage("resend", "http://izorgor.com");

        }
    }

    function receiveMessage(event) {
        if (event.origin !== "DOMAIN")
            return;

        if(event.data === 'Done'){
            otherLoaded = true;
            console.log("Done");
        }
        if(event.data === 'resend'){
            fr = window.parent.frames["frame2"];
            frwin = fr.contentWindow;
            frwin.postMessage("Done", "DOMAIN");
            console.log("resend");
        }
    }
</script>

横幅 2

<script type="text/javascript">
    var fr = window.parent.frames["frame1"];
    var frwin = fr.contentWindow;
    var otherLoaded = false;
    var selfLoaded = false;
    var process = setInterval(function(){load();},10);

    window.addEventListener("message", receiveMessage, false);

    function setLoaded(){
        selfLoaded = true;
        frwin.postMessage("Done", "DOMAIN");
    }

    function load(){
        if(otherLoaded === true && selfLoaded === true){
            clearInterval(process);

            AdobeEdge.bootstrapCallback(function(compId) {
                AdobeEdge.getComposition(compId).getStage().play();
            });
        }else if(selfLoaded === true && otherLoaded !== true){
            frwin.postMessage("resend", "http://izorgor.com");

        }
    }

    function receiveMessage(event) {
        if (event.origin !== "DOMAIN")
            return;

        if(event.data === 'Done'){
            otherLoaded = true;
            console.log("Done");
        }
        if(event.data === 'resend'){
            fr = window.parent.frames["frame1"];
            frwin = fr.contentWindow;
            frwin.postMessage("Done", "DOMAIN");
            console.log("resend");
        }
    }
</script>

index.html

<iframe width="900" height="200" id="frame1" src="banner1.html" frameborder="0" scrolling="no"></iframe>

谢谢

Answer 1

我认为您应该联系您的 AdServer，询问他们是只在一个 TAG 中还是在两个 TAG 中投放广告

您可以将库用作 https://github.com/jeremyharris/LocalConnection.js/tree/master （类似于 Flash 本地连接）

Answer 2

您可以使用我开发的 JavaScript 库在 window 中的所有 iframe 之间简单地进行通信。得到Documentation or Fork on GitHub。它使用 nativ DOM 将 iframe 相互连接起来。

示例用法：将第一个 LocalConnection 脚本包含到所有横幅中。在此示例代码中，我们假设有 2 个横幅需要相互通信。但它也适用于任意数量的横幅。

在第一个横幅中：

<script>
        LC.key = 'uniqueConnectionString';
         LC.name = 'right';  // desc: my name is right and
        LC.frames = 'left'; // I want to connect to the banner called left
        LC.onConnect = function () {
            console.log('Do this as soon as connection established!');
            /*
             From this point window of left and top will be available as
             LC.left and LC.top
             for example :
             */
            LC.left.document.getElementsByTagName('body')[0].style.backgroundColor = 'pink';
        };

    </script>

在第二个横幅上放置相同的代码，但像这样更改名称和框架值：

<script>
        LC.key = 'uniqueConnectionString'; 
        LC.name = 'left';  // desc: my name is left and
        LC.frames = 'right'; // I want to connect to the banner called right
        LC.onConnect = function () {
            console.log('Do this as soon as connection established!');
            /*
             From this point window of left and top will be available as
             LC.left and LC.top
             for example :
             */
            LC.left.document.getElementsByTagName('body')[0].style.backgroundColor = 'pink';
        };
        LC.connect();
    </script>

Adobe Edge HTML5 本地连接

Adobe Edge HTML5 Local Connection

html

javascript

iframe

adobe-edge