绕过本地文件系统上的Chrome Access-control-allow-origin？

Question

我已经在SO上阅读了其他相同的原始策略主题,但我还没有看到任何与本地文件系统相关的解决方案.

我有一个网络应用程序(在一个松散的意义上)必须在本地服务.我试图在用户加载页面后加载大量数据,具体取决于他们在网页上做了什么.在Firefox 3.5和IE8中,我可以使用jQuery的AJAX()和GetScript()方法来执行此操作,但在Chrome中由于同源策略而失败.

XMLHttpRequest无法加载file://test/testdir/test.js.原产地null是不允许的by Access-Control-Allow-Origin.

这种情况发生在我做一些简单的事情时

$.getScript("test.js");

这在IE和Firefox中运行良好.

在阅读了大量有关此内容之后,我决定尝试直接写入文档的头部.在Chrome的控制台中,我键入了以下内容:

var head = document.getElementsByTagName("head")[0];  
var script =document.createElement('script');   
script.id = 'uploadScript';  
script.type = 'text/javascript';  
script.src = "upload.js";   
head.appendChild(script);

这在粘贴到控制台中时工作正常 - <script...test.js</script>元素被添加到头部,评估,并且内容被加载到DOM中.

我认为这是成功的,直到我将此代码放入函数调用.从函数调用时,相同的确切代码会将元素添加到但不会评估JavaScript文件.我无法弄清楚为什么.如果我使用Chrome的控制台停止执行它正在添加元素的方法并运行上面的代码,它就不会对它进行评估.但是,如果我取消暂停执行并运行完全相同的代码(在控制台窗口中粘贴它),它就可以工作.我无法解释这一点.以前有人处理过这个吗？

我已经阅读了以下SO帖子,但他们没有描述我的问题:

绕过同源策略的方法
XMLHttpRequest Origin null不允许Access-Control-Allow-Origin for file:///到file:///(无服务器)
跨站点XMLHttpRequest

同样,我最后的办法是在网页加载时加载所有数据 - 这可能导致加载网页最多延迟10秒,这对90%的应用用户来说是不必要的.

感谢您的任何建议/选择!

Answer 1

我想我已经明白了。

我真正需要做的就是在我的<script>标签中添加一个回调。最终代码：

我有一个名为 next 的元素...因此，在$("#next").click()函数中我有以下代码。仅当他们单击“下一步”时才会执行此操作。

//remove old dynamically written script tag-    
       var old = document.getElementById('uploadScript');  
   if (old != null) {  
     old.parentNode.removeChild(old);  
     delete old;  
   } 

   var head = document.getElementsByTagName("head")[0];  
   script = document.createElement('script');  
   script.id = 'uploadScript';  
   script.type = 'text/javascript';  
   script.src = 'test/' + scope_dir + '/js/list.js';  
   script.onload = refresh_page;    
   head.appendChild(script);  


function refresh_page(){  
   //perform action with data loaded from the .js file.  
}  

这似乎有效，并且允许 Chrome 在本地文件系统上动态加载 .js 文件，同时规避我在尝试使用 jQuery 函数时遇到的 access-control-allow-origin 策略。