2016-04-22 4 views
0

OKですので、ここで設定します。小さな初期バナーのHTMLをより大きな拡張バナーにスワップする拡張可能なバナーがあります。 (このテストでは幅が160ピクセルから幅600ピクセルに拡大されています)また、エクスポートされたTumult Hype(HTML 5アニメーションプログラム)ファイルの特定のシーンに2番目のHTMLページがジャンプします。 "postToHype()"postMessage関数はwindow.onloadで動作しませんか?

は、文書の第二のシーンに開くようにそれを伝えるために、第2のHTML文書のHypeExampleにオフに渡すためのpostMessageを使用しています

機能

。理論的には、広告は2番目のHTMLドキュメントを展開して読み込むだけでなく、そのドキュメントの2番目のシーンにジャンプします。

これは私のために働いています。広告をマウスオーバーすると、 "postToHype()"関数がトリガされます。私も

「コンバイン()」

機能をトリガーボタンを使用してテストしたときにも動作します。 "コンバイン()" 関数は、関数

7秒の広告を開き、再びそれを閉じて "autoExpandの()"

をトリガします。

私が仕事に出られないものは、window.onloadを呼び出して "combine();"関数。 window.onloadが "combine()"を実行すると、 "autoExpand()"は機能しますが、 "postToHype()"は機能しません。なぜ私の "postToHype()"関数でボタンのクリックとonmouseoverの動作はしますが、 "window.onload"は機能しません。

リンクされた.jsライブラリなど、すべてのコードがここに表示されているわけではありませんが、最も関連性の高いビットを含めるようにしました。すべてのアイデアは大変ありがとうございます。このliteの

<head> 
<script type="text/javascript"> 
     var exampleHTMLToPage = ExpandableBanners.banner("exampleHTMLToPage", "HypeExample.html", 600, 600); 
     exampleHTMLToPage.setCloseImage("images/close.png", 'right', 'bottom'); 
     exampleHTMLToPage.animated = true; 
     exampleHTMLToPage.setDirection('down', 'right'); 
     animated = true; 
     exampleHTMLToPage.expandOnClick = false; 
if (document.addEventListener) { 
document.addEventListener("DOMContentLoaded",function(){documentReady=true; 
});} 
else if (!window.onload) window.onload = function(){documentReady=true;} 
</script> 

<script type="text/javascript"> 
function autoExpand() { 
setTimeout("ExpandableBanners.openAd('exampleHTMLToPage')",0000); 
setTimeout("ExpandableBanners.closeAd('exampleHTMLToPage')",7000); 
} 
</script> 

<script> function combine() { 
autoExpand(); 
postToHype(); 
} </script> 

<script> 
function postToHype(){ 
document.getElementById('exampleHTMLToPage_expanded_media').contentWindow.postMessage(['start', 'Scene2'], '*') 
} 
</script> 
</head> 

<body> 
    <div onmouseover="postToHype()" id="exampleHTMLToPage" style="width:150px; height:600px; background-color:rgb(30,167,221); position:relative; color:white; font-weight:bold"> 
    <div style="display:inline-block; 
    width:140px; font-size:22px; margin-top:20px; margin-left:5px; margin-right:5px;">This is an HTML banner RK V7. Click to see exported HYPE interactive that loaded inside.</div> 
    </div> 
<button onclick="combine();">Click me</button> 
</body> 

<script> 
window.onload = function(){ 
    combine(); 
};</script> 
+0

'postMessage'のターゲットコンテキストとは何ですか? 'iframe'要素ですか? – guest271314

+0

ジェットが読み込まれていない関数を呼び出すからです。 postToHype()の下にCombine()を書くようにしてください。 – Zorken17

+0

@ Zorken17 - あなたはそれを呼び出すことと定義するのを混乱させていると思います。 – Quentin

答えて

-1

変更を:

<script type="text/javascript"> 

function autoExpand() { 
    setTimeout("ExpandableBanners.openAd('exampleHTMLToPage')",0000); 
    setTimeout("ExpandableBanners.closeAd('exampleHTMLToPage')",7000); 
} 

function postToHype(){ 
    document.getElementById('exampleHTMLToPage_expanded_media').contentWindow.postMessage(['start', 'Scene2'], '*') 
} 

function combine() { 
    autoExpand(); 
    postToHype(); 
} 

</script> 

は、あなたはそれを呼び出している前に、関数postToHypeを()を定義する必要があります。そして、1つのスクリプトタグを使用して、その中にすべてのコードを書き込むほうがよいでしょう。

+1

存在する前に 'postToHype'を呼び出そうとする場所が見つかりません。それでコードがきれいになりますが、違いは見られません。 – Quentin

+0

window.onloadは、postToHype()を呼び出してcombine()を呼び出します。 postToHype()がロードされていない(定義されていない)場合は、未定義の値が返されます – Zorken17

+0

ウィンドウのロードイベントが発生する前にpostToHypeをロードしないのはなぜですか? postToHypeを定義するスクリプトが動的にロードされていません。 – Quentin