Flash 视频广告的定位兼容性问题
程序员文章站
2022-04-08 19:49:03
在项目中，用到了一个Flash视频广告，但是该视频广告在Firefox中显示实在是差强人意，居然漂浮在了网站的左上角，该怎么解决这个问题呢？... 09-09-13...
调用代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="flash.js"></script>
<style type="text/css">
body { height:1000px;width:100%}
.zhans_ship { width:250px; height:200px; z-index:99999; right: 0px; visibility: hidden; border-bottom: #000 2px solid; position: absolute; background-color: #000;top:378px;}
.top_ship { width:250px; height:26px; background-image:url(kkkk/msgtopbg.gif);font-family:"宋体"; font-size:12px; color:#ffffff;}
.top_ship div { width:150px; height:auto; float:left; line-height:20px;}
.bfq_a {font-size: 12px; background-image: url('kkkk/bombg.gif');height:15px; line-height:15px; color: #ffffff;padding-top:2px; text-align:center;}
.bfq_a a:link { font-family:"宋体"; font-size:12px; text-decoration:none; color:#ffffff;}
.bfq_a a:visited { font-family:"宋体"; font-size:12px; text-decoration:none; color:#ffffff;}
.bfq_a a:active { font-family:"宋体"; font-size:12px; text-decoration:none; color:#ffffff;}
.bfq_a a:hover { font-family:"宋体"; font-size:12px; text-decoration:none; color:#ffffff;}
</style>
</head>
<body>
<div class="zhans_ship" id="emeng">
<div class="top_ship"><div>视频广告：</div><span title=关闭 style="cursor: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px; float:right; width:auto; height:auto; margin-top:3px;" onclick=closediv() >×</span></div>
<!-- flash 显示部分 start -->
<div class="mid_ship">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 " width="250" height="150">
<param name="movie" value="player.swf">
<param name="quality" value="high">
<param name="allowfullscreen" value="true" />
<param name="flashvars" value="vcastr_file=http://www.xxx.cn/zhaoshang.flv&vcastr_title=mininggo&barcolor=0xffffff&barposition=1&isshowbar=3&bartransparent=10&logotext=zgcjq.com&isautoplay=1&iscontinue=1" />
<embed src="player.swf" allowfullscreen="true" flashvars="vcastr_file=http://www.xxx.com/images/zhaoshang.flv&vcastr_title=mininggo&barcolor=0xffffff&barposition=1&isshowbar=3&bartransparent=10&logotext=zgcjq.com&isautoplay=1&iscontinue=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer " wmode="transparent" type="application/x-shockwave-flash" width="250" height="150"></embed>
</object>
</div>
<!-- flash 显示部分 end -->
<div class="bfq_a"><a href="#" target="_blank">大型xx活动</a></div>
</div>
</body>
</html>
flash.js代码（修改后的）如下：
if(document.all){
window.attachevent('onload',getmsg);
}else{
window.addeventlistener('load',getmsg,false);
}
window.onresize = resizediv;
window.onerror = function(){}
var divtop,divleft,divwidth,divheight,docheight,docwidth,objtimer,i = 0;
function getmsg()
{
try{
var emeng = document.getelementbyid("emeng");
/* 为修改前
var docwidth = document.documentelement.clientwidth;
var docheight = document.documentelement.clientheight;
*/
//修改后：
var docwidth = getwidth();
var docheight = getheight();
divtop = parseint(emeng.style.top,10);
divleft = parseint(emeng.style.left,10);
divheight = parseint(emeng.offsetheight,10);
divwidth = parseint(emeng.offsetwidth,10);
emeng.style.top = parseint(document.documentelement.scrolltop,10) + docheight + 10+"px" ;// divheight
emeng.style.left = parseint(document.documentelement.scrollleft,10) + docwidth - divwidth+"px" ;
emeng.style.visibility = "visible";
objtimer = window.setinterval("movediv()",10)
}catch(e){
}
}
function resizediv()
{
i+=1;
try{
var emeng = document.getelementbyid("emeng");
var docwidth = getwidth();
var docheight = getheight();
divheight = parseint(emeng.offsetheight,10)
divwidth = parseint(emeng.offsetwidth,10)
emeng.style.top = docheight - divheight + parseint(document.documentelement.scrolltop,10)+"px" ;
emeng.style.left = docwidth - divwidth + parseint(document.documentelement.scrollleft,10)+"px" ;
}catch(e){}
}
function movediv()
{
try
{
var emeng = document.getelementbyid("emeng");
var docwidth = getwidth();
var docheight = getheight();
divheight = parseint(emeng.offsetheight,10);
divwidth = parseint(emeng.offsetwidth,10);
if(parseint(emeng.style.top,10) <= (docheight - divheight + parseint(document.documentelement.scrolltop,10)))
{
window.clearinterval(objtimer);
objtimer = window.setinterval("resizediv()",1);
}
divtop = parseint(emeng.style.top,10);
divtop--;
emeng.style.top = divtop+"px" ;
}catch(e){
}
}
function closediv()
{
var emeng = document.getelementbyid("emeng");
emeng.innerhtml='';
emeng.style.visibility='hidden';
if(objtimer) window.clearinterval(objtimer);
}
/**
* 获取屏幕宽度的函数，在非xhtml标准页面下有可能有问题
*/
function getwidth()
{
var winwidth = '';
if (window.innerwidth)//for firefox
{
winwidth = window.innerwidth;
}
else if((document.body) && (document.body.clientwidth))
{
winwidth = document.body.clientwidth;
}
if (document.documentelement && document.documentelement.clientwidth)
{
winwidth = document.documentelement.clientwidth;
}
return winwidth;
}
/**
* 获取屏幕高度的函数
* html,body高度属性必须设值为height:100%否则在火狐浏览器下获取不到真实高度
*/
function getheight()
{
var winheight = '';
if (window.innerheight)//for firefox
{
winheight = window.innerheight;
}
else if((document.body) && (document.body.clientheight))
{
winheight = document.body.clientheight;
}
if (document.documentelement && document.documentelement.clientheight)
{
winheight = document.documentelement.clientheight;
}
return winheight;
}
*:红色部分为修改的位置或添加的代码
修改部分:
1.增强型的获取窗口长度和宽度的函数;
2.在style.top,style.left等处在firefox下必须使用单位px;
3.调整 flash参数之wmodel，即window model，详情请自己搜索;
修改以上几处，就可以实现ie，firefox的准确定位和相同的显示效果。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="flash.js"></script>
<style type="text/css">
body { height:1000px;width:100%}
.zhans_ship { width:250px; height:200px; z-index:99999; right: 0px; visibility: hidden; border-bottom: #000 2px solid; position: absolute; background-color: #000;top:378px;}
.top_ship { width:250px; height:26px; background-image:url(kkkk/msgtopbg.gif);font-family:"宋体"; font-size:12px; color:#ffffff;}
.top_ship div { width:150px; height:auto; float:left; line-height:20px;}
.bfq_a {font-size: 12px; background-image: url('kkkk/bombg.gif');height:15px; line-height:15px; color: #ffffff;padding-top:2px; text-align:center;}
.bfq_a a:link { font-family:"宋体"; font-size:12px; text-decoration:none; color:#ffffff;}
.bfq_a a:visited { font-family:"宋体"; font-size:12px; text-decoration:none; color:#ffffff;}
.bfq_a a:active { font-family:"宋体"; font-size:12px; text-decoration:none; color:#ffffff;}
.bfq_a a:hover { font-family:"宋体"; font-size:12px; text-decoration:none; color:#ffffff;}
</style>
</head>
<body>
<div class="zhans_ship" id="emeng">
<div class="top_ship"><div>视频广告：</div><span title=关闭 style="cursor: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px; float:right; width:auto; height:auto; margin-top:3px;" onclick=closediv() >×</span></div>
<!-- flash 显示部分 start -->
<div class="mid_ship">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 " width="250" height="150">
<param name="movie" value="player.swf">
<param name="quality" value="high">
<param name="allowfullscreen" value="true" />
<param name="flashvars" value="vcastr_file=http://www.xxx.cn/zhaoshang.flv&vcastr_title=mininggo&barcolor=0xffffff&barposition=1&isshowbar=3&bartransparent=10&logotext=zgcjq.com&isautoplay=1&iscontinue=1" />
<embed src="player.swf" allowfullscreen="true" flashvars="vcastr_file=http://www.xxx.com/images/zhaoshang.flv&vcastr_title=mininggo&barcolor=0xffffff&barposition=1&isshowbar=3&bartransparent=10&logotext=zgcjq.com&isautoplay=1&iscontinue=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer " wmode="transparent" type="application/x-shockwave-flash" width="250" height="150"></embed>
</object>
</div>
<!-- flash 显示部分 end -->
<div class="bfq_a"><a href="#" target="_blank">大型xx活动</a></div>
</div>
</body>
</html>
flash.js代码（修改后的）如下：
if(document.all){
window.attachevent('onload',getmsg);
}else{
window.addeventlistener('load',getmsg,false);
}
window.onresize = resizediv;
window.onerror = function(){}
var divtop,divleft,divwidth,divheight,docheight,docwidth,objtimer,i = 0;
function getmsg()
{
try{
var emeng = document.getelementbyid("emeng");
/* 为修改前
var docwidth = document.documentelement.clientwidth;
var docheight = document.documentelement.clientheight;
*/
//修改后：
var docwidth = getwidth();
var docheight = getheight();
divtop = parseint(emeng.style.top,10);
divleft = parseint(emeng.style.left,10);
divheight = parseint(emeng.offsetheight,10);
divwidth = parseint(emeng.offsetwidth,10);
emeng.style.top = parseint(document.documentelement.scrolltop,10) + docheight + 10+"px" ;// divheight
emeng.style.left = parseint(document.documentelement.scrollleft,10) + docwidth - divwidth+"px" ;
emeng.style.visibility = "visible";
objtimer = window.setinterval("movediv()",10)
}catch(e){
}
}
function resizediv()
{
i+=1;
try{
var emeng = document.getelementbyid("emeng");
var docwidth = getwidth();
var docheight = getheight();
divheight = parseint(emeng.offsetheight,10)
divwidth = parseint(emeng.offsetwidth,10)
emeng.style.top = docheight - divheight + parseint(document.documentelement.scrolltop,10)+"px" ;
emeng.style.left = docwidth - divwidth + parseint(document.documentelement.scrollleft,10)+"px" ;
}catch(e){}
}
function movediv()
{
try
{
var emeng = document.getelementbyid("emeng");
var docwidth = getwidth();
var docheight = getheight();
divheight = parseint(emeng.offsetheight,10);
divwidth = parseint(emeng.offsetwidth,10);
if(parseint(emeng.style.top,10) <= (docheight - divheight + parseint(document.documentelement.scrolltop,10)))
{
window.clearinterval(objtimer);
objtimer = window.setinterval("resizediv()",1);
}
divtop = parseint(emeng.style.top,10);
divtop--;
emeng.style.top = divtop+"px" ;
}catch(e){
}
}
function closediv()
{
var emeng = document.getelementbyid("emeng");
emeng.innerhtml='';
emeng.style.visibility='hidden';
if(objtimer) window.clearinterval(objtimer);
}
/**
* 获取屏幕宽度的函数，在非xhtml标准页面下有可能有问题
*/
function getwidth()
{
var winwidth = '';
if (window.innerwidth)//for firefox
{
winwidth = window.innerwidth;
}
else if((document.body) && (document.body.clientwidth))
{
winwidth = document.body.clientwidth;
}
if (document.documentelement && document.documentelement.clientwidth)
{
winwidth = document.documentelement.clientwidth;
}
return winwidth;
}
/**
* 获取屏幕高度的函数
* html,body高度属性必须设值为height:100%否则在火狐浏览器下获取不到真实高度
*/
function getheight()
{
var winheight = '';
if (window.innerheight)//for firefox
{
winheight = window.innerheight;
}
else if((document.body) && (document.body.clientheight))
{
winheight = document.body.clientheight;
}
if (document.documentelement && document.documentelement.clientheight)
{
winheight = document.documentelement.clientheight;
}
return winheight;
}
*:红色部分为修改的位置或添加的代码
修改部分:
1.增强型的获取窗口长度和宽度的函数;
2.在style.top,style.left等处在firefox下必须使用单位px;
3.调整 flash参数之wmodel，即window model，详情请自己搜索;
修改以上几处，就可以实现ie，firefox的准确定位和相同的显示效果。