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＆amp; 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帖子，但他们没有描述我的问题：

Ways to circumvent the same-origin policy
XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless)
Cross-site 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策略。

Answer 2

好的，做了很多摆弄，浪费了很多时间。但我明白了。我的上一个答案中的解决方案适用于Chrome和Mozilla。但它不适用于受祝福的IE，因为IE不会触发onload事件：它认为它已经处理了这个文件中的所有onloads，你不能让它做另一个。但是，IE非常乐意使用JQuery getScript函数加载文件（由于ccess-control-allow-origin策略，Chrome不允许这样做） - 您需要使用JQuery库才能使用它。所以这就是我最终的结果：

function getMyText(){
    var url='mylocalfile.js';
    if (jQuery.support.scriptEval) { 
        var old = document.getElementById('uploadScript');  
        if (old != null) {  
             old.parentNode.removeChild(old);  
             delete old;  
            } 
        var head = document.getElementsByTagName("head")[0]; 
        var script = document.createElement('script');
        script.id = 'uploadScript';
        script.type = 'text/javascript';
        script.onload = refresh_page; 
        script.src = url; 
        head.appendChild(script);  
    } else {
       $.getScript(url,function(){
            refresh_page();
      });
     }
}

function refresh_page() {
    alert(mytext);
}

在所有这些中，mylocaltext.js将我的所有html定义为变量mytext的内容。丑陋，但它的工作原理。对于在DOM发生更改时触发onload事件的智能浏览器，jQuery.support.scriptEval为true。 IE没有，所以将它发送到.getScript; Chrome和其他人这样做，因此以另一种方式发送它们。无论如何，这适用于本地文件。

Answer 3

有趣，但如何使用相同的技术加载整个HTML文件？你的类似问题 - 我有数百个HTML文件，我想要包含在一个网页中，具体取决于用户想要看到的内容。我似乎可以使用这种技术加载整个HTML页面，如：

script.id = 'uploadScript';
script.type = 'text/html';
script.src = url; 
script.onload = refresh_page; 
head.appendChild(script);

即告诉它在HTML中加载。我可以从控制台看到它正在将它加载到页面中，我收到一条消息“资源解释为脚本但是使用MIME类型text / html传输”。但是我无法想出任何方法来获取加载的HTML并保存在脚本中

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

3 个答案: