javascript - 通过调用 URL 传递 JavaScript 参数

Question

我有一个在网站上嵌入小部件的 JavaScript 文件。我希望能够使用以下形式的 URL 调用此小部件:

http://domain.com/widget.js?variable=test

在 JS 脚本中，我希望能够读取 URL 参数“变量”的值，在本例中为“测试”，并在 JS 输出的 HTML 代码中使用它。我尝试使用 window.location 但它返回的是主网页的 URL，而不是被调用以加载脚本的 URL。

知道在传递的参数中读取 JS 代码是什么样子的吗？提前致谢!

Answer 1

遍历所有<script>元素使用 getElementsByTagName .通过检查 domain.com/widget.js 找到标识您的脚本的脚本(例如，通过查找 src )属性。从 src 中提取查询字符串属性。

例子:

function getScriptQuery(identifier) {
 var scripts = document.getElementsByTagName('script'),
     i, curScript;

 for (i = 0; i < scripts.length; ++i) {
  curScript = scripts[i];

  if (curScript.src.match(identifier)) {
   return (curScript.src.match(/\?.*/) || [undefined])[0];
  }
 }
}

alert(getScriptQuery('widget.js'));

---

有两种常见的替代方法可以解决将数据传递给脚本的原始问题。

您可以在脚本中引用一个已知的全局变量，并让调用 HTML 定义该变量:

<script type="text/javascript">var MyWidgetData={foo:'bar'};</script>
<script src="http://my.widgeteer.net/widget.js"></script>

// widget.js:

alert(MyWidgetData.foo);

您还可以将脚本包装为命名函数并让调用 HTML 调用该函数:

<script src="http://my.widgeteer.net/widget.js"></script>
<script type="text/javascript">MyWidget({foo:'bar'});</script>

// widget.js:

function MyWidget(data) {
    alert(data.foo);
}