在IE8及以下版本中使用createElement为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，但它并没有包括任何解决方案，可以在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);
}

- Coulrophobiac

Answer 1

好的，所以我不得不微调我的脚本，以匹配 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会在所有内容周围添加一个烦人的蓝色边框。好的，一切都会按照我的计划进行吗？当然不会 =) IE8（也许还有其他版本）无法将任何子元素附加到我最初使用document.write创建的div中，因为DOM在该状态下尚未完全加载。这可以通过将整个（几乎）内容包装在以下代码中来解决：

onload = function(){}

我已经通过DFP尝试过它，至少在IE7及以上版本中可以正常工作。其他好的浏览器会通过常规appendChild添加其回退，就像原始问题中所述，我只是将其移动到if语句内部，因为如果是IE，它将变得过时。

- Coulrophobiac