来自脚本文件外部的 JS 访问方法

Question

这可能是一个愚蠢的问题，但我真的需要解决一个小的滑块问题，因为它是自动播放的。

问题是，有没有办法从脚本文件本身之外访问已经实例化的对象？注意：也不知道它的变量/常量名称。

示例：以前开发团队的人做了一个 TNS / Tiny Slider 的画廊，如下所示：

var someName = tns({
  container: '.carousel',
  items: 3,
  autoplay: true,
});

基本上它只是从那个容器创建一个 tns 实例。在浏览器中，它显示如下内容

<div class="carousel tns-slider">
  <div class="tns-item">...</div>
  <div class="tns-item">...</div>
  ...
</div>

问题是，构建 someName tns 的代码来自外部 url，我不知道它在哪里。另外，我不知道“someName”变量的实际名称是什么，所以它已经声明在那里实例化并正常工作，我只需要禁用自动播放。

我试过 https://github.com/ganlanyuan/tiny-slider

的文档

但是，如果我知道实例化变量的名称（“someName”），它总是显示如何 destroy() 或 stop() 或 play() 而目前我没有任何访问该文件的权限也不知道路径，我只是要求通过名为 updates-scripts.js 的新 JS 文件进行更新。这也在 codepen 和其他教程中进行了演示。

我有什么方法可以通过 jQuery('.carousel') 或 documentQuerySelector 访问它的方法吗？

谢谢

Answer 1

这可以通过 monkeypatching TNS 来完成。在加载库之前为 window.tns 添加一个 setter。一旦库加载并分配给 window，调用 setter，您可以将 else 分配给拦截 [=12] 的 window =]调用外部脚本（您无法控制）使用。

然后简单地访问传入的对象的.container 属性，并用它做任何你需要做的事情：

// Example code from the external script you have no control over
var slider = tns({
  container: '.my-slider',
  items: 3,
  slideBy: 'page',
  autoplay: true
});

<script>
// Insert your monkeypatching script here, before anything else
Object.defineProperty(window, 'tns', {
  set(tns) {
    // Delete this setter
    delete window.tns;
    window.tns = function(...args) {
      const container = args[0]?.container;
      console.log('container:', container);
      return tns.apply(this, args);
    };
  },
  configurable: true
});
    
</script>


<script src="https://cdn.jsdelivr.net/npm/tiny-slider@2.9.3/dist/tiny-slider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
<div class="my-slider">
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</div>

来自脚本文件外部的 JS 访问方法

JS Access Method from outside of script file

html

javascript

jquery

tns

slider