从 HTML 中的脚本源文件获取 javascript url 参数答案

【问题标题】：get javascript url parameter from script source file in HTML从 HTML 中的脚本源文件获取 javascript url 参数
【发布时间】：2014-02-20 21:21:36
【问题描述】：

我的HTML块如下，

<html>
<title>Example</title>
<head>
</head>
<body>
        <h2>Profile Photo</h2>
    <div id="photo-container">Photo will load here</div>
    <script type='text/javascript' src='http://example.com/js/coverphoto.js?name=johndoe'></script>
</body>
</html>

我已将此文件保存为test.html。在 JavaScript 源代码中，名称将是动态的。我想在coverphoto.js 中收集名称。在coverphoto.js中试过，

window.location.href.slice(window.location.href.indexOf('?') + 1).split('&')

但它只获取 html 文件名 (test.html)。如何在coverphoto.js 中从http://example.com/js/coverphoto.js?name=johndoe 检索名称密钥？

【问题讨论】：

标签： javascript get url-parameters

【解决方案1】：

您可以使用堆栈跟踪技术。
这种技术将检测运行脚本的 JS 文件的来源，它不依赖于您注入脚本的方式。它可以动态注入（ajax）或任何你能想到的方法。

只需在您的 JS 文件中使用以下代码：

const STACK_TRACE_SPLIT_PATTERN = /(?:Error)?\n(?:\s*at\s+)?/;
const STACK_TRACE_ROW_PATTERN1 = /^.+?\s\((.+?):\d+:\d+\)$/;
const STACK_TRACE_ROW_PATTERN2 = /^(?:.*?@)?(.*?):\d+(?::\d+)?$/;

const getFileParams = () => {
    const stack = new Error().stack;
    const row = stack.split(STACK_TRACE_SPLIT_PATTERN, 2)[1];
    const [, url] = row.match(STACK_TRACE_ROW_PATTERN1) || row.match(STACK_TRACE_ROW_PATTERN2) || [];
    if (!url) {
        console.warn("Something went wrong. This probably means that the browser you are using is non-modern. You should debug it!");
        return;
    }
    try {
        const urlObj = new URL(url);
        return urlObj.searchParams;
    } catch (e) {
        console.warn(`The URL '${url}' is not valid.`);
    }
};

const params = getFileParams();
if ( params ) {
    console.log(params.get('name'));
}

注意： params.searchParams 不适用于 IE 浏览器，您可以使用 params.search。但是，为了你的神经不要。 2020年谁还在用IE，就让他吃苦吧。

【讨论】：

【解决方案2】：

要获取当前 JavaScript 文件的 URL，您可以使用它是当前页面上的最后一个 <script> 元素这一事实。

var scripts = document.getElementsByTagName('script');
var script = scripts[scripts.length - 1];
var scriptURL = script.src;

请注意，此代码仅在直接在 JS 文件中执行时才有效，即不在文档就绪回调或其他任何异步调用的内容中。然后您可以使用任何"get querystring parameter" JS（但请确保替换其中的任何location.search 引用）来提取参数。

我建议您将值放在 data-name 参数中 - 这样您就可以简单地使用例如script.getAttribute('data-name') 获取值。

【讨论】：