Question

我有一个需要加载其他资源的JS Web组件（特别是src加载到DOM中的iframe，但这对于具有相对路径的任何资源都是一个问题）。

需要相对于调用页面指定此资源，我可以从window.location轻松获取该资源。

但是，它需要指向src的文件是相对于正在执行的JS文件的文件，而作为那个组件，我无法确定它在哪里将是。

所以：

example.com/index.html 
  |__> {unknown path}/web-component.js
  |__> {unknown path}/resource.html <-- I want to get this

该组件可能位于node_modules或bower_components或webpackOutput或任何位置，但其创建的DOM需要指向与其提供的位置相同的位置，而不是页面那是在执行它。

由于此代码位于网络组件document.currentScript null，document.getElementsByTagName('script')可能不包含该组件。

Answer 1

我有一个潜在的解决方案，但它既有潜在的浏览器兼容性又有性能问题。

想法是new Error().stack包括执行文件的路径。

因此...

// Get stack string
const stack = new Error().stack.split('at');

// Get the last entry
const scriptPath = stack[stack.length - 1].trim();

// The component will share the path up to the last slash
const componentPath = scriptPath.substring(0, scriptPath.lastIndexOf('/'));

它依赖于堆栈的格式，堆栈的内容以及new Error()在加载时不会导致任何性能问题，因此欢迎使用更好的方法获得答案！

获取当前JS Web组件的路径

1 个答案: