使用不同的数据属性值多次嵌入相同的 Web 小部件答案

【问题标题】：Embed same web widget multiple times with different data attribute values使用不同的数据属性值多次嵌入相同的 Web 小部件
【发布时间】：2016-01-14 01:18:17
【问题描述】：

我想创建一个可以在同一页面上多次嵌入但具有不同数据属性值的网络小部件，这样我就可以根据数据属性值显示不同的数据。

比如我想多次嵌入mywidget.js文件如下：

<body>
    <div>
        <script src="script/mywidget.js" data-sport="soccer" id="widget-soccer">
        </script>
    </div> 

    <div>
        <script src="script/mywidget.js" data-sport="tennis" id="widget-tennis">
        </script>
    </div> 
</body>

我的问题是，在 mywidget.js 的代码中，我如何确定正确的脚本标签引用并读取它的数据属性，以便我可以使用该值从 Web 服务中获取相应的数据。我只使用 jquery 和 javascript。

我希望小部件也可以嵌入到其他用户的网站上，所以他们所做的只是使用脚本标签嵌入并传入所需的数据属性值，而无需在他们网站上的任何地方添加任何额外的东西。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这并不是一个非常好的方法，因为它非常不灵活。但是考虑到<script> 标签，如果没有延迟，会在执行时停止对文档的解析，当前脚本标签将是 DOM 中的最后一个标签；因此您可以使用以下方法在脚本中获取当前运动：

var sport = $('script').last().data('sport');

但是，最好在外部 JavaScript 文件中定义一个函数，然后在需要实例化小部件时调用它（编辑：就像在 Lee Taylor 的回答中一样）。

【讨论】：

【解决方案2】：

你为什么不做类似的事情：

<head>
    <script src="script/mywidget.js"></script>
</head>

<body>
    <div><script>createMyWidget({sport : "soccer"} );</div> 

    <div><script>createMyWidget({sport : "tennis"} );</div> 
</body>

【讨论】：

【解决方案3】：

我不认为你可以。我知道这不是很好，但我会尝试：

<div><script>sport = "soccer";</script><script src="script/mywidget.js"  id="widget-soccer"></script></div> 

<div><script>sport = "tennis";</script><script src="script/mywidget.js" id="widget-tennis"></script></div>

并在 mywidget.js 中使用运动

另一种方法可能是 myscript.js 实际上是一个动态“页面”，假设使用 php，那么您可以使用 src="script/mywidget.js?sport=swimming"，然后在 php 中打印：

sport = "<?php echo addcslashes($_GET['sport'], '"'); ?>";

但更好的是：

<script src="script/mywidget.js"></script>    
<div><script>showWidget("soccer");</script></div>
<div><script>showWidget("basketball");</script></div>

【讨论】：

【解决方案4】：

我认为您可以使用 jQuery 查找所有带有 src="script/mywidget.js" 或其他内容的脚本标签

$('script[src="script/mywidget.js"]')

然后您将拥有一组脚本标签，您可以使用 jQuery 的 .data() 方法循环并访问 data 属性。

【讨论】：