Question

我几乎没有javascript的经验，我试图让我的网站从谷歌驱动文件加载一些HTML代码。除了在safari中，这在每个浏览器中都能正常工作。有谁知道如何解决这个问题？

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
$(function() {
$("#leaderboard").load("https://www.googledrive.com/host/0B7VK-PTvOFWwRnVzUUlRX1BQZUU"); 
}); 
</script>

Answer 1

此安全问题称为Same Origin Policy

在计算中，同源策略是一个重要的概念   Web应用程序安全模型。该策略允许运行脚本   源自同一网站的页面 - 方案的组合，   主机名和端口号1 - 访问彼此的DOM没有   具体限制，但阻止访问不同的DOM   sites。1同源策略也适用于XMLHttpRequests   除非服务器提供Access-Control-Allow-Origin（CORS）   头。值得注意的是，WebSockets不受同源策略的约束。

这种机制对现代网络具有特殊意义   广泛依赖HTTP cookie维护的应用程序   经过身份验证的用户会话，因为服务器基于HTTP cookie   显示敏感信息或改变状态的信息   动作。严格区分不相关的内容   必须在客户端维护站点以防止丢失   数据机密性或完整性。

由于此安全问题，jQuery.load函数无法从某些浏览器中的其他域获取内容。并且同样的事情适用于XMLHttpRequests函数。

$('#leaderboard').load('http://google.com'); //May work and may not work!

但您可以使用Jquery.ajax或Jquery.get函数。

$.ajax({
    url: 'http://google.com',
    type: 'GET',
    success: function(res) {
        // your code
    }
});
// Works with $.get too!

Answer 2

尝试

$(function () {
    $.ajax({
        url: window.location.protocol 
             + "//www.googledrive.com/host/0B7VK-PTvOFWwRnVzUUlRX1BQZUU",
        cache: false,
        context: $("#leaderboard"),
        dataType: "html"
    })
    .then(function(data) {
      $(this).html(data)
    }, function(jqxhr, textStatus, errorThrown) {
      console.log(errorThrown)
    });
});

jsfiddle http://jsfiddle.net/qvc27vmq/

另见http://browsershots.org/

简单的JavaScript在Safari中不起作用

2 个答案: