将参数传递给 .js 文件答案

【问题标题】：Passing parameters to .js file将参数传递给 .js 文件
【发布时间】：2015-02-15 19:00:01
【问题描述】：

我正在开发一个小部件。它的代码是：

<script src="../test/js.js"></script>

我想将参数传递给这样的 .js 文件，因为我们传递查询字符串等参数。

<script src="../test/js.js?place=us&list=10"></script>.

这些是我的 .js 文件中的内容。

var _html = '<div id="FJ_TF_Cont" style="position: relative; padding: 0; margin: 0; border-width: 0px; width: 200px;">'
+ '<iframe width="210" height="640" src="../test/content.aspx" name="FJIframe" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="width: 210px; border-width: 0px; z-index: 1;">'
+ '</iframe>'
+ '</div>';

document.write(_html);

请注意 Iframe 中 src 的内容，它包含：

src="../test/content.aspx"

现在我想将 js 字符串中的这些参数作为查询字符串传递给这个 src。

最终的 src 应该是这样的：

 src="../test/content.aspx?place=us&list=0"

我是 js 新手，需要帮助。

【问题讨论】：

标签： javascript

【解决方案1】：

将参数传递给 JS 文件中的函数，而不是作为文件本身的查询字符串。

声明一个类似的函数

function doSomething(place, list) {
    //do something with place
    //do something with list
}

在其他JS中使用doSomething('us',10);

任何其他尝试做你打算做的事情都是被黑客入侵的尝试。虽然您可以实现它，但这不是预期的设计。查看相关帖子 -

Get the query string on the called javascript file
Passing Querystring style parameters into Javascript file

普遍的共识是不，不能或不应该这样做。

--

编辑

几个月后，我了解到cache busting。这是脚本文件上查询参数的一个特殊用例。考虑将缓存设置为一年到期的情况。为了打破这个时间问题，更改 HTML href 中的查询参数并不一定意味着您已经更改了脚本的内容，但它确实具有打破一年缓存到期的额外副作用。

【讨论】：

概括地说不应该传递查询字符串参数有点错误。在某些情况下，这是一个不错的主意。想想用户特定的 CSS。如果您将 CSS 和 JS 文件视为可通过模板处理器修改的动态资源，这很有可能。

【解决方案2】：

我认为更好更简单的方法是添加一个带有变量的额外脚本标签。如果您保持非常简单，您可以按以下方式进行操作，但是对于大量变量，我会创建一个包含所有变量的对象：

<script type="text/javascript">
  var place="us"; 
  var list=0
</script>
<script type="text/javascript" src=....></script>`.

如果你想在 src 中做，你有两种选择：

服务器将变量添加到脚本中。它获取对脚本的请求，而不是只返回文件，而是在其前面添加与上述类似格式的变量。这意味着它对服务器来说是额外的工作，因为它需要一个实际的脚本来运行，并且返回的文件更难缓存，尽管它是可行的（也取决于变体的数量。
或者，您可以让脚本找到正确的标签并解析其src 参数。这很难做到，因为脚本不知道自己的名字。尤其是当你合并和最小化一个脚本时，脚本标签可能对脚本来说是找不到的，所以你不能真正做到这一点。我会放弃这个选项，尽管我已经看到人们不止一次地尝试过。

【讨论】：

【解决方案3】：

使用 PHP 的一种可能的解决方案是这样。

在您已经拥有js.js 的文件夹中创建一个js.php 文件并粘贴：

<?php

    header('Content-type: text/javascript');
    $string = ""; $i = 0;
    foreach($_GET as $key => $value)
    {
        if($i == 0){
            $string .= "?";
            $string .= $key . '=' . $value;
            $i++;
            continue;
        }
        $string .= '&' . $key . '=' . $value;
    };
    echo "
    var _html = '<div id=\"FJ_TF_Cont\" style=\"position: relative; padding: 0; margin: 0; border-width: 0px; width: 200px;\">'
    + '<iframe width=\"210\" height=\"640\" src=\"../test/content.aspx$string\" name=\"FJIframe\" scrolling=\"no\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" style=\"width: 210px; border-width: 0px; z-index: 1;\">'
    + '</iframe>'
    + '</div>';

    document.write(_html);
    ";
    ?>

改变

<script src="../test/js.js?place=us&list=10"></script>

到

<script src="../test/js.php?place=us&list=10"></script>

它应该可以工作。

【讨论】：

【解决方案4】：

我第二个@goleztrol 的回答。这是一个较小的（单脚本标签）版本

<script type="text/javascript">
  var place="us"; 
  var list=0;
  var script_tag = document.createElement('script');
  script_tag.setAttribute("type","text/javascript");
  script_tag.setAttribute("src", "<your-js-src>");
  document.getElementsByTagName('body')[0].appendChild(script_tag);
</script>

希望有帮助:)

【讨论】：

【解决方案5】：

你的服务器要么根据参数重写js，要么在脚本标签之前在javascript中设置一些预定义的变量。

【讨论】：

【解决方案6】：

简单地说：您希望在请求文件时使用查询参数的值来更改 javascript 文件。当然，这是可能的。不幸的是，这只能通过一些服务器端处理来完成。

我不能为此建议/推荐任何服务器端，您需要自己解决这个问题。

总体思路是：

服务器端接收请求并读取 Javascript 文件模板。
然后它调用模板处理器并要求它在适当的位置替换值。这些值是从 HTTP GET 参数中检索的。
然后，服务器端将此文件与适当的缓存标头、内容类型标头一起提供给客户端。

【讨论】：