你能选择包含JavaScript的脚本元素吗？ [英] Can you select the script element that included the JavaScript?

问题描述

可能重复：

我如何引用加载当前正在执行的脚本的脚本标记？

有没有办法选择包含特定脚本的脚本元素而不给出它是任何类型的已知属性？

Is there a way to select the script element that included a particular script without giving it a known attribute of any sort?

此示例将提醒窗口对象，因为它是在全局上下文中调用的：

This example will alert the window object because it's being called in the global context:

<script>
  alert(this);
</script>

这个例子不会起作用，因为脚本的名称可能会改变（为方便起见我假设jQuery是包括）：

This example wont work as the name of the script could change (for convenience i'm assuming jQuery is included):

<script type="text/javascript" src="/foo/bar/baz.js"></script>
//baz.js
$('[src^="baz.js"]');

这个例子是次优的，因为它依赖于 id 属性：

This example is sub-optimal as it relies on the id attribute:

<script type="text/javascript" id="foo">
  $('#foo');
</script>

推荐答案

我对此回答自己的问题犹豫不决因为我没有100％的时间可以解决问题的答案，但是我已经解决了足够的错误以获得稳定的解决方案。

I'm hesitant to answer my own question in this case because I don't have an answer that works 100% of the time, but I've ironed out the bugs enough to have a stable solution.

@ Shef的回答是我想要/需要的一半。

@Shef's answer is halfway to what I wanted/needed.

Generic JS Version：

Generic JS Version:

function getActiveScript()
{
  var s;
  s=document.getElementsByTagName('script');
  return s[s.length - 1];
}

上面代码的问题是它将选择最后一个脚本页面无论何时执行。如果调用脚本在页面加载后包含，这是一个主要问题。

The issue with the above code is that it will select the last script on the page no matter when it was executed. This is a major issue if the calling script was included after page load.

因为我无法直接选择 script 元素（除非另一个解决方案出现），如果在页面加载后添加脚本，我宁愿不选择任何内容。

As I can't directly select the script element (unless another solution presents itself), I'd rather not select anything if the script is being added after page load.

function getActiveScript()
{
  var r,s;
  r = document.readyState;
  if ( r && r != 'complete' )
  {
    s = document.getElementsByTagName('script');
    return s.length ? s[s.length - 1] : null;
  }
  return;
}

在新版本中， document.readyState 以确保文档尚未完成加载。此外，在未使用 document.readyState 的浏览器中，它将失败（我想不出任何不使用的浏览器 document.readyState 这些天）。

In the new version, document.readyState is checked to make sure that the document hasn't finished loading. Additionally on browsers where document.readyState isn't used, it will fail out (I can't think of any browsers that don't use document.readyState these days).

这个解决方案的一个警告是可能可以动态地将脚本元素插入到文档的早期部分，然后在 document.readyState 是'完成'。如果脚本要使用此代码，则可能引用了错误的脚本。我还没有检查过这个问题。通常情况下，我使用 document.body.appendChild （或库中的等效文件）添加新的脚本标记，因此 对我来说不是一个大问题。

One caveat to this solution is that it may be possible to dynamically insert a script element into an earlier part of the document, which then gets executed before document.readyState is 'complete'. If the script were to use this code, it could possibly be referencing the wrong script. I haven't checked this issue yet. Typically I add new script tags with document.body.appendChild (or equivalent in a library), so it's not that big an issue to me.

另一个可能的漏洞是，如果在 getActiveScript 。同样，我还没有对它进行测试，但这可能意味着最后选择的脚本评估为与正在执行的脚本不同。

Another possible loophole is if a new script has been appended to document.body before getActiveScript has been called. Again, I haven't tested it, but it may mean that the last selected script evaluates to on that's different than the one being executed.

问的是为什么我想选择当前评估的脚本元素。虽然因为我可以可能会理解，但确实有合理的理由想要使用此功能/功能/ dirty-nasty-hack。

The question was asked of why I wanted to select the currently evaluating script element. Although "Because I can" would probably be understood, I did have a legitimate reason to want to use this feature/functionality/dirty-nasty-hack.

我创建了一个（情侣）jQuery插件来做我原本想要的。

I created a (couple) jQuery plugin(s) to do what I originally wanted.

(function($){
  "use strict";
  $.activeScript = function(){
    var r;
    r=document.readyState;
    return r && r != 'complete' ? $('script:last') : $();
  };
})(jQuery);

jQuery插件：jquery.activescript.plugin.js

_{默认适用于jQuery UI}

(function($){
  "use strict";
  var plugins,d,p,$p;
  d = $.activeScript().data();
  plugins = d.plugins || 'draggable droppable resizable selectable sortable accordion autocomplete button datepicker dialog progressbar slider tabs';
  plugins=plugins.split(' ');
  $(function(){
    while(p=plugins.pop())
    {
      $p=$(d[p+'Selector']);
      if ($p[p])$p[p]();
    }
  });
})(jQuery);

你使用的方式 jquery.activescript.plugin.js 如下：

<script type="text/javascript" src="jquery.activescript.plugin.js"
  data-draggable-selector=".draggable.default"
  data-droppable-selector=".droppable.default"
  data-resizable-selector=".resizable.default"
  data-selectable-selector=".selectable.default"
  data-sortable-selector=".sortable.default"
  data-accordion-selector=".accordion.default"
  data-autocomplete-selector=".autocomplete.default"
  data-button-selector=".button.default"
  data-datepicker-selector=".datepicker.default"
  data-dialog-selector=".dialog.default"
  data-progressbar-selector=".progressbar.default"
  data-slider-selector=".slider.default"
  data-tabs-selector=".tabs.default"></script>

这样您就可以在语义上将默认插件绑定到页面而无需在JS文件。如果需要非默认值，你应在JS文件中删除，所以我没有添加任何指定选项的机制（虽然有些插件可以真正使用它）。

This would allow you to semantically tie in your default plugins to your page without having to muck about in a JS file. If non-defaults are needed, you should muck about in a JS file, so I haven't added any mechanism for specifying options (although a few plugins could really use it).

独立插件可以使用相同的基本 activescript 机制来更轻松地覆盖默认值。

This same basic activescript mechanism could be used by standalone plugins to have an easier way of overriding defaults.

这篇关于你能选择包含JavaScript的脚本元素吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！