在组件中需要给 <embed>一个数据返回的 src属性值，但是发现无论怎么赋值，在 IE8 下都不能使 embed 里的 swf 正常播放，
代码大致如下：
render() {
let { advert } = this.props;
if (advert.length > 0) {
advert = $.parseJSON(advert[0]);
}
return (
<div className={styles.container}>
<a href={advert.flashHref} className={styles.link} title={advert.title} />
{
/(png|jpg|gif)$/.test(advert.flashUrl)
? <img src={advert.flashUrl} width="350" height="110" />
: <embed src={advert.flashUrl} width="350" height="110" type="application/x-shockwave-flash" />
}
</div>
)
}
但是以下几种情况是正常的：
- 直接把 src 属性值写死；
- 直接创建一个对象，对象一个属性值是 swf 地址，src引这个属性值也可以成功。
后来发现如果对使用在 src 属性值下的变量做了 if判断，就会导致 <embed>播放失败，后来把代码改成：
render() {
if (!this.props.advert[0]) {return null};
let { advert } = this.props;
let flashUrl;
advert = $.parseJSON(advert[0]);
flashUrl = advert.flashUrl.replace('http://', 'https://');
return (
<div className={styles.container}>
<a href={advert.flashHref} className={styles.link} title={advert.title} target="_blank"> </a>
{
/(png|jpg|gif)$/.test(flashUrl)
? <img src={flashUrl} width="350" height="110" />
: <embed src={flashUrl} width="350" height="110" type="application/x-shockwave-flash" />
}
</div>
)
}
将对 advert[0]的判断放在顶部，使对 flashUrl的处理不会经过判断就能使 <embed>正常播放。
折腾了一个中午发现了这里面的问题。
关于这个 <embed>还有一件工作上的反思，事情是这样的：
在 HTTPS 中，如果引用了 http 的图片资源，浏览器会给警告，但不会限制图片的显示，但是对 swf 文件，如果地址是 http 的，swf文件会被禁止显示并报错。
因为数据是运营同事配的，我觉得只要让运营以后注意配双协议地址就好了，这种错误就不会发生，但是我并没有推动配数据的同事，告诉他们以后配地址的规则，就放着不管了，觉得一个 swf 在浏览器显示不出来没什么。但是老大还是在页面完成后提出了意见，让我对资源协议做个判断，做 https 处理。既然有指示了，那就把这个功能加上。
在实现的过程中，发现并不复杂，而且页面的功能也得到更好的完善。
在这件事中，因为我把图片显示不出来的问题更多地放在了运营同事的数据配置问题上，所以忽略了这个问题，但是在得出是运营同事配置数据问题后，我应该去告知配数据的同事，让他们注意这个问题。我也可以采取另一种方法，就是自己在页面做处理。
所以，今后对这种不同部门间要沟通处理的问题，先想到的应该是如何做好自己应该做的事情，如果确定是其他部门的责任，应该去推动这件事的处理，而不是忽略。
网友评论