我一直在尝试各种事情来发现为什么图像没有出现在我的iPhone中的phonegap应用程序的flex滑块内,我已经检查了链接的顺序,但是没有任何图像出现。
- 当我尝试将flexslider的js& css链接的 https 更改为 http 时,这是result
- 当我将flexslider的js& css的链接添加到 https 时,这就是结果,滑块没有图像移动(https://i.stack.imgur.com/H0c2i.jpg)
我已经尝试了它的小提琴和它的工作但不能在我的手机http://jsfiddle.net/CPpBD/677/上工作 它是相同的链接和每件事
// HTML
<html>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://*.gstatic.com * ws:;style-src 'self' 'unsafe-inline' https://*.googleapis.com https://*.cloudflare.com data: blob:;media-src *;img-src 'self' http://192.168.1.157 https://*.gstatic.com https://*.googleapis.com data: content:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/rtl.jquery.mobile-1.4.5.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" />
<body>
<div id="markerListPage" data-role="page"> </div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/rtl.jquery.mobile-1.4.5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.js"></script>
<script src="js/markerdetails.js"></script>
</body>
</html>
//标记详细信息html
<!DOCTYPE HTML>
<html>
<body>
<div id="detailsPage" data-role="page">
<div data-role="content" id="pic">
<div class="flexslider" >
<ul class="slides">
</ul>
</div>
</div>
</div>
</body>
</html>
// javascript of detailsmarker page
$('#detailsPage').live('pageshow', function (event) {
var id = getUrlVars()["L_ID"];
var serviceURL = "http://192.168.1.157/maleem/";
$.getJSON(serviceURL + 'getimage.php?L_ID=' + id, displayImg);
});
function displayImg(data) {
var imgs = data.pics;
console.log(imgs);
for(var j=0;j<imgs.length;j++)
{
$('.slides').append('<li><img src="' + imgs[j].img + '" width="200" height="200"/></li>');
}
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true
});
}