2017-04-01 5 views
0

私は単純なHTMLページを持っています。これは、ResponsiveSlides.jsを使ってJSONファイルから画像を取得しますが、Firefoxでは動作しますが、他のブラウザでは空のページが表示されず、サーバから実行すると、アニメーションなしで?すべてのブラウザとサーバーでHTMLを実行するにはどうすればよいですか?ChromeとサーバーでHTMLコードが動作しません。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.55/responsiveslides.min.js"></script> 

</head> 
<body> 

<div> 
<ul id="exampleSlider"> 
</ul> 
</div> 

<script type="text/javascript"> 
    $.getJSON('slides.json', function(data) { 
    $("h2").html(data[0].title); 
     $.each(data, function (i, f) { 
      if(i>0){ 
       $("#exampleSlider").append("<li><a><img src=" + f.content + "></img></a><p>"+f.title+"</p></li>"); 
       $("a").attr("href", "#"); 
      } 
     }); 
    }); 

    $(function() { 
     $("#exampleSlider").responsiveSlides({ 
     auto: true, 
     pause: true, 
     speed: 1200, 
     timeout: 3000 
     }); 
}); 
</script> 
</body> 
</html> 

答えて

0

あなたは(AJAXが完了後)のページにあなたのイメージを挿入した後responsiveSlidesを初期化する必要があります。

$(function() { 

    $.getJSON('slides.json', function(data) { 

    $("h2").html(data[0].title); 

    $.each(data, function(i, f) { 
     if (i > 0) { 
     $("#exampleSlider").append("<li><a><img src=" + f.content + "></img></a><p>" + f.title + "</p></li>"); 
     $("a").attr("href", "#"); 
     } 
    }); 

    $("#exampleSlider").responsiveSlides({ 
     auto: true, 
     pause: true, 
     speed: 1200, 
     timeout: 3000 
    }); 

    }); 

}); 
+0

おかげで、今のサーバー上で動作しますが、それでも、これは誤りであるクロムやオペラのような他のブラウザでは動作しません:XMLHttpRequestがファイルを読み込むことができません:/// C:最終/ユーザ/サイード/デスクトップ//bs-binary-admin/assets/json/slides.json。 Cross originリクエストは、http、data、chrome、chrome-extension、httpsのプロトコルスキームでのみサポートされています。 – Alex

+0

@alexはい、ajaxリクエストは 'file://'プロトコル(*ローカル*)のchromeでは動作しません。 https://bugs.chromium.org/p/chromium/issues/detail?id=47416をご覧ください。 –

関連する問題