Adob​​e 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，詢問他們是否是在短短一個標籤或在兩個標籤

投放廣告

您可以使用庫，https://github.com/jeremyharris/LocalConnection.js/tree/master （類似於Flash本地連接）

Answer 2

您可以簡單地在窗口中的所有iframe與我開發的JavaScript庫之間進行通信。 獲取Documentation或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>