Question

在HTML页面中，我想使用data- *属性来配置脚本，例如：

<script src="someOtherScript.js" data-target-element="elementId"></script>

然后，在脚本文件中，我想要做的是沿着这些方向：

(function() {
    var id = '' // Get the value of data-target-element here
    // [...Run some code that uses the id ...]
})

我想要的是它可以在任何页面上工作，所以我可以声明性地配置脚本，有点像这样：

<script src="SomeWidget.js" data-target-element="element1"></script>
<script src="SomeWidget.js" data-target-element="element2"></script>
<script src="SomeWidget.js" data-target-element="element3"></script>

Answer 1

您可能希望每个窗口小部件类型都有自己的data-widgetType属性，如：

<script src="SomeWidget.js" data-someWidget  data-target-element="element1"></script>
<script src="anotherWidget.js" data-anotherWidget data-target-element="element2"></script>

然后每个小部件脚本都会查找它自己的属性。这似乎是倒退的，而不是非常动态，因为如果计划使用ID，或者必须在脚本标记和标记中生成类，那么您必须预先在页面上预先确定小部件将操作的所有元素。

将data-widgetType置于脚本将作用于的元素的标记中更有意义。然后您可以随意添加或删除html，而不必跟踪脚本标记的任何标识符。

Answer 2

以下代码仅在您的脚本直接嵌入HTML页面而没有async / defer属性时才有效。

var scripts = document.scripts || document.getElementsByTagName('script');
var me = scripts[scripts.length - 1];
var target = me.getAttribute('data-target-element');

在script元素上使用html data- *属性来配置引用的脚本文件

2 个答案: