首页 > 编程技术 > html

如何调用Flash才符合Web网页标准?

发布时间:2016-9-20 19:06

          常有网友提问,如何让网页中嵌入的Flash标签也符合web标准。目前还没有一个完美的解决办法,这篇文章中,我们将Flash嵌入标签写入js文件中,通过变量传递参数的办法来回避不符合标准的标签。

 

  请注意,这只是一个变通的方法,换汤不换药,并未能最终解决存在的问题,通过验证只是一种表象,这样的思路是不是可取,在实际操作中请大家自行斟酌。

  首先建立一个JS文件flash.js。写入如下代码:

function swf(file,w,h) {
    document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="'+w+'" height="'+h+'"> ');
    document.write('<param name="movie" value="' + file + '">');
    document.write('<param name="quality" value="high"> ');
    document.write('<param name="wmode" value="transparent"> ');
    document.write('<param name="menu" value="false"> ');

    document.write('<embed" width=100% src="' + file + '" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="'+w+'" height="'+h+'"></embed> ');
    document.write('</object> ');
}

  上面的js脚本定义了一个函数swf,并设置三个变量,它们分别是:flile文件链接,w宽度,h高度。在XHTML中向这个函数传递变量即可实现flash的嵌入。如下代码:

<div id="flash">
    <script type="text/javascript" language="javascript">swf('designyesky.swf','500','220');</script>
</div>

  建立id为flash的div作为一容器,在其内部嵌入js脚本,变量依次为:文件路径、宽度、高度。

  看下面的全部代码:

<!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=gb2312" />
<title>符合web标准的嵌入Flash的方法</title>
<script type="text/javascript" language="javascript"" width=100% src="flash.js"></script>
<style type="text/css">
#flash { width:500px; margin:50px auto; border:5px solid #03c;}
</style>
</head>
<body>
<div id="flash">
    <script type="text/javascript" language="javascript">swf(designyesky.swf','500','220');</script>
</div>
</body>
</html> 

脚本源代码:
<body>
<style>
body {background-color:#999999}
#all {width:100px; height:200px; background-color:#FFFFFF; overflow:hidden; }
#left {width:100px; background-color:#F90FF1; float:left; height:200px}
#left li {cursor:hand; font:bold 12px "Arial Black";  list-style:circle; margin-left:-10px; color:#FFFFFF}
#right {width:100px; background-color:#FFFF00; float:left; height:200px; cursor:hand;font:bold 15px "Arial Black"; color: #333333}
</style>
<script language="javascript">
function $(id) {return document.getElementById(id)}
function left(id) {
var alla= $("alla");
var right= $("right");
var alla_left=parseInt(alla.style.marginLeft);
   if (alla_left==0) {
      if (id==1) {right.innerHTML="#5AE9FA";;right.style.backgroundColor="#5AE9FA"}
      else if (id==2) {right.innerHTML="#ADFA5A";right.style.backgroundColor="#ADFA5A"}
      else if (id==3) {right.innerHTML="#F9A40F";;right.style.backgroundColor="#F9A40F"}
      left_decrease()
   }
   if (alla_left==-100) {right_decrease()}
}
function left_decrease() {
var alla= $("alla");
var alla_left=parseInt(alla.style.marginLeft);
if (alla_left==-100) {clearTimeout(time)}
else {
alla.style.marginLeft=alla_left-1;
time= setTimeout("left_decrease()",1)
}
}
function right_decrease() {
var alla= document.getElementById("alla");
var alla_left=parseInt(alla.style.marginLeft);
if (alla_left==0) {clearTimeout(time)}
else {
alla.style.marginLeft=alla_left+1;
time= setTimeout("right_decrease()",1)}
}
</script>
<div id="all">
  <div id="alla" style="margin-left:0px;  width:200px">
     <div id="left">
     <ul>
     <li onclick="left(1)" style="color:#5AE9FA">color1</li>
     <li onclick="left(2)" style="color:#ADFA5A">color2</li>
     <li onclick="left(3)" style="color:#F9A40F">color3</li>
  </ul>
  </div>
     <div id="right"  onclick="left()"></div>
  </div>
</div>
</body>

第一 Iframe 代码:<iframe" width=100% src="class.html" scrolling="no" frameborder="0"  id="classpage" style="height:expression(1); aho:expression(autoResize())" ></iframe>

第二 被嵌入的页面的body标签: <body onload=parent.document.all.classpage.height=document.body.scrollHeight>

第三 Iframe 的使用页里增加 js 控制代码

function autoResize()
{
try
{
document.all["classpage"].style.height=classpage.document.body.scrollHeight
}
catch(e){}
}

<div style="width:100%; overflow-x:hidden;overflow-y:scroll;height:100px;" id="nono" onClick="go()">
<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院
</div>
<script>
function go(){
alert(document.getElementById('nono').scrollTop);
}
</script>

有时候在浏览网页的时候会发现:有的网站用html来传值,根据传值的不同显示不同的内容。其代码
  <script language="JavaScript" type="text/javascript">
  <!--
  str=location.href; //获取本页url地址
  arr=str.split("?");
  str1 = arr[1];
  arr1=str1.split("=");
  alert(arr1[0]);
  alert(arr1[1]); //得到这两个值后,要显示的内容可能通过ajax或iframe来获取了
  //-->
  </script>

标签:[!--infotagslink--]

您可能感兴趣的文章: