Question

我的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检索名称密钥？

Answer 1

要获取当前JavaScript文件的网址，您可以使用它将成为页面上当前最后一个<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')获取价值。

Answer 2

您可以使用堆栈跟踪技术。
该技术将检测正在运行脚本的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的人，都要让他受苦。

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

2 个答案: