我正在尝试在 android 上使用 Jquery mobile 和 cordova 进行文件传输,
我使用本教程练习: http://blog.revivalx.com/2014/05/03/tutorial-camera-cordova-plugin-for-ios-and-android/
选中图片后,成功调用此函数:
function onPhotoDataSuccess(imageURI) {
navigator.notification.alert("onPhotoDataSuccess Image URI: "+imageURI, function() {});
var cameraImage = document.getElementById('image');
cameraImage.style.display = 'block';
cameraImage.src = imageURI;
}
通知显示正确的文件 URI,所以我认为它没问题,但是当应用程序返回到 webview 时,整个“页面”及其内容从屏幕上消失,出现另一个页面,这个页面是启动页面一直显示到设备准备就绪,准备就绪后,我将页面更改为登录页面。
<div id="launcherPage" data-role="page" data-theme="b">
<h1>Loading...</h1>
</div>
所以我尝试用这段代码改变了这个函数:
function onPhotoDataSuccess(imageURI) {
navigator.notification.alert("onPhotoDataSuccess Image URI: "+imageURI, function() {});
$('#image').attr({
src: imageURI,
style: "display:block;width:100%;"
});
}
但我得到了相同的结果,没有重复的 id,我真的不明白为什么会这样。
这是html代码:
<div data-role="page" id="picture" data-theme="b">
<div data-role="header">
<h1>TEST</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<form id="pictureForm">
<button onclick="capturePhoto();">Capture Photo</button><br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button>
<img id="image" src="" style="display:none;width:100%;">
<label for="title">Title</label>
<input data-clear-btn="true" name="title" id="title" value="" type="text">
<input value="Continue" type="submit" id="adButton" onclick="uploadPhoto();">
</form>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4>TEST</h4>
</div><!-- /footer -->
</div><!-- /page -->
编辑 我注意到当选择图片后显示 launcherPage 时,如果我点击手机的后退按钮,它会正确显示包含所选图片的图片页面...
编辑 2 当我从 html 代码注释 launcherPage 时,在选择图片后,它显示登录页面...
最佳答案
我找到了解决方案,问题不是来自 css,而是来自 html:
我刚刚更改了这段代码:
<button onclick="capturePhoto();">Capture Photo</button>
为此:
<a href="" class="ui-btn" onclick="capturePhoto();">Capture Photo</a>
不要使用 html 按钮标签,使用 anchor 标签...不知道为什么,但这有效!!!
希望对大家有帮助
关于javascript - jquery 移动页面在用 css 显示图像后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27317110/