如何检查在iPhone Safari上运行的Ajax请求的状态？ [英] How do I check status of my Ajax request running on my iPhone Safari?
本文介绍了如何检查在iPhone Safari上运行的Ajax请求的状态？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已将此代码加载到我的网站上
<！DOCTYPE html>
< html lang = zh-CN>
< head>
< title> fingerprinting< / title>
<元名称= csrf-令牌 content = {{csrf_token（）}}>
< / head>
< body>
< script src = https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script> < / h1>已加载
< h1>页。
< h1 id = model>< / h1>
< script type = text / javascript>
// console.log（window）;
函数getIPhoneModel（）{
//创建一个canvas元素，该元素可用于检索有关GPU的信息。
var canvas = document.createElement（ canvas）;
if（canvas）{
var context = canvas.getContext（ webgl）|| canvas.getContext（ experimental-webgl）;
if（context）{
var info = context.getExtension（ WEBGL_debug_renderer_info）;
if（info）{
var renderer = context.getParameter（info.UNMASKED_RENDERER_WEBGL）;
}
}
}
// iPhone X
if（（（window.screen.height / window.screen.width == 812/375 ）&&（window.devicePixelRatio == 3））{
返回 iPhone X;
}否则，如果（（window.screen.height / window.screen.width == 896/414）&&（window.devicePixelRatio == 3））{
返回 iPhone XS Max ;
}否则，如果（（window.screen.height / window.screen.width == 896/414）&&（window.devicePixelRatio == 2））{
返回 iPhone XR；
}否则，如果（（window.screen.height / window.screen.width == 1024/768）&&（window.devicePixelRatio == 2））{
返回 iPad 4；
}
else if（（（window.screen.height / window.screen.width == 736/414）&&（window.devicePixelRatio == 3））{
开关（渲染器）{
默认值：
返回 iPhone 6 Plus，6s Plus，7 Plus或8 Plus；
保护壳 Apple A8 GPU：
返回 iPhone 6 Plus；
保护壳 Apple A9 GPU：
返回 iPhone 6s Plus；
保护壳 Apple A10 GPU：
返回 iPhone 7 Plus；
保护壳 Apple A11 GPU：
返回 iPhone 8 Plus；
}
// iPhone 6 + / 6s + / 7 +和8+处于缩放模式
}否则if（（（window.screen.height / window.screen.width == 667/375 ）&&（window.devicePixelRatio == 3））{
switch（renderer）{
默认：
返回 iPhone 6 Plus，6s Plus，7 Plus或8 Plus（显示放大）;
保护壳 Apple A8 GPU：
返回 iPhone 6 Plus（显示缩放）；
保护壳 Apple A9 GPU：
返回 iPhone 6s Plus（显示缩放）；
保护壳 Apple A10 GPU：
返回 iPhone 7 Plus（显示缩放）；
保护壳 Apple A11 GPU：
返回 iPhone 8 Plus（显示缩放）；
}
// iPhone 6 / 6s / 7和8
}否则if（（window.screen.height / window.screen.width == 667/375）&&（ window.devicePixelRatio == 2））{
switch（renderer）{
默认值：
返回 iPhone 6、6s，7或8；
保护壳 Apple A8 GPU：
返回 iPhone 6；
保护壳 Apple A9 GPU：
返回 iPhone 6s；
保护壳 Apple A10 GPU：
返回 iPhone 7；
保护壳 Apple A11 GPU：
返回 iPhone 8；
}
// iPhone 5 / 5C / 5s / SE或6 / 6s / 7和8处于缩放模式
}否则，如果（（window.screen.height / window.screen.width == 1.775）&&（window.devicePixelRatio == 2））{
switch（renderer）{
默认值：
返回 iPhone 5、5C，5S，SE或6， 6s，7和8（显示缩放）；
保护套 PowerVR SGX 543：
返回 iPhone 5或5c；
保护壳 Apple A7 GPU：
返回 iPhone 5s；
保护壳 Apple A8 GPU：
返回 iPhone 6（显示缩放）；
保护壳 Apple A9 GPU：
返回 iPhone SE或6s（显示缩放）；
保护壳 Apple A10 GPU：
返回 iPhone 7（显示缩放）；
保护壳 Apple A11 GPU：
返回 iPhone 8（显示缩放）；
}
// iPhone 4 / 4s
}否则（（window.screen.height / window.screen.width == 1.5）&&（window.devicePixelRatio == 2 ））{
switch（renderer）{
默认值：
返回 iPhone 4或4s；
保护套 PowerVR SGX 535：
返回 iPhone 4；
保护套 PowerVR SGX 543：
返回 iPhone 4s；
}
// iPhone 1 / 3G / 3GS
}否则if（（window.screen.height / window.screen.width == 1.5）&&（window.devicePixelRatio = = 1））{
switch（renderer）{
默认值：
返回 iPhone 1、3G或3GS；
保护套 ALP0298C05：
返回 iPhone 3GS；
保护套 S5L8900：
返回 iPhone 1、3G；
}
} else {
返回不是iPhone；
}
}
var model = getIPhoneModel（）
console.log（model）;
$（’＃model’）。text（model）;
var currentUrl = window.location.href;
var newUrl = currentUrl.replace（ fingerprinting， fingerprinting / tasks）;
// alert（newUrl）;
$ .ajax（{
方法： POST，
网址： {{$ APP_URL}}指纹/存储，
数据：{'original_uri '：'{!! $ original_uri !!}'，'model'：model，}，
标头：{
'X-CSRF-TOKEN'：$（'meta [name = csrf- token]'）。attr（'content'）
}，
成功：function（response）{
console.log（response）;
window.location.href = newUrl;
}，
错误：function（jqXHR，textStatus，errorThrown）{
console.log（JSON.stringify（jqXHR））;
console.log（ AJAX错误： + textStatus +'：'+ error抛出）;
}
}）;
< / script> < / h1>
< h1> JS已完成加载。
< / body>
< / html>
我在页面底部有Ajax。
我确定为什么它不能在iPhone Safari上触发。
或可能正在执行，但是有一些错误。
注意：
- 在Mac OS X上的Chrome或Safari上具有相同的代码✅
- Ajax确实触发了，并且工作正常。 ✅
Ajax似乎不会在iPhone Safari上触发
我是否使用iPhone上的Safari无法识别的任何旧语法？
人们将如何进行进一步调试？ ？
解决方案
您可以使用Safari WebInspector
您将需要带有
- 从菜单栏中选择野生动物园
Develop->模拟器或Iphone->您的页面
在开发人员工具栏中，打开时间轴/网络请求或网络检查网络请求的指南
检查服务器日志以查看后端是否接收到 AJAX 请求，或者检查您的电话模拟器日志，您可能会看到一些与证书或其他原因有关的错误。您必须在线研究这些错误的解决方案。
当我使用 xcode 构建项目时，我还能够从xcode内的电话中查看控制台日志
I have this code loaded on my site
<!DOCTYPE html>
<html lang="en">
<head>
<title>fingerprinting</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>page loaded.</h1>
<h1 id="model"></h1>
<script type="text/javascript">
// console.log(window);
function getIPhoneModel() {
// Create a canvas element which can be used to retrieve information about the GPU.
var canvas = document.createElement("canvas");
if (canvas) {
var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (context) {
var info = context.getExtension("WEBGL_debug_renderer_info");
if (info) {
var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
}
}
}
// iPhone X
if ((window.screen.height / window.screen.width == 812 / 375) && (window.devicePixelRatio == 3)) {
return "iPhone X";
} else if ((window.screen.height / window.screen.width == 896 / 414) && (window.devicePixelRatio == 3)) {
return "iPhone XS Max";
} else if ((window.screen.height / window.screen.width == 896 / 414) && (window.devicePixelRatio == 2)) {
return "iPhone XR";
} else if ((window.screen.height / window.screen.width == 1024 / 768) && (window.devicePixelRatio == 2)) {
return "iPad 4";
}
else if ((window.screen.height / window.screen.width == 736 / 414) && (window.devicePixelRatio == 3)) {
switch (renderer) {
default:
return "iPhone 6 Plus, 6s Plus, 7 Plus or 8 Plus";
case "Apple A8 GPU":
return "iPhone 6 Plus";
case "Apple A9 GPU":
return "iPhone 6s Plus";
case "Apple A10 GPU":
return "iPhone 7 Plus";
case "Apple A11 GPU":
return "iPhone 8 Plus";
}
// iPhone 6+/6s+/7+ and 8+ in zoom mode
} else if ((window.screen.height / window.screen.width == 667 / 375) && (window.devicePixelRatio == 3)) {
switch(renderer) {
default:
return "iPhone 6 Plus, 6s Plus, 7 Plus or 8 Plus (display zoom)";
case "Apple A8 GPU":
return "iPhone 6 Plus (display zoom)";
case "Apple A9 GPU":
return "iPhone 6s Plus (display zoom)";
case "Apple A10 GPU":
return "iPhone 7 Plus (display zoom)";
case "Apple A11 GPU":
return "iPhone 8 Plus (display zoom)";
}
// iPhone 6/6s/7 and 8
} else if ((window.screen.height / window.screen.width == 667 / 375) && (window.devicePixelRatio == 2)) {
switch(renderer) {
default:
return "iPhone 6, 6s, 7 or 8";
case "Apple A8 GPU":
return "iPhone 6";
case "Apple A9 GPU":
return "iPhone 6s";
case "Apple A10 GPU":
return "iPhone 7";
case "Apple A11 GPU":
return "iPhone 8";
}
// iPhone 5/5C/5s/SE or 6/6s/7 and 8 in zoom mode
} else if ((window.screen.height / window.screen.width == 1.775) && (window.devicePixelRatio == 2)) {
switch(renderer) {
default:
return "iPhone 5, 5C, 5S, SE or 6, 6s, 7 and 8 (display zoom)";
case "PowerVR SGX 543":
return "iPhone 5 or 5c";
case "Apple A7 GPU":
return "iPhone 5s";
case "Apple A8 GPU":
return "iPhone 6 (display zoom)";
case "Apple A9 GPU":
return "iPhone SE or 6s (display zoom)";
case "Apple A10 GPU":
return "iPhone 7 (display zoom)";
case "Apple A11 GPU":
return "iPhone 8 (display zoom)";
}
// iPhone 4/4s
} else if ((window.screen.height / window.screen.width == 1.5) && (window.devicePixelRatio == 2)) {
switch(renderer) {
default:
return "iPhone 4 or 4s";
case "PowerVR SGX 535":
return "iPhone 4";
case "PowerVR SGX 543":
return "iPhone 4s";
}
// iPhone 1/3G/3GS
} else if ((window.screen.height / window.screen.width == 1.5) && (window.devicePixelRatio == 1)) {
switch(renderer) {
default:
return "iPhone 1, 3G or 3GS";
case "ALP0298C05":
return "iPhone 3GS";
case "S5L8900":
return "iPhone 1, 3G";
}
} else {
return "Not an iPhone";
}
}
var model = getIPhoneModel()
console.log(model);
$('#model').text(model);
var currentUrl = window.location.href;
var newUrl = currentUrl.replace("fingerprinting", "fingerprinting/tasks");
// alert(newUrl);
$.ajax({
method: 'POST',
url: "{{ $APP_URL }}fingerprinting/store",
data: {'original_uri':'{!! $original_uri !!}', 'model' : model,},
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response){
console.log(response);
window.location.href = newUrl;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(JSON.stringify(jqXHR));
console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
}
});
</script>
<h1>JS finished loaded.</h1>
</body>
</html>
I have Ajax in the bottom of the page. I am sure why is it not triggering on iPhone Safari. or maybe it is being executed, but there are some errors.
Note :
- that same code on Chrome or Safari on Mac OS X. ✅
- Ajax does triggered, and working fine. ✅
Ajax does not seem to trigger on iPhone Safari
Am I using any old syntax that Safari on iPhone not recognize ?
How would one go about and debug this further?
解决方案
You can use the Safari WebInspector
You will need a Mac with Xcode installed.
You need to run your server locally on your ip.
Open your terminal and run ifconfig, find your ip and either copy enp1s0 for the ethernet or wlp2s0 for the wifi.
~ $ ifconfig
enp1s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 192.168.1.38 netmask 255.255.255.0 broadcast 192.168.1.255
wlp2s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 192.168.1.6 netmask 255.255.255.0 broadcast 192.168.1.255
run your server with your website on this ip.
With rails I run rails server -b 192.168.1.38 -p 3000, -b stands for ip binding and -p for port.
Open Xcode and start a new emulator or connect your device via usb.
Follow this instructions to open http://192.168.1.38:3000 on your iphone emulator.
In case you struggle configuring your iphone for debugging remember this important steps from the instructions:
- The
Webinspectoroption needs to be enabled ONLY if you are using USB DEVICE. You don't need to flag this option on the simulator device. I don't have it on the simulator and I was able to run the webinspector. - After running the simulator and opening a page with the mobile safari browser, you need to open your DESKTOP safari browser and enable
Developin the menu bar by checkingShow develop menu in menu bar.
If you can’t see "Develop" in the menu bar, go to the menu bar and click "Safari > Preferences > Advanced" and select the "Show develop menu in menu bar" checkbox.
- Select safari, from the menu bar
Develop -> Simulator or Iphone -> Your Page
In the developer toolbar open the Timelines/Network Request or Network as displayed in the guide to check your network request
Check your server logs to see if the backend is receiving the AJAX requests or check your phone simulator log as you may see some errors, related to certificates or other reasons. You'll have to research online for a solution to those errors.
when I build the project with xcode, I am also able to see the console log from from the phone inside xcode
这篇关于如何检查在iPhone Safari上运行的Ajax请求的状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
