在 .js 文件中调用 URL 参数答案

【问题标题】：Calling URL parameters within a .js file在 .js 文件中调用 URL 参数
【发布时间】：2010-02-24 19:30:55
【问题描述】：

我在 HTML 文件中调用 .js 文件。在 .js 文件的 URL 上，我想包含一个可访问 .js 文件内的代码的参数。

例如：

我希望能够在 jQuery 的帮助下将 ID 值传递给 jquery_widget.js 文件中的函数。这是怎么做到的？

感谢大家的帮助！

【问题讨论】：

标签： javascript jquery parameters

【解决方案1】：

你不能那样做：你必须在加载脚本之前声明变量。示例：

<script type="text/javascript">
    var foo= "bar";
</script>
<script type="text/javascript" href="path/to/js.js"></script>

通过这种方式，变量将为您的脚本准备好。

另一种解决方案是使用 php 脚本，然后可以使用 GET 变量。在这种情况下，请确保您通过 header() 调用告知您正在输出 javascript

<script type="text/javascript" src="ip.php"></script>

还有ip.php

<?
//"ip.php" example- display user IP address on any page
Header("content-type: application/x-javascript");
$serverIP=$_SERVER['REMOTE_ADDR'];
echo "document.write(\"Your IP address is: <b>" . $serverIP . "</b>\")";
?>

【讨论】：

【解决方案2】：

你使用类似 php 的东西

your html file:
<script type="text/javascript" src="yourFile.php?var=123">  

yourFile.php:  
// <?php echo($_GET["var"]); ?>

或者，您可以定义一个全局变量并让 javascript 访问该变量。

【讨论】：

【解决方案3】：

以不同的方式解决问题：

包含您的 .js 文件
使用参数（即您的 ID 值）调用您的 .js 文件中定义的函数

【讨论】：

【解决方案4】：

javascript 文件本身不知道加载它的 URL。

您可以做的是为您包含在 HTML 页面中的script 标记分配一个 ID，然后通过 jQuery 获取 SRC 属性。通过解析URL值，可以提取参数。

<script id='widgetJs' src='...'></script>

var url = $("#widgetJs").attr("src");
var q = url.split("?")[1];
if (q) {
    var params = q.split("&");
    etc. etc... 
    i'm not even going to explain further because there are better solutions.
}

更简单的解决方案是在单独的script 标记中声明一个全局变量（命名空间以避免冲突），然后直接在脚本中使用它。

或者更好的是在你的脚本中有一个initialize(param) 函数，你可以从 HTML 文件中调用它（这样可以避免你用不必要的变量污染全局上下文）。

【讨论】：

【解决方案5】：

HTML 和 javascript 文件是静态资源，只能由客户端浏览器解释，因此您不能将任何查询参数传递给这些值并在其中读取它们，您可以做的是动态生成带有参数的 javascript 文件服务器端，然后将其作为页面的一部分包含在内。或者其他简单的方法是将你的js文件写成php或jsp文件，并将页面的内容类型设置为text/javascript，你就可以访问其中的所有参数了

【讨论】：

【解决方案6】：

cshtml 文件

<script src="@Url.Content("~/_scripts/CustomScripts/Coverage.js")" type="text/javascript"></script>   
@using (Html.BeginForm("Create", "Coverage")) {

}    
<script type="text/javascript">    getTypeIDByCategoryIdUrl = '@Url.Action("GetTypeIDByCategoryId")';  </script>

Coverage.js

var getTypeIDByCategoryIdUrl = ""; $(function () {
      $('#SeletedParrentIDTypeCode').change(function () {
      alert(getTypeIDByCategoryIdUrl); }

【讨论】：

【解决方案7】：

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href
                     .indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }

    return vars;
}

来源：http://snipplr.com/view.php?codeview&id=799

【讨论】：

这不起作用..他要求.js包含的url参数..而不是html页面..

【解决方案8】：

如果您尝试从 url 读取参数，我使用过：

function PageQuery(q) {
    if (q.length > 1) this.q = q.substring(1, q.length);
    else this.q = null;
    this.keyValuePairs = new Array();
    if (q) {
        for (var i = 0; i < this.q.split("&").length; i++) {
            this.keyValuePairs[i] = this.q.split("&")[i];
        }
    }
    this.getKeyValuePairs =  function() { return this.keyValuePairs; }
    this.getValue = function(s) {
        for (var j = 0; j < this.keyValuePairs.length; j++) {
            if (this.keyValuePairs[j].split("=")[0] == s)
                return this.keyValuePairs[j].split("=")[1];
        }
        return false;
    }
    this.getParameters = function() {
        var a = new Array(this.getLength());
        for (var j = 0; j < this.keyValuePairs.length; j++) {
            a[j] = this.keyValuePairs[j].split("=")[0];
        }
        return a;
    }
    this.getLength = function() { return this.keyValuePairs.length; }
}
function queryString(key) {
    var page = new PageQuery(window.location.search);
    return unescape(page.getValue(key));
}
function displayItem(key) {
    if (queryString(key) == 'false') {
        document.write("you didn't enter a ?name=value querystring item.");
    } else {
        document.write(queryString(key));
    }
}

【讨论】：