3

埋め込み SWF を作成し、ユーザーが Flash を利用できない場合はイメージをフォールバックとして使用するスクリプトを作成しています。SWFobject などの他のライブラリを使用することは許可されていないため、createElement/appendChild/setAttribute などの DOM 手法を使用することになります。

私はこの素晴らしいブログ投稿を使用しています: http://pipwerks.com/2011/05/30/using-the-object-element-to-dynamically-embed-flash-swfs-in-internet-explorer/ガイドライン、およびテストしたすべてのブラウザーで Flash を実行していますが、Internet Explorer 8 のオブジェクトにリンク/画像コンボを挿入する方法についての解決策は含まれていません。

createElement("a") を使用して画像に同様に使用し、それを他の Div 要素に追加すると正常に動作しますが、それをオブジェクトに挿入しようとすると、MSIE8 は「無効な引数」をスローします。

また、ID を使用して偽のパラメーターを作成し、それをリンク/画像の組み合わせに置き換えようとしました。これは、テストした他のブラウザーでは機能しますが、IE8 では機能しません。これについての考えは大歓迎です。

これは私のコードです (スクリプトを作成するために js と PHP の組み合わせを使用しています):

var alink = document.createElement("a");
alink.setAttribute("href", "URL_TO_TARGET_SITE_OR_CLICK_COUNTER");

var alinkImage = document.createElement("img");
alinkImage.setAttribute("src", "URL_TO_IMAGE");
alinkImage.setAttribute("alt", "");
alinkImage.setAttribute("width", "IMAGE_WIDTH");
alinkImage.setAttribute("height", "IMAGE_HEIGHT");

alink.appendChild(alinkImage);

if(!IE8) {
    flashObject.appendChild(alink);
    document.getElementById('ad_filler_placeholder').appendChild(flashObject);
} else {
    /* this code will be executed if IE8 or lower, sadly appending alink into flashobject fails */
    flashObject.appendChild(alink);
    document.getElementById('ad_filler_placeholder').appendChild(flashObject);
}
4

1 に答える 1

0

わかりましたので、pipwerks のブログ投稿に記載されているように、最終結果に一致するようにスクリプトを少し調整する必要がありました。IE のチェック中に、次のように innerHTML で flashObject を宣言しました。

var fallback=false;

flashObject = (isIE) ? createIeObject() : document.createElement("object");

if(!isIE) {
   flashObject.setAttribute("type", "application/x-shockwave-flash");
   flashObject.setAttribute("data", "URL_TO_SWF");
   fallback = true;
}

createIeObject 関数はこれを行います。

function createIeObject(){
   var div = document.createElement("div");
   div.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'><param name='movie' value='URL_TO_SWF'><a href='URL_FOR_CLICK'><img src='URL_TO_FALLBACK_IMAGE' alt='' width='WIDTH' height='HEIGHT' border='0' /></a></object>";
   return div.firstChild;
}

このセグメント内にフォールバックを追加したことに注意してください。また、画像の幅、高さ、境界線も使用する必要がありました。そうしないと、IE がすべての周りに迷惑な青い境界線を追加してしまいます。OK、計画どおりにすべてうまくいくでしょうか..? もちろん、そうではありません =) IE8 (おそらく他のバージョンも) は、最初に document.write を使用して作成した div に子を追加できません。これは、DOM がその状態で完全にロードされていないためです。これは、(ほぼ) 全体を次のようにラップすることで解決できます。

onload = function(){}

DFP で試してみましたが、少なくとも IE7 以降で動作します。他の善良なブラウザーは、元の質問で述べたように、通常の appendChild を介してフォールバックを追加します。IE の場合は廃止されるため、if ステートメント内に移動しました。

于 2012-10-23T13:50:52.343 に答える