简单的javascript在Safari中不起作用

Question

I have almost no experience in javascript and I'm trying to make my website load a bit of html code from a google drive file. This works fine in every browser except for in safari. Does anyone know how to solve this issue?

<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

This Security issue is know as Same Origin Policy

In computing, the same-origin policy is an important concept in the web application security model. The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number 1 – to access each other's DOM with no specific restrictions, but prevents access to DOM on different sites. 1 The same-origin policy also applies to XMLHttpRequests unless the server provides an Access-Control-Allow-Origin (CORS) header. Notably, WebSockets are not subject to the same-origin policy.

This mechanism bears a particular significance for modern web applications that extensively depend on HTTP cookies to maintain authenticated user sessions, as servers act based on the HTTP cookie information to reveal sensitive information or take state-changing actions. A strict separation between content provided by unrelated sites must be maintained on the client side to prevent the loss of data confidentiality or integrity.

jQuery.load function can't get content from another domains in some browsers due to this security issue. and the same thing is applied to XMLHttpRequests function.

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

But you can use Jquery.ajax or Jquery.get function instead.

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

Answer 2

Try

$(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/

See also http://browsershots.org/