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>
おかげで、今のサーバー上で動作しますが、それでも、これは誤りであるクロムやオペラのような他のブラウザでは動作しません:XMLHttpRequestがファイルを読み込むことができません:/// C:最終/ユーザ/サイード/デスクトップ//bs-binary-admin/assets/json/slides.json。 Cross originリクエストは、http、data、chrome、chrome-extension、httpsのプロトコルスキームでのみサポートされています。 – Alex
@alexはい、ajaxリクエストは 'file://'プロトコル(*ローカル*)のchromeでは動作しません。 https://bugs.chromium.org/p/chromium/issues/detail?id=47416をご覧ください。 –