使用不同的数据属性值多次嵌入同一个web小部件

Embed same web widget multiple times with different data attribute values

本文关键字：同一个 web 小部 数据属性      更新时间：2023-09-26

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

例如，我想多次嵌入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。

我希望这个小部件也能嵌入到其他用户的网站上，这样他们所做的就是只使用脚本标记进行嵌入，并传递所需的数据属性值，而不需要在他们的网站上添加任何额外的内容。

这不是一个很好的方法，因为它非常不灵活。但是，假设<script>标记在未延迟时会在执行时停止对文档的解析，则当前脚本标记将是DOM中的最后一个；因此，您可以使用以下内容在脚本中获取当前的运动：

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

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

为什么不做一些类似的事情：

<head>
    <script src="script/mywidget.js"></script>
</head>
<body>
    <div><script>createMyWidget({sport : "soccer"} );</div> 
    <div><script>createMyWidget({sport : "tennis"} );</div> 
</body>

我认为你做不到。我知道它不是那么好，但我会尝试：

<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 中使用sport

另一种方法可能是，myscript.js实际上是一个动态的"页面"，比方说使用php，然后可以使用src="script/mywidget.js？sport=swing"，在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>

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

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

然后，您将获得一组脚本标记，您可以循环使用这些标记，并使用jQuery的.data()方法访问data属性。

相关文章：