Question

我想在页面上多次包含相同的javascript文件。这是因为使用＆＃34;数据＆＃34;定义了不同的变量。 attr获取不同的数据。

这是我的意思的一个例子：

<script id="sc_widget" data-key="rsl2xlfiovx09mkwofom" data-id="jwks97n15dpqge35jfmm" src="http://example.co.uk/sc.js" type="text/javascript"></script>
<script id="sc_widget" data-key="rsl2xlfiovx09mkwofom" data-id="fw8zy246n8vhf5f8du7n" src="http://example.co.uk/sc.js" type="text/javascript"></script>

以上显然会检测并显示脚本中的信息两次，但显示的信息对于两者都是相同的，当它应该不同时。

我的js文件：

var key = document.getElementById("sc_widget").getAttribute("data-key");
    var id = document.getElementById("sc_widget").getAttribute("data-id");
    $.ajax({
        type: "post",
        url: "//example.co.uk/sc.php?key="+ key + "&id="+ id,
        contentType: "application/x-www-form-urlencoded",
        success: function(responseData, textStatus, jqXHR) {
            $('.sc_ouput').html(responseData);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    })

那么无论如何要做到这一点？

Answer 1

id属性必须在HTML文档中唯一。

document.getElementById("sc_widget")将始终获取具有匹配ID的第一个元素。当浏览器尝试从错误中恢复时，其他人将被忽略。

相反，请在文档中获取 last <script>元素。

var scripts = document.querySelectorAll("script");
var script = scripts[scripts.length - 1];
var key = script.dataset.key;
var id = script.dataset.id;

您还需要更改此逻辑：

$('.sc_ouput').html(responseData);

...因为它取代了作为该类成员的第一个元素的内容。

您可能希望使用某些逻辑，例如替换您已找到的script元素的上一个兄弟。

请注意，由于您在脚本中使用了异步函数，因此您需要将其包装在IIFE中以关闭script变量，这样它就不会被下一个变量覆盖Ajax完成之前的脚本。

Answer 2

我想在a上多次包含相同的javascript文件页。

您无需包含和重新包含相同的文件。

您只需要编写一个带有一个或多个参数的函数：

function myFunction(fruit) {

/* [... CODE HERE ...] */

}

如果您想在数据apple上运行一次脚本，在数据banana上运行一次，则可以执行以下操作：

myFunction(apple);
myFunction(banana);

在页面上多次运行相同的javascript文件

2 个答案: