Adobe Edge HTML5 Локальное подключение

Question

Я пытаюсь создать два баннера с adobeEdge и импортировать их с iframe в 3-м файле. Таким образом, структура будет что-то вроде этого:

banner1.html

banner2.html

index.html (где banner1 и banner2 будет встраивать с помощью фрейма).

Эти два баннера будут анимированы, однако размер файла, время загрузки каждого из них может варьироваться, поэтому они не будут загружаться в одно и то же время.

Проблема в том, что мне нужно, чтобы они оба начали играть в одно и то же время (во флэш-памяти, называемой локальным подключением), поэтому идея состоит в том, чтобы проверить, когда загружаются оба фрейма, и если каждый из них отправляет сообщение 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 или в два TAGs

Вы можете использовать библиотеки, как https://github.com/jeremyharris/LocalConnection.js/tree/master (аналогично блеснуть Подключение по локальной сети)

Answer 2

Вы можете просто обмениваться данными между всеми вашими iframe в окне с помощью библиотеки JavaScript, которую я разработал. Получить Documentation или Fork on GitHub. Он использует nativ DOM для соединения iframes друг с другом.

Пример использования: включает в себя первый скрипт LocalConnection для всего вашего баннера. В этом примере кода мы предполагаем, что два баннера должны взаимодействовать друг с другом. Но он также работает с любым количеством баннеров.

в первом баннере:

<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>