除非您离开应用程序并返回，否则按钮 onclick 事件在 iOS 中不起作用，然后它就起作用了
Posted
技术标签:
【中文标题】除非您离开应用程序并返回，否则按钮 onclick 事件在 iOS 中不起作用，然后它就起作用了【英文标题】：Button onclick event not working in iOS unless you go away from app and back, then it works 【发布时间】：2018-07-19 17:02:40 【问题描述】：用新信息改变问题
之前我问过以下问题。但更多细节表明，如果您通过取消选择应用程序（可能不是正确的术语）然后选择应用程序来切换到不同的应用程序，则该按钮有效。如果您关闭应用程序并重新启动，它就不会再次运行。很奇怪。我在本段下方发布了完整的页面代码，下面的所有内容都是旧问题和 ------ 行下的部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /><meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<!--<link rel="stylesheet" type="text/css" href="css/fontawesome-all.css" />-->
<script defer src="js/fontawesome-all.js"></script>
<script src="framwork7/framwork7.js"></script>
<script type="text/javascript" src="cordova.js"></script><script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/poppe.min.js"></script>
<script type="text/javascript" src="js/news-feed.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script>
var xmlhttp;
var url;
/* window.onload = function()
document.addEventListener("deviceready", init);
*/
document.addEventListener("deviceready", init, false)
function init()
document.getElementById('Submit').addEventListener('click', getData);
function getData()
url = "http://www.example.org/myapp.php";
url += "?cemetery=" + document.getElementById('cemetery').value;
url += "&lastname=" + document.getElementById('lastname').value;
url += "&firstname=" + document.getElementById('firstname').value;
$.ajax(
type: 'get',
url: url,
success: function(data)
document.getElementById('laloinfo').innerHTML = "";
document.getElementById('laloinfo').innerHTML = "<strong>Scroll down for results</strong>";
/* document.getElementById('lalo2').innerHTML = data; */
$("#lalo2").html(data);
);
</script>
<title>Catholic Cemeteries Mobile App</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary mb-3">
<div class="container">
<a class="navbar-brand" href="#">Catholic Cemeteries</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"> ↓ </span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="lalo.html"><i class="fas fa-heart"></i> Locate a Loved One</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="window.open('http://www.example.org','_system');"><i class="fas fa-cloud"></i> Website</a>
</li>
<li class="nav-item">
<a class="nav-link" href="locations.html"><i class="fas fa-phone"></i> Locations & Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="window.open('https://facebook.com/myfacebook','_system');"><i class="fab fa-facebook"></i> Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#aboutModal" href="#aboutModal"><i class="fas fa-question"></i> About Version</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<h1>myname</h1>
<p class="lead">Welcome to the my name Mobile App</p>
<div class="row">
<!-- LALO -->
<div class="card bg-light" id="lalo">
<div class="card-header"><h3><i class="far fa-heart"></i> Locate a Loved One</h3></div>
<div class="card-body">
<div class="text-justify">Catholic Cemeteries is proud to announce our new <strong>Locate a Loved One</strong> search engine. Enter your loved one's name to get location information such as crypts / niches, section, row, and grave number.</div>
<br>
<div class="text-justify"><strong>You must choose a cemetery and at least a partial last name to search the database.</strong></div>
<br>
<div class="text-justify bg-info"><i>Please Note: Please allow approximately one week for current activity to appear in this search engine. If you can not find your loved one, please call the appropriate cemetery for assistance.</i></div>
<br>
<div class="form-group text-left">
<label for="cemetery">Cemetery: Required</label>
<select id="cemetery" class="form-control-sm">
<option value="1">J Cemetery, Middle Village</option>
<option value="3">C Cemetery, Farmingdale</option>
<option value="4">M Cemetery, Flushing</option>
<option value="2">H Cemetery, ***lyn</option>
</select>
</div>
<div class="form-group text-left">
<label for="lastname">Last Name: Required - Parital OK</label>
<input type="text" maxlength="50" id="lastname" class="form-control form-control-sm" placeholder="Enter Last name">
</div>
<div class="form-group text-left">
<label for="firstname">First Name: </label>
<input type="text" maxlength="30" id="firstname" class="form-control form-control-sm" placeholder="Enter First name">
</div>
<input type="hidden" name="timecounter" value="Submit">
<br><button class="btn btn-primary" name="Submit" value="Search" id="Submit">~SEARCH~</button><br/>
</div>
</div>
<!-- LALO -->
</div>
</div>
<!-- MODAL -->
<div class="modal" id="aboutModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">My Name Mobile App</h5>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Mobile App version 2.0.9<br/>
<br/>
If you are having an issue with this app, please contact me and give them the version number above.
</div>
<hr/>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer><p class="text-center">copyright © 2018, me</p></footer>
</body>
</html>
------------------下面的老问题--------------- ---------------
我已经尝试了 10 种解决方案，但都没有奏效。我有一个不能只是提交的表单，因为它接收回数据然后放入一个 div。此代码适用于 android，但不适用于 ios。 （这是一个使用 framework7 和引导程序的 HTML 5 应用程序，然后使用 phonegap 构建）。它是一个搜索表单，它提交到服务器 php 页面并将结果取回并将它们放入 div 中。当你点击按钮时，iOS 什么都不做。
这里是按钮代码：
<button class="btn btn-primary" name="Submit" value="Search" id="Submit">~SEARCH~</button>
这是处理程序代码：
<script>
var xmlhttp;
var url;
window.onload = function()
document.addEventListener("deviceready", init, false);
function init()
document.getElementById('Submit').addEventListener('click', getData, false );
function getData()
url = "http://www.mywebsite.org/myapp.php";
url += "?cemetery=" + document.getElementById('cemetery').value;
url += "&lastname=" + document.getElementById('lastname').value;
url += "&firstname=" + document.getElementById('firstname').value;
$.ajax(
type: 'get',
url: url,
success: function(data)
document.getElementById('laloinfo').innerHTML = "";
document.getElementById('laloinfo').innerHTML = "<strong>Scroll down for results</strong>";
/* document.getElementById('lalo2').innerHTML = data; */
$("#lalo2").html(data);
);
提前感谢您的帮助。这让我发疯了，已经折磨了一周。
约翰
【问题讨论】：
您在 Safari 控制台中看到错误吗？您可以在 Mac 上使用 Safari 并调试在设备或模拟器上运行的 Javascript。 嗨，大卫，感谢您的意见。它实际上在 mac/safari 上运行良好，使用网络上的 phonegap 服务器进行测试。但它不是设备/模拟器。不知道该怎么做。 【参考方案1】： var xmlhttp;
var url;
$(document).ready(function()
$('#Submit').on('click', getData);
);
function getData()
url = "http://www.mywebsite.org/myapp.php";
url += "?cemetery=" + $('#cemetery').val();
url += "&lastname=" + $('#lastname').val();
url += "&firstname=" + $('#firstname').val();
$.ajax(
type: 'get',
url: url,
success: function(data)
$('#laloinfo').html= "";
$('#laloinfo').html= "<strong>Scroll down for results</strong>";
/* $('#lalo2').html= data; */
$("#lalo2").html(data);
);
【讨论】：
嗨，Amine，我刚刚在 safari 中尝试过，但它不起作用。旧代码在 safari 中有效，但在 iphone 上无效，但您的代码甚至在 safari 中无效。除非我输入了错误的东西，我会检查但我不这么认为。 将 jquery.js 添加到您的页面，它将工作并从浏览器激活脚本，它可能会被停用 jquery 已加载，不知道从浏览器激活脚本是什么意思。 1- 单击“Safari”菜单，选择“首选项” 2- 单击“安全”选项卡 3- 单击“启用 JavaScript”复选框以启用或禁用 JavaScript 4- 关闭“首选项” " 窗口 5- JavaScript 现已启用【参考方案2】：这是一个演示如何直接调试 iOS WebView 的视频。
https://youtu.be/gZUj4KfFpQ4
这应该可以很容易地看出你哪里出错了。
在 Xcode 中创建和打开 Cordova 应用程序以进行调试：
[ ~] cordova create TestApp com.mydomain.testapp "TestApp"
Creating a new cordova project.
[ ~] cd TestApp/
[ ~/TestApp] cordova platform add ios --save
Using cordova-fetch for cordova-ios@~4.5.4
Adding ios project...
Creating Cordova project for the iOS platform:
Path: platforms/ios
Package: com.mydomain.testapp
Name: TestApp
iOS project created with cordova-ios@4.5.4
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for ios
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving ios@~4.5.4 into config.xml file ...
[ ~/TestApp] open platforms/ios/TestApp.xcworkspace
[ ~/TestApp]
此时在 Xcode 中只需选择您的模拟器并单击运行三角形：
步骤如下：
-
在 Mac 上的 Safari 中，转到 Preferences... -> Advanced 并启用 Show Develop menu in the menu bar
确保应用程序正在模拟器上运行
在 Safari 中选择 Develop -> Simulator -- iPhone (model) -> 选择 WebView -- 请注意，当您将鼠标悬停在菜单上时，WebView 会突出显示
开始 Javascript 调试
【讨论】：
这变得更奇怪了。所以我使用phonegap服务器从ma测试safari，然后从模拟器中的safari（我不知道如何将实际的应用程序放入模拟器），它工作正常。然后我让某人在 testflight 中再次在他们的 iphone 上测试它，没有工作，然后突然它工作了，然后停止工作。我想知道是不是页面没有完成加载。似乎是，但也许不是。因此，window.onload 上的侦听器可能无法正常运行。 更新了有关在 Xcode 中调试 Cordova/Phonegap 应用程序的详细信息。只有这样才能找到问题。 再次谢谢你，我明天进去看看这个。不过还有一个线索。我刚从我的测试人员那里得知，当你进入应用程序时，它不起作用。如果您关闭应用程序并重新进入，它将不起作用。但是，如果您离开应用程序（它在技术上仍在运行，但将焦点从应用程序转移）然后转到正在运行的应用程序，选择该应用程序，然后它就可以工作了。因此，让应用散焦，然后聚焦应用使其工作。 它在模拟器中工作，所以没有显示问题。但是在手机上，当您进入页面并点击搜索时，什么也没有发生，但如果您保持应用程序运行并转到另一个应用程序，然后返回，搜索工作。以上是关于除非您离开应用程序并返回，否则按钮 onclick 事件在 iOS 中不起作用，然后它就起作用了的主要内容，如果未能解决你的问题，请参考以下文章