如何在不包含包装器语法的情况下将函数注入脚本标记?
How can I inject a function into a script tag without including the wrapper syntax?
在这种奇怪的情况下,我需要将一个 JS 函数转换为一个字符串,然后将该字符串转换为一个动态生成的 <script>
标记(使用类型 javascript/worker
以免被执行)。
我正在编写用户脚本,注入代码以在两个第三方站点之间创建共享网络工作者。关于用户脚本的事情是你通常只想使用一个文件来实现脚本的功能,而网络工作者喜欢为工作者使用一个单独的 JS 文件。嗯there's a way around that using a Blob。但是,请记住我只使用脚本文件,而不是用户脚本的 HTML 文件,所以我想将这部分(共享工作代码)作为函数存储在我的脚本中:
var worker = function() {
self.addEventListener('connect', function(e) {
var port = e.ports[0];
port.addEventListener('message', function(e) {
var message = e.data;
port.postMessage(message);
});
port.start();
});
};
然后在上面使用 toString()
这样我就可以将它注入到第三方页面中动态生成的脚本标签中,所以它最终是这样的,脚本没有调用任何额外的文件:
<script id="worker1" type="javascript/worker">
self.addEventListener('connect', function(e) {
var port = e.ports[0];
port.addEventListener('message', function(e) {
var message = e.data;
port.postMessage(message);
});
port.start();
});
</script>
但是使用 toString()
方法会导致包含单词 function
,如本例所示:
Remember I was going to append the function to a script tag with type
javascript/worker
instead of text/javascript
so the function
wouldn't be executed until it was converted to a blob and used as a
file source for the worker, but here I'm going to use
text/javascript
so you can see the error when it executes.
var worker = function() {
self.addEventListener('connect', function(e) {
var port = e.ports[0];
port.addEventListener('message', function(e) {
var message = e.data;
port.postMessage(message);
});
port.start();
});
};
var func = worker.toString();
var script = document.createElement("script");
script.type = "text/javascript";
script.id = "worker1";
$("head").append(script);
$('body').append(script);
$('#worker1').append(func);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Just so you can understand what I'm doing, because it might be confusing,
a function like this would then convert the above
non-executed script tag into a Blob and use that instead of an
external file to create the shared worker:
var blob = new Blob([document.querySelector('#worker1').textContent],
{ type: "text/javascript" });
var sharedWorker = new SharedWorker(window.URL.createObjectURL(blob));
那么,如何在不包含函数包装器语法的情况下将函数的内容注入脚本标记(function (){
)?
您可以使用字符串的方法来执行此操作:
我认为这可以帮助你或类似的东西,删除函数名称。
function test(){
console.log('TEST TEST');
}
var fBody = test.toString()
var index = fBody.indexOf('{');
var functionBodyAsArray = fBody.substring(index + 1);
functionBodyAsArray = functionBodyAsArray.substring(0, functionBodyAsArray.length - 1);
console.log(functionBodyAsArray );
在这种奇怪的情况下,我需要将一个 JS 函数转换为一个字符串,然后将该字符串转换为一个动态生成的 <script>
标记(使用类型 javascript/worker
以免被执行)。
我正在编写用户脚本,注入代码以在两个第三方站点之间创建共享网络工作者。关于用户脚本的事情是你通常只想使用一个文件来实现脚本的功能,而网络工作者喜欢为工作者使用一个单独的 JS 文件。嗯there's a way around that using a Blob。但是,请记住我只使用脚本文件,而不是用户脚本的 HTML 文件,所以我想将这部分(共享工作代码)作为函数存储在我的脚本中:
var worker = function() {
self.addEventListener('connect', function(e) {
var port = e.ports[0];
port.addEventListener('message', function(e) {
var message = e.data;
port.postMessage(message);
});
port.start();
});
};
然后在上面使用 toString()
这样我就可以将它注入到第三方页面中动态生成的脚本标签中,所以它最终是这样的,脚本没有调用任何额外的文件:
<script id="worker1" type="javascript/worker">
self.addEventListener('connect', function(e) {
var port = e.ports[0];
port.addEventListener('message', function(e) {
var message = e.data;
port.postMessage(message);
});
port.start();
});
</script>
但是使用 toString()
方法会导致包含单词 function
,如本例所示:
Remember I was going to append the function to a script tag with type
javascript/worker
instead oftext/javascript
so the function wouldn't be executed until it was converted to a blob and used as a file source for the worker, but here I'm going to usetext/javascript
so you can see the error when it executes.
var worker = function() {
self.addEventListener('connect', function(e) {
var port = e.ports[0];
port.addEventListener('message', function(e) {
var message = e.data;
port.postMessage(message);
});
port.start();
});
};
var func = worker.toString();
var script = document.createElement("script");
script.type = "text/javascript";
script.id = "worker1";
$("head").append(script);
$('body').append(script);
$('#worker1').append(func);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Just so you can understand what I'm doing, because it might be confusing, a function like this would then convert the above non-executed script tag into a Blob and use that instead of an external file to create the shared worker:
var blob = new Blob([document.querySelector('#worker1').textContent], { type: "text/javascript" }); var sharedWorker = new SharedWorker(window.URL.createObjectURL(blob));
那么,如何在不包含函数包装器语法的情况下将函数的内容注入脚本标记(function (){
)?
您可以使用字符串的方法来执行此操作:
我认为这可以帮助你或类似的东西,删除函数名称。
function test(){
console.log('TEST TEST');
}
var fBody = test.toString()
var index = fBody.indexOf('{');
var functionBodyAsArray = fBody.substring(index + 1);
functionBodyAsArray = functionBodyAsArray.substring(0, functionBodyAsArray.length - 1);
console.log(functionBodyAsArray );