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

Pass parameters to .js file on document ready

本文关键字：js 文件 文档 准备好 参数传递      更新时间：2023-09-26

我看到有几个人问了这个问题的部分内容，并尝试了各种解决方案，但似乎都不起作用。我不确定是组合还是我项目中的其他原因导致它不起作用。

在我的项目中，我有各种页面显示类似的DataTables。我想把这些表的初始化放在一个文件中，以避免重复。但我想传入一些参数，以说明例如列标题之间的细微差异。让它复杂化的是，初始化在文档上完成并不奇怪。准备。

我尝试过的事情：
通过SRC属性将vars传递给JavaScript
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);

也许我说的都错了，有一种不同/更简单的方法可以在文档期间将参数传递到脚本（文件）。ready

最简单的方法是（假设变量名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;

除了迄今为止提出的其他出色的解决方案外，还有一个不同的选择，那就是将您需要定义的变量放在HTML中，例如数据属性、

既然你无论如何都在使用jQuery，那么这样的东西就会起作用：

$(document).ready(function() {
  var test_var = $('.data-container').data('test-var');
  alert('Don''t be alarmed: '+test_var);
});
.data-container {
  display: none;
}
<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>

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

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

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

相反，您可以在将JS文件包含在页面中之前声明变量，然后可以在页面中读取该文件，类似于以下内容：

foo.html

<script>
    var test_var = "Hopefully this has worked";
</script>
<script src="testscript.js"></script>

testscript.js

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

您需要将代码封装在一个函数中：

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>

我认为这应该能解决你的问题。在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);
}

许多人正确回答了我的问题，谢谢大家。我在让它工作时遇到的问题是，我试图将参数传递到的脚本文件位于我的Views/Shared文件夹中，如这里所述，该文件夹已被阻止。

一旦我把我的脚本从Views文件夹中移出，一切都很好。除了上面的答案之外，我发现最简单的是这个

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