21

让我解释。我正在开发一个 javascript 应用程序来帮助人们开发网站。我不会明确介绍它的作用，只知道它通过将其 html/内联 css 界面叠加在正在开发的网站上并提供各种工具（例如跟踪图像和代码缩小器）来工作。

我将它作为 .js 文件存储在服务器上。访问我的应用程序所要做的就是将一小段 html 复制并粘贴到他们的页面上以使用它，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="www.example.com/application.js">
<div class="application"></div>

然后使用 jquery 的 .html() 函数将接口的 html 和内联 css 插入到“应用程序”div 中。

这一切都完美无缺。

除了一件事。加载时间。当用户开发他们的网站时，他们将不断刷新他们的页面，这导致他们不得不等待大约 3 秒（随着时间的推移，这很烦人）才能加载应用程序的界面。

当然，如果打开了浏览器的缓存，问题就消失了，但是如果您正在开发一个站点，您将希望禁用您的缓存！这是一个难题。

然后我想用本地存储对象来保存界面'svg图形的字符串，然后.html()这些字符串变成内联css。这是一个复杂的解决方法，但只有开发人员会使用这个工具。这不是最终用户的事情。它也很漂亮，但问题是，浏览器仍然需要下载脚本才能知道访问本地存储的图像！处理器速度不是瓶颈，而是带宽。

所以我正在考虑将脚本本身存储在本地存储对象中，并使用一个很小的初始化脚本来运行它。

初始化脚本将简单地从本地存储对象中检索脚本作为字符串，对其进行相应的解析，然后运行它。

重申我的问题，运行它是我不能做的部分！我可以通过 .html(script) 将脚本插入到页面中，但是我该如何运行它呢？

4

3 回答 3

20

虽然 usingeval(myScript)是最直接的方法，但我更喜欢这个：

var script = document.createElement('script');
script.src = 'data:text/javascript,' + encodeURI(myScript);
script.onload = function() {
  //optional callback
};
document.body.appendChild(script);

这是使用数据 uri 作为源插入实际的脚本标签。这样，它将出现在开发工具的资源选项卡上的“脚本”下。当脚本加载时，将执行数据 uri（您的代码）。

于 2013-08-20T21:04:46.227 回答
7

这里有两种方法：

方法一：eval()

eval(localStorage.myCode);

方法二：Function构造函数

new Function(localStorage.myCode)();

以下是 jsfiddle 演示，它们都可以正常工作：

方法一：http: //jsfiddle.net/markasoftware/3BkAV/

方法二：http: //jsfiddle.net/markasoftware/j6JAz/

于 2013-08-21T03:33:47.517 回答
4

你只需要使用 JavaScript 的eval函数。

您最终可以编写如下内容：

localStorage.myCode = "alert('just a test')";
eval(localStorage.myCode);

您可以检查您的代码是否像这样存储：

if (!localStorage.myCode) {
    // local storage code not exists, load from somewhere else
} else {
    // perform the eval using the code from local storage
}

我在 Chrome 中测试了这段代码并且工作正常。我看到的唯一问题是您强迫您的用户仅使用支持本地存储的浏览器。

这是浏览器支持：

  • 浏览器 8+
  • 火狐 3.5+
  • 野生动物园 4+
  • 铬 4+
  • 歌剧 10.5+
于 2013-08-20T20:55:27.230 回答