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

问题描述

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

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

示例： 之前开发团队的某个人制作了一个 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”），它总是显示如何销毁（）或停止（）或播放（），而目前我无权访问该文件也不知道路径，我只是要求通过名为 updates-scripts.js 的新 JS 文件进行更新。这也在 codepen 和其他教程中进行了演示。

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

谢谢

解决方法

这可以通过monkeypatching TNS来完成。在库加载之前为 window.tns 添加一个 setter。一旦库加载并分配给窗口，调用 setter，您就可以将一些 else 分配给拦截外部脚本的 window.tns 调用的窗口（您没有任何控制）使用。

然后只需访问传入对象的 .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>