javascript - 使用 createElement 在 IE8 及更低版本中为 swf 添加后备图像？

Question

我正在创建一个脚本，该脚本应该创建嵌入式 SWF，并且如果用户没有可用的 Flash，还可以使用图像作为后备。由于我不允许使用任何其他库(如 SWFobject)，因此我只能使用 DOM 技术(如 createElement/appendChild/setAttribute)。

我一直在使用这篇很棒的博客文章:http://pipwerks.com/2011/05/30/using-the-object-element-to-dynamically-embed-flash-swfs-in-internet-explorer/作为指导，我已经在我测试过的所有浏览器中启动并运行了 Flash，但它不包含任何如何将链接/图像组合注入(inject)到 Internet Explorer 8 中的对象中的解决方案。

使用 createElement("a") 以及类似的图像并将其添加到任何其他 Div 元素都可以正常工作，但如果我尝试将其注入(inject)对象 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);
}

Answer 1

好吧，所以我必须调整我的脚本以匹配 pipwerks 博客文章中所述的最终结果。在检查 IE 时，我使用 insideHTML 声明了 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 会在所有内容周围添加烦人的蓝色边框。好吧，一切都会按我的计划进行吗？当然不是 =) IE8(也许还有其他版本)无法将任何子级附加到我最初使用 document.write 创建的 div，因为 DOM 在该状态下尚未完全加载。这可以通过将整个(几乎)事情包装在其中来解决:

onload = function(){}

我确实通过 DFP 广告管理系统进行了尝试，它至少可以在 IE7 及更高版本上运行。其他好人浏览器通过常规的appendChild添加他们的fallbakc，如原始问题中所述，我只是将它移动到if语句中，因为如果IE它会过时。