Question

我看到有几个人问这个问题的部分内容并尝试了各种解决方案，但似乎没有任何效果。我不确定它是否是我项目中的组合或其他东西导致它无法正常工作。

在我的项目中，我有各种页面显示类似的DataTables。我想将这些表的初始化放在一个文件中以节省重复。但我想传递参数来解释例如：列标题。只是为了使其复杂化，初始化在document.ready上毫不奇怪。

我尝试过的事情：
Pass vars to JavaScript via the SRC attribute
http://feather.elektrum.org/book/src.html

在下面的代码示例中，我从未点击过第二个警报。如果要点击第二个和第三个警报以及test_var的内容是正确的，我想要的是什么：

（cs）html文件

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        $.getScript("TestScript.js"); // Tried different paths to the file here as well
    });
</script>

TestScript.js 的

alert("In the TestScript");
alert("Test variable is: " + test_var);

也许我认为这一切都是错误的，并且在document.ready

期间有一种不同/更简单的方法来实现将参数传递给脚本（文件）。

Answer 1

最简单的方法是（假设变量名test_var不是全局变量或内置属性/方法）

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        window.test_var = "Hopefully this has worked";
        $.getScript("TestScript.js"); // Tried different paths to the file here as well
    });
</script>

上面我假设test_var只在document.ready内定义。否则，如果它是全局变量，则可以在没有window的情况下访问它。

在TestScript.js中，只需在变量消耗后删除它

alert("In the TestScript");
alert("Test variable is: " + test_var);
delete window.test_var;

Answer 2

不幸的是，您无法通过URL将参数传递给JS文件，因为JS代码中没有检索文件的请求。

相反，您可以在将JS文件包含在页面中之前声明变量，然后可以在其中读取，如下所示：

foo.html

console.log(test_var); // = "Hopefully this has worked"

testscript.js

@Component({
  selector: '[my-component]'
  (...)
})

Answer 3

您需要将代码包装在函数中：

function testScript(test_var) {
    alert("In the TestScript");
    alert("Test variable is: " + test_var);
}

然后你可以像这样使用它：

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        $('<script>')
            .attr('type', 'text/javascript')
            .attr('href', 'TestScript.js')
            .appendTo('head');
        testScript(test_var);
    });
</script>

Answer 4

我认为这应该可以解决您的问题。在html页面中包含TestScript.js。

（cs）html文件

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        executeCommonScript();
    });
</script>

<强> TestScript.js

function executeCommonScript(){
   alert("In the TestScript");
   alert("Test variable is: " + test_var);
}

Answer 5

除了到目前为止提出的其他优秀解决方案之外，另一种选择是将您需要的变量以某种方式定义在HTML中，例如：作为数据属性，

既然您正在使用jQuery，那么这样的事情就可以了：

＆＃13;

$(document).ready(function() {
  var test_var = $('.data-container').data('test-var');
  alert('Don\'t be alarmed: '+test_var);
});

＆＃13;

.data-container {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-container" data-test-var="This is just a test"></div>

＆＃13;

您可以在包含的任何文件中访问这些数据属性，因此您不必担心来回传递变量。

当然，如果您不添加div来保存变量，那么这个解决方案最有意义，但是将数据属性添加到实际受变量影响的元素

Answer 6

许多人正确回答了我的问题，谢谢大家。我在使其工作时遇到的问题是我尝试将参数传入的脚本文件位于我的Views / Shared文件夹中，其中列出的here已被阻止。

将脚本移出Views文件夹后，一切正常。除了上面的答案，我发现最简单的是this

Answer 7

$(document).ready(function () {
    test_var = "Hopefully this has worked";
    $.getScript("TestScript.js"); // Tried different paths to the file here as well
});

将参数传递给文件准备好的.js文件

7 个答案: