120

我阅读了 Nic 博士的教程DIY 小部件 - 如何将您的站点嵌入到另一个站点以获取 XSS 小部件。

我正在寻找一种将参数传递给脚本标签的方法。例如,要进行以下工作:

<script src="http://path/to/widget.js?param_a=1&amp;param_b=3"></script>

有没有办法做到这一点?


两个有趣的链接:

4

13 回答 13

156

我很抱歉回答了一个超级老问题,但是在花了一个小时与上述解决方案搏斗后,我选择了更简单的东西。

<script src=".." one="1" two="2"></script>

在上面的脚本中:

document.currentScript.getAttribute('one'); //1
document.currentScript.getAttribute('two'); //2

比 jquery OR url 解析容易得多。

您可能需要来自@Yared Rodriguez 对 IE 的回答中的 doucment.currentScript 的 polyfil:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();
于 2015-09-15T15:26:23.167 回答
71

最好在 html5 5 数据属性中使用特性

<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>

在脚本文件http://path.to/widget.js中,您可以通过这种方式获取参数:

<script>
function getSyncScriptParams() {
         var scripts = document.getElementsByTagName('script');
         var lastScript = scripts[scripts.length-1];
         var scriptName = lastScript;
         return {
             width : scriptName.getAttribute('data-width'),
             height : scriptName.getAttribute('data-height')
         };
 }
</script>
于 2014-01-21T09:18:45.183 回答
18

知道了。有点hack,但效果很好:

var params = document.body.getElementsByTagName('script');
query = params[0].classList;
var param_a = query[0];
var param_b = query[1];
var param_c = query[2];

我将脚本标签中的参数作为类传递:

<script src="http://path.to/widget.js" class="2 5 4"></script>

这篇文章帮助很大。

于 2011-03-13T23:12:11.107 回答
16

另一种方法是使用元标记。任何应该传递给 JavaScript 的数据都可以像这样分配:

<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />

然后可以像这样从元标记中提取数据(最好在 DOMContentLoaded 事件处理程序中完成):

var data1 = document.getElementsByName('yourdata')[0].content;
var data2 = document.getElementsByName('moredata')[0].content;

使用 jQuery 或类似的东西绝对没有麻烦,不需要破解和变通办法,并且可以与任何支持元标记的 HTML 版本一起使用......

于 2017-08-31T08:11:34.787 回答
12

JQuery 有一种将参数从 HTML 传递到 javascript 的方法:

把它放在myhtml.html文件中:

<!-- Import javascript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Invoke a different javascript file called subscript.js -->
<script id="myscript" src="subscript.js" video_filename="foobar.mp4">/script>

在同一目录中创建一个subscript.js文件并将其放在那里:

//Use jquery to look up the tag with the id of 'myscript' above.  Get 
//the attribute called video_filename, stuff it into variable filename.
var filename = $('#myscript').attr("video_filename");

//print filename out to screen.
document.write(filename);

分析结果:

加载 myhtml.html 页面会在屏幕上打印“foobar.mp4”。名为 video_filename 的变量从 html 传递到 javascript。Javascript 将其打印到屏幕上,并显示为嵌入到父级的 html 中。

jsfiddle 证明上述方法有效:

http://jsfiddle.net/xqr77dLt/

于 2015-01-25T20:12:55.517 回答
8

如果您使用的是 jquery,您可能需要考虑他们的数据方法。

我使用了类似于您在回复中尝试的内容,但如下所示:

<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>

您还可以创建一个函数,让您直接获取 GET 参数(这是我经常使用的):

function $_GET(q,s) {
    s = s || window.location.search;
    var re = new RegExp('&'+q+'=([^&]*)','i');
    return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s='';
}

// Grab the GET param
var param_a = $_GET('param_a');
于 2011-03-13T23:30:51.320 回答
8

创建一个包含参数列表的属性,如下所示:

<script src="http://path/to/widget.js" data-params="1, 3"></script>

然后,在您的 JavaScript 中,将参数作为数组获取:

var script = document.currentScript || 
/*Polyfill*/ Array.prototype.slice.call(document.getElementsByTagName('script')).pop();

var params = (script.getAttribute('data-params') || '').split(/, */);

params[0]; // -> 1
params[1]; // -> 3
于 2019-03-10T18:57:35.333 回答
6

感谢 jQuery,一个简单的 HTML5 兼容解决方案是创建一个额外的 HTML 标记,如 div,来存储数据。

HTML

<div id='dataDiv' data-arg1='content1' data-arg2='content2'>
  <button id='clickButton'>Click me</button>
</div>

JavaScript

$(document).ready(function() {
    var fetchData = $("#dataDiv").data('arg1') + 
                    $("#dataDiv").data('arg2') ;

    $('#clickButton').click(function() {
      console.log(fetchData);
    })
});

上面代码的现场演示:http ://codepen.io/anon/pen/KzzNmQ?editors=1011#0

在现场演示中,可以看到 HTML5 data-* 属性中的数据被连接并打印到日志中。

来源:https ://api.jquery.com/data/

于 2016-03-09T00:44:07.783 回答
5

这是一个非常古老的线程,我知道,但是如果有人在寻找解决方案后到达这里,这也可能会有所帮助。

基本上我使用 document.currentScript 从我的代码运行的地方获取元素,并使用我正在寻找的变量的名称进行过滤。我使用名为“get”的方法扩展了 currentScript,因此我们将能够使用以下方法获取该脚本中的值:

document.currentScript.get('get_variable_name');

通过这种方式,我们可以使用标准 URI 来检索变量,而无需添加特殊属性。

这是最终代码

document.currentScript.get = function(variable) {
    if(variable=(new RegExp('[?&]'+encodeURIComponent(variable)+'=([^&]*)')).exec(this.src))
    return decodeURIComponent(variable[1]);
};

我忘记了 IE :) 它再简单不过了……好吧,我没有提到 document.currentScript 是 HTML5 属性。它还没有包含在不同版本的 IE 中(我测试到 IE11,它还没有)。为了兼容 IE,我将这部分添加到代码中:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

我们在这里所做的是为 IE 定义一些替代代码,它返回当前脚本对象,在解决方案中需要从 src 属性中提取参数。这不是 IE 的完美解决方案,因为存在一些限制;如果脚本是异步加载的。较新的浏览器应包含“.currentScript”属性。

我希望它有所帮助。

于 2015-05-15T05:30:16.430 回答
5

这是jQuery 3.4的解决方案

<script src="./js/util.js" data-m="myParam"></script>
$(document).ready(function () {
    var m = $('script[data-m][data-m!=null]').attr('data-m');
})
于 2020-07-16T05:08:34.037 回答
3

将您需要的值放在其他脚本可以检索它们的地方,例如隐藏输入,然后在初始化新脚本时从它们的容器中提取这些值。您甚至可以将所有参数作为 JSON 字符串放入一个隐藏字段中。

于 2011-03-13T21:07:30.863 回答
3

我想要尽可能多地支持旧浏览器的解决方案。否则我会说currentScriptdata 属性方法将是最时尚的。

这是这些方法中唯一没有在这里提出的。特别是,如果由于某种原因您有大量数据,那么最好的选择可能是:

本地存储

/* On the original page, you add an inline JS Script.
 * If you only have one datum you don't need JSON:
 * localStorage.setItem('datum', 'Information here.');
 * But for many parameters, JSON makes things easier: */
var data = {'data1': 'I got a lot of data.',
            'data2': 'More of my data.',
            'data3': 'Even more data.'};
localStorage.setItem('data', JSON.stringify(data));

/* External target JS Script, where your data is needed: */
var data = JSON.parse(localStorage.getItem('data'));
console.log(data['data1']);

localStorage 具有完整的现代浏览器支持,并且对旧浏览器的支持也出奇的好,可以追溯到 IE 8、Firefox 3,5 和 Safari 4 [11 年前] 等。

如果您没有大量数据,但仍需要广泛的浏览器支持,那么最好的选择可能是:

元标签 [by Robidu]

/* HTML: */
<meta name="yourData" content="Your data is here" />

/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

这样做的缺陷是,将元标记 [直到 HTML 4] 放置在 head 标记中的正确位置,您可能不希望将这些数据放在那里。为避免这种情况,或将元标记放在正文中,您可以使用:

隐藏段落

/* HTML: */
<p hidden id="yourData">Your data is here</p>

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

要获得更多浏览器支持,您可以使用 CSS 类而不是 hidden 属性:

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>
于 2019-09-14T00:08:57.790 回答
2

如果传递不带名称的参数会更简单,就像函数调用一样。

在 HTML 中:

<script src="abc.js" data-args="a,b"></script>

然后,在 JavaScript 中:

const args=document.currentScript.dataset.args.split(',');

现在 args 包含数组 ['a','b']。这假设同步脚本调用。

于 2021-06-26T15:09:52.583 回答