从String加载jQuery插件

时间:2014-02-21 21:50:20

标签: jquery

我想做一些有点hackish的事。

说我在这个变量中有jQuery插件代码:

var script = '!function( some jQuery plugin )(window.jQuery)';

我想加载它。我尝试了eval(脚本)和jQuery.globalEval(脚本)。这是行不通的。如果我在文件中有这个插件代码,我可以做jQuery.getScript(url,callback)。但我只有字符串中的代码。我想过将这个字符串加载到与模拟URL密钥相关联的缓存中,但我不知道是否可能。

有什么建议吗? ......除了“不要这样做”。我知道“eval是邪恶的”口头禅,但想想这是一个学术问题。

脚本变量中代码的主要特征:

序幕:

!function(a){"use strict";

结语:

gister(b)})}}(window.jQuery||window.Zepto);

1 个答案:

答案 0 :(得分:3)

有几种方法可以做到这一点。可以使用eval,但这不是真的可取。使用字符串构造Function()也是如此。以下是两种有用的方法。


反直觉的方法

这个非常整洁。它的作用是你可以从url执行代码(基本上与bookmarklet的工作方式相同)。假设您的扩展名包含此变量:

var scriptData = "$.fn.jQueryExtension = function(){ this.each(function(){/*code*/}); };";

并且您希望将该字符串作为代码运行。一个班轮:

window.location = "javascript:"+scriptData;

使用.html()

将其放入页面

您可以使用jQuery的.html()将其放入页面。它将执行脚本代码。这是一个非常常见的方法来放置一个部分html页面,其中包含从ajax调用返回的脚本(如果确实在代码旁边有一些html,它也会很有用)。假设这是在您的scriptData变量中。

var scriptData = "$.fn.jQueryExtension = function(){ this.each(function(){/*code*/}); };";

将其包装在脚本元素中。

var scriptHtml = "<script>"+scriptData+"</script>";

将它作为html放在dom中。

var scriptDiv = $("<div>").html(scriptHtml);
$("body").append(scriptDiv);

测试这种方法的一种非常简单的方法是从此页面的浏览器控制台执行此代码

var scriptData = "alert('test');";
var scriptHtml = "<script>"+scriptData+"</script>";
var scriptDiv = $("<div>").html(scriptHtml);
$("body").append(scriptDiv);