有趣的script标签用getAttribute方法来自脚本吧

 更新时间:2007年03月10日 00:00:00   作者:  

在网页中引入外部对象并传递参数,想来大家都有这个经历。一般来说,使用的标签是iframe和embed(针对flash),不过这两个标签都不能象xml一般设置参数,只能通过在url地址后追加查询字符串的方式来传值。htc倒是挺不错的,只是没有浏览器兼容性,想来大家也不考虑它了。 
    用script标签可以把一个外部js文件载入到页面中,而且不管这个文件是否同域,都同样有效,这种跨域特性,可以说是独一无二的。一般情况下,我们都只是把js文件作为公用代码的一部分加以使用,在这里面集成一些公用函数和类。换个思维,我们把script标签看作是一个大的可视化的组件,对其传入参数,并根据参数进行不同的布局调整,这样做是很有意思的。 
    举个例子,“<script width=300 height=200 filePath="http://mp3.baidu.com/abc.mp3" src=player.js></script>”,这样的写法是不是挺直观,而且又具有实用性呢?大家会问,player.js如何取到script标签里的参数?其实这很简单,只需要在player.js里查找到最后一个script元素,就是当前的这个元素了,然后用getAttribute方法,想取多少个参数都可以。 


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

script标签除了包含代码之外,想过用他来存储数据吗?这样做的目的主要是为了实现跨域限制。 
可以用字符串的方式来存放文本,但这种方式是不直观的,而且需要对特殊字符进行处理,比如: 
str="aaaa" 
str+="bbbb" 
或 
str="aaaa\ 
bbbb" 
我们可以利用函数能够显示源码,并能够显示源码中的备注的特性,把数据巧妙地放置在备注中,这样就可以不用遵守js语法的规范了。 

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

有个应用,拿出来给大家分享 
由于xp的补丁,一夜之间让大江南北的网站上的flash全部加上虚框,需要点击才能激活。大家在恨得牙痛之时,只好想出对应的方法,下面是新浪网插入flash的方法: 
----------------------------------------------------- 
<script type="text/javascript" src="http://image2.sina.com.cn/home/sinaflash.js"></script> 
<script> 
var objFlash = new sinaFlash("abc.swf", "", "100", "100", "7", "", false,"high"); 
objFlash.addParam("wmode", "opaque"); 
objFlash.write("flashcontent_1D194BAF55E2"); 
</script> 
----------------------------------------------------- 
如果善用script标签,则可以简化为: 
-----------------------------------------------------  
<script src="swf.js" movie="abc.swf" width="100" height="100" wmode="opaque"></script> 
----------------------------------------------------- 
一句话足矣 
下面是swf.js文件的内容: 
----------------------------------------------------- 
var ol,oJs,flaID,sMovie 
ol=document.getElementsByTagName("script") 
oJs=ol[ol.length-1] 
flaID=oJs.getAttribute("flaID")||"" 
sMovie=oJs.getAttribute("movie") 
if(sMovie.slice(0,1)=="{"&&sMovie.slice(-1)=="}") 
    sMovie=eval(sMovie.slice(1,-1)) 
l="<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='"+flaID+"' width='"+(oJs.getAttribute("width")||"100%")+"' height='"+(oJs.getAttribute("height")||"100%")+"'>\ 
    <param name=movie value='"+sMovie+"' />\ 
    <param name=wmode value='"+(oJs.getAttribute("wmode")||"window")+"' />\ 
    <param name=allowscriptaccess value='always' />\ 
    <embed id='"+flaID+"' name='"+flaID+"' allowscriptaccess=always wmode=transparent src='"+sMovie+"' width=120% height=100% type='application/x-shockwave-flash'></embed>\ 
</object>" 
document.write(l) 

相关文章

  • js菜单点击显示或隐藏效果的简单实例

    js菜单点击显示或隐藏效果的简单实例

    本篇文章主要是对js菜单点击显示或隐藏效果的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 10种JavaScript最常见的错误(小结)

    10种JavaScript最常见的错误(小结)

    这篇文章主要介绍了10种JavaScript最常见的错误(小结),查看了数千个项目后,发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生
    2019-06-06
  • JS出现失效的情况总结

    JS出现失效的情况总结

    本篇文章主要对JS出现失效的情况进行总结。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js+html5实现canvas绘制网页时钟的方法

    js+html5实现canvas绘制网页时钟的方法

    这篇文章主要介绍了js+html5实现canvas绘制网页时钟的方法,涉及html5图形绘制的基础技巧,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 详解如何在JavaScript中自定义事件

    详解如何在JavaScript中自定义事件

    在 JavaScript 中,事件是非常核心的概念,它们使得我们可以设计交互性强的网页应用,本文主要和来大家聊聊如何在JavaScript中自定义事件,感兴趣的可以了解下
    2024-04-04
  • Javascript取整函数及向零取整几种常用的方法

    Javascript取整函数及向零取整几种常用的方法

    这篇文章主要介绍了Javascript取整函数及向零取整几种常用的方法,每种方法都有其特点和适用场景,推荐使用Math.trunc(),因为它语义明确、代码易读且性能较好,需要的朋友可以参考下
    2025-01-01
  • 低门槛开发iOS、Android、小程序应用的前端框架详解

    低门槛开发iOS、Android、小程序应用的前端框架详解

    结合AVM官网的介绍和我自己的一些实践经验,我总结了一系列AVM的特性,我想这些内容足以让你主动去学习AVM框架了
    2021-10-10
  • JavaScript实现图片合成下载的示例

    JavaScript实现图片合成下载的示例

    这篇文章主要介绍了JavaScript实现图片合成下载的示例,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-11-11
  • js实现简单的碰壁反弹效果

    js实现简单的碰壁反弹效果

    这篇文章主要为大家详细介绍了js实现简单的碰壁反弹效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • js对象合并的4种方式与数组合并的4种方式

    js对象合并的4种方式与数组合并的4种方式

    这篇文章主要介绍了js对象合并的4种方式与数组合并的4种方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论