`
benqend
  • 浏览: 32768 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

给js文件传参数

 
阅读更多
给js文件传参数
一、利用全局变量

这是最简单的一种方式,比如Google Adsense:

<script type="text/javascript"> google_ad_client ='pub-3741595817388494'; </script>
<script type="text/javascript" src="http://pagead2. googlesyndication.com/pagead/show_ads.js"></script>



缺点是引入了全局变量。其中引入文件的方式还有两个变体:

// 变体1:用document.write输出
<script type="text/javascript">

google_ga_id ='g6u7un8646xx';
document.write(unescape('%3Cscript type="text/javascript" src= "http://www.google-analytics.com/ga.js"%3E%3C/script%3E')); </script>
// 变体2:用DOM操作append到head里
<script type="text/javascript">
G_BEACON_ATP ='category=&userid=&channel=112ad_id=';
document.getElementsByTagName('head')[0].appendChild(document. createElement('script')).src='http://taobao.com/atp.js';
</script> // 注意:上面的代码是根据实际应用虚拟的示范代码



注:变体1应用很多,常见写法如下:

<script type="text/javascript">
// 直接转义即可:
document.write('<script type="text/javascript" src="test.js"></script>');
// 或者像Yahoo!首页一样:
document.write('<scr'+'ipt type="text/javascript" src="test.js"></scr'+'ipt>');
</script>



二、获取并解析script元素的src

和全部变量相比,我们更希望能像下面这样传入参数:

<script type="text/javascript" src="test.js?a=b&c=d"></script>



核心问题是如何获取到src属性。

方法一是给script添加id属性,通过id得到当前script,再用正则从src中取出参数。缺点是HTML 4.01 Specification里,SCRIPT元素没有id属性。这个缺点也算不得是缺点,毕竟尽信标准不如无标准。

方法二是用js的文件名当作钩子,js代码里通过document.getElementsByTagName('script')后,正则匹配出当前js文件。这个方法很正统,但要求文件名唯一。缺点是代码多,不精炼,对性能也稍有影响。

方法三是在方法一的基础上,干脆再添加一个自定义属性data:

<script id="testScript" type="text/javascript" src="test.js" data="a=b&c=d"></script>

test.js文件里,通过下面这行得到传入的参数:

var scriptArgs = document.getElementById('testScript').getAttribute('data');



方法四是利用js的顺序执行机制(js文件的加载可以是同步或异步方式,但执行时,一定是按照在文档流中的顺序来执行的)。当某个js文件执行时,一定是“已加载”的js文件中的最后一个:

var scripts = document.getElementsByTagName('script'); var currentScript = scripts[scripts.length - 1];



方法四比方法二更灵巧天才。

从代码的精简和性能上讲,方法三 > 方法 一 > 方法四 > 方法二

小结:如果你很在意标准,推荐方法四;如果和我一样觉得没必要完全遵守标准,推荐方法三。

写了个测试程序

<!DOCTYPE html>
<html>
<script src="a2.js">
</script>
<script src="a2.js">
</script>
<script src="a2.js">
</script>
</html>

a2.js

var scripts = document.getElementsByTagName('script');
var currentScript = scripts.length;
alert(currentScript);

分别打印出 

1 2 3

三、灵感方案

如果你和我一样是John Resig的忠实fans,或许还记得去年8月份讨论得很火爆的《Degrading Script Tags》。John Resig给我们开启了一扇想象的门,对于本文的问题来说,还可以用以下“邪门歪道”来实现:

<script type="text/javascript" src="test.js"> TB.SomeApp.scriptArgs ='a=b&c=d'; </script>

在test.js文件里:

TB = {}; TB.SomeApp = {};
var scripts = document.getElementsByTagName("script");
eval(scripts[ scripts.length - 1 ].innerHTML);

这样就将参数存储到了TB.SomeApp.scriptArgs变量里。

当参数不多时,甚至可以这样:

<script type="text/javascript" src="test.js">a=b&c=d</script>

js文件里:

var scripts = document.getElementsByTagName("script");
var scriptArgs = scripts[ scripts.length - 1 ].innerHTML.replace(/[s]/g, '');

想象是无止境的,还可以利用onload:

<script type="text/javascript" src="test.js" onload="TB.SomeFun('a=b&c=d')"></script>

js文件里定义好函数即可:

TB = {};

TB.SomeFun = function(arg) { //code

};



上面的代码在非ie浏览器下,都能正确运行。针对笨笨的ie,还得加几行代码:

if(window.ActiveXObject) {

var scripts = document.getElementsByTagName('script');

eval(scripts[scripts.length - 1].getAttribute('onload'));

}
分享到:
评论

相关推荐

    给js文件传参数(详解)

    ### 给JS文件传参数详解 #### 一、利用全局变量 传递参数到JavaScript文件中最直接的方法之一就是通过全局变量。这种方式虽然简单易行,但同时也存在一定的缺点,主要是引入了全局变量,可能会导致命名冲突等问题。...

    js文件传递参数及js文件的源码

    在上面的示例中,我们将三个参数传递给 show.js 文件,分别是 style、count 和 order。 JS 文件中访问参数的方法 在 JS 文件中,我们可以使用以下方法来访问这些参数: `var transferValues = document....

    扩展easyUI,上传文件时附传参数

    然而,当涉及到文件上传时,EasyUI的标准实现并不支持在上传文件的同时传递其他参数。这种需求在实际业务场景中是常见的,例如,用户可能需要在上传文件时指定文件类别或关联其他数据。针对这种情况,我们可以对...

    【原创】使用 JavaScript 文件特性,给 JavaScript 传递参数

    这篇原创资源主要探讨了如何利用JavaScript的文件特性来高效地传递参数。以下是对这个主题的详细解释。 首先,JavaScript中的参数传递方式是“值传递”,这意味着当一个变量作为参数传递给函数时,函数接收到的是该...

    JS调另一界面PHP 并传参数 并PHP反调JS

    在Web开发中,JavaScript(JS)和PHP是两种常见的编程语言,它们分别负责客户端和服务器端的交互。本文将深入探讨如何使用JavaScript调用另一个PHP页面,并传递参数,以及PHP如何反过来调用JavaScript。我们将通过...

    javascript文件中获取当前文件路径

    在开发javascript插件的过程中,我们有时候需要获取当前JS文件的路径,用于自动加载一些图片、CSS等外部资源,但是javascript文件中并没有像PHP那样的__FILE__常量来供我们取得当前文件路径

    JS 获取浏览器参数

    这篇博文“JS 获取浏览器参数”可能探讨了如何利用JavaScript来收集关于用户浏览器的信息,包括但不限于浏览器类型、版本、操作系统、屏幕分辨率等。 首先,我们可以使用`navigator`对象来获取浏览器的基本信息。`...

    qt 调用javascript函数 带参数

    要从JavaScript获取返回值,可以重写`QWebFrame`的`javaScriptWindowObjectCleared()`信号,将一个C++对象暴露给JavaScript,然后在JavaScript中调用该对象的方法并将结果返回。例如: ```cpp class JSBridge : ...

    javascript md5加密 js文件

    在给定的“javascript md5加密 js文件”中,主要涉及的核心是`md5.js`这个JavaScript库,它提供了一个方便的方法来实现MD5哈希加密。以下是对这个库的一些详细解释: 1. **MD5.js库的引入**: 在HTML文件中,可以...

    javascript向flash swf文件传递参数值注意细节

    要使用JavaScript向SWF文件传递参数,我们首先需要理解SWF文件是什么,以及如何通过JavaScript与之交互。SWF是Flash动画文件的标准格式,虽然Adobe Flash已经被逐渐淘汰,但是仍有一些遗留系统或项目会使用到它。...

    福建地图js文件,亲测可用

    开发者可能已经预先配置好了地图的层级、缩放级别、标注、边界等参数,使得用户只需引入这个`fujian.js`文件,就可以在网页上快速呈现福建地图。 文件`fujian.js`可能包含以下关键知识点: 1. **JavaScript基础**...

    基于node.js的文件管理系统源码.zip

    基于node.js的文件管理系统源码.zipNode.js 提供一组可用于与文件系统进行交互(以... 传给完成回调的参数取决于具体方法,但第一个参数总是预留给异常。 如果操作被成功地完成,则第一个参数会为 null 或 undefined。

    js国际化、读取preperties文件信息

    总之,JavaScript读取`.properties`文件是实现国际化的一部分,通过各种方法和库可以方便地加载和解析这些文件,从而为用户提供符合其语言习惯的界面。在实际应用中,要注意文件的加载、解析、缓存以及错误处理等多...

    PHP读取打包JS文件

    标题 "PHP读取打包JS文件" 指的是使用PHP编程语言来实现JavaScript文件的合并与读取。在Web开发中,为了优化页面加载速度,通常会将多个JavaScript文件合并成一个大文件,减少HTTP请求的数量。这个过程就称为JS文件...

    pdf.js使用文件流预览pdf

    4. **使用文件流加载PDF**:在JavaScript中,使用PDF.js的`PDFDocumentProxy`对象加载文件流。以下是一个基本示例: ```javascript var loadingTask = pdfjsLib.getDocument({ data: yourFileStreamData, // 这里...

    birt报表参数日期选择JS文件及操作步骤

    在“标题”提到的“birt报表参数日期选择JS文件”中,JavaScript代码通常用于创建一个交互式的日期选择器。例如,我们可以使用HTML5的`&lt;input type="date"&gt;`元素或者第三方库如jQuery UI的日期选择器。JavaScript...

    Android原生java语句 和html js互相调用 传递参数

    本教程将详细介绍如何在Android中通过Java语句与HTML中的JavaScript进行互调,并传递参数。 首先,我们需要在Android项目中引入`WebView`组件。在XML布局文件中添加一个`WebView`: ```xml android:id="@+id/...

    ast-hook用于js逆向根据参数值快速定位到生成加密参数位置

    `ast-hook`工具就是针对这种情况设计的,它专注于帮助开发者在JavaScript代码中快速定位到特定参数值的生成位置,特别是涉及到加密参数的场景。本文将详细探讨`ast-hook`的工作原理、使用方法以及它在js逆向工程中的...

    js直接调用exe传参

    在Web开发过程中,有时候我们需要从HTML页面通过JavaScript(简称JS)来调用本地的应用程序,并传递参数给这些应用程序。这种需求通常出现在需要与本地资源进行交互或者执行特定任务的情况下。 #### 关键技术与方法...

Global site tag (gtag.js) - Google Analytics