网站的 javascript 适用于 android、windows、linux 和所有浏览器，但不适用于 mac、ios 在任何浏览器上
Posted
技术标签:
【中文标题】网站的 javascript 适用于 android、windows、linux 和所有浏览器，但不适用于 mac、ios 在任何浏览器上【英文标题】：javascript of a site works on android, windows, linux and on all browsers but not in mac, ios on any browser 【发布时间】：2020-07-13 21:40:31 【问题描述】：我在一个站点上使用了一些非常基本的 java 脚本，它可以在除苹果之外的所有设备上完美运行。我试过了
setting headers and status code from my flask server
disabling jquery
using ' instead of "
disabling all css
我不知道为什么它不起作用。我没有 mac，我在 iphone 上测试过，我尝试使用 browserstack，但由于某种原因，它根本没有启动任何机器。
我希望我可以分享代码，但它似乎是多余的。
我在这里错过了什么？
我会在这里添加css html和js！
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<!-- Required meta tags-->
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta http-equiv='Content-Type' content='text/html' />
<!-- Title Page-->
<title>CITS AA</title>
<!-- Icons font CSS-->
<link href=' url_for('static',filename='vendor/mdi-font/css/material-design-iconic-font.min.css') '
rel='stylesheet' media='all' />
<link href=' url_for('static',filename='vendor/font-awesome-4.7/css/font-awesome.min.css') ' rel='stylesheet'
media='all' />
<!-- Font special for pages-->
<link href='https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i'
rel='stylesheet' />
<!-- Vendor CSS-->
<link href=' url_for('static',filename='vendor/select2/select2.min.css') ' rel='stylesheet' media='all' />
<link href=' url_for('static',filename='vendor/datepicker/daterangepicker.css') ' rel='stylesheet' media='all' />
<!-- Main CSS-->
<link href=' url_for('static',filename='css/main.css') ' rel='stylesheet' media='all' />
</head>
<body>
<div class='page-wrapper bg-blue p-t-100 p-b-100 font-robo'>
<div class='wrapper wrapper--w680'>
<div class='card card-1'>
<div class='card-heading'></div>
<div class='card-body'>
<h2 class='title'>CITS Attendance Automated</h2>
<div class='input-group'>
<input class='input--style-1' type='text' placeholder='NAME' name='name'
value=' user ' disabled />
</div>
<div class='row row-space'>
<div class='col-2'>
<div class='col-4'>Select Your Course</div>
<div class='input-group'>
<div class='rs-select2 js-select-simple select--no-search'>
<select name='courses' id='courses' value='' onchange='validate()'>
% for course in courses %
<option
value=' '---'.format(course['registrationSemester'],course['registrationYear'],course['cCourseId'],course['section']) '>
'---'.format(course['registrationSemester'],course['registrationYear'],course['cCourseId'],course['section'])
</option>
% endfor %
</select>
<div class='select-dropdown'></div>
</div>
</div>
</div>
</div>
<div class='row row-space'>
<div class='col-4 error' id='courses-error'></div>
</div>
<div class='row row-space'>
<div class='col-2'>
<div class='col-2'>Class Code</div>
<div class='input-group'>
<input id='classcode' class='input--style-1 input' type='text'
placeholder='classcode' name='classcode' disabled />
</div>
</div>
<div class='col-2'>
<div class='col-2'>Section</div>
<div class='input-group'>
<input id='section' class='input--style-1 input' type='number' placeholder='section' name='section'
disabled value='' />
</div>
</div>
</div>
<div class='row row-space'>
<div class='col-2'>
<div class='col-2'>Date</div>
<div class='input-group'>
<input class='input--style-1 js-datepicker' type='text' placeholder=''
name='date' value=' date ' id='date' disabled />
</div>
</div>
<div class='col-2'>
<div class='col-2'>Semester</div>
<div class='input-group'>
<input id='semester' class='input--style-1 input' type='text' placeholder='semester' name='semester'
disabled />
</div>
</div>
</div>
<div class='row-space'>
<div class='input-group'>
<div class='col-4'>
Meeting URL
</div>
<input class='input--style-1 input' type='text' name='meeturl' id='meeturl' oninput='validate()' />
</div>
</div>
<div class='row row-space'>
<div class='col-4 error' id='meeturl-error'></div>
</div>
<div class='row row-space'>
<div class='input-group'>
<div class='col-4'>Meet Code</div>
<input class='input--style-1 input' type='text' placeholder='code' name='meetcode' id='meetcode'
disabled />
</div>
</div>
<div class='row row-space'>
<div class='p-t-20'>
<button class='btn btn--radius btn--red' id='submit' onclick='submitData()' disabled>
Submit
</button><span id='messages' style='padding-left: 5px;'>Click Submit to Confirm</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script defer src=' url_for('static',filename='vendor/jquery/jquery.min.js') '></script>
<script defer src=' url_for('static',filename='vendor/select2/select2.min.js') '></script>
<script defer src=' url_for('static',filename='vendor/datepicker/moment.min.js') '></script>
<script defer src=' url_for('static',filename='vendor/datepicker/daterangepicker.js') '></script>
<script defer src=' url_for('static',filename='js/global.js') '></script>
</body>
</html>
CSS
.font-robo
font-family: 'Roboto', 'Arial', 'Helvetica Neue', sans-serif;
.row
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.row-space
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
.col-2
width: -webkit-calc((100% - 60px) / 2);
width: -moz-calc((100% - 60px) / 2);
width: calc((100% - 60px) / 2);
@media (max-width: 767px)
.col-2
width: 100%;
html
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*
padding: 0;
margin: 0;
*,
*:before,
*:after
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
body,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
dd,
ol,
ul,
figure,
hr,
fieldset,
legend
margin: 0;
padding: 0;
li > ol,
li > ul
margin-bottom: 0;
table
border-collapse: collapse;
border-spacing: 0;
fieldset
min-width: 0;
/* [1] */
border: 0;
button
outline: none;
background: none;
border: none;
.page-wrapper
min-height: 100vh;
body
font-family: 'Roboto', 'Arial', 'Helvetica Neue', sans-serif;
font-weight: 400;
font-size: 14px;
h1,
h2,
h3,
h4,
h5,
h6
font-weight: 400;
h1
font-size: 36px;
h2
font-size: 30px;
h3
font-size: 24px;
h4
font-size: 18px;
h5
font-size: 15px;
h6
font-size: 13px;
.bg-blue
background: #2c6ed5;
.p-t-100
padding-top: 100px;
.p-t-20
padding-top: 20px;
.p-b-100
padding-bottom: 100px;
.wrapper
margin: 0 auto;
.wrapper--w680
max-width: 680px;
.btn
line-height: 40px;
display: inline-block;
padding: 0 25px;
cursor: pointer;
font-family: 'Roboto', 'Arial', 'Helvetica Neue', sans-serif;
color: #fff;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
font-size: 14px;
font-weight: 700;
.btn--radius
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
.btn--green
background: #57b846;
.btn--red
background: crimson;
.btn--yellow
background: gold;
.btn--green:hover
background: #4dae3c;
td.active
background-color: #2c6ed5;
input[type='date' i]
padding: 14px;
.table-condensed td,
.table-condensed th
font-size: 14px;
font-family: 'Roboto', 'Arial', 'Helvetica Neue', sans-serif;
font-weight: 400;
.daterangepicker td
width: 40px;
height: 30px;
.daterangepicker
border: none;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
display: none;
border: 1px solid #e0e0e0;
margin-top: 5px;
.daterangepicker::after,
.daterangepicker::before
display: none;
.daterangepicker thead tr th
padding: 10px 0;
.daterangepicker .table-condensed th select
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
padding: 5px;
outline: none;
input
outline: none;
margin: 0;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
font-size: 14px;
font-family: inherit;
.input-group
position: relative;
margin-bottom: 30px;
border-bottom: 2px solid #ccc;
.input-icon
position: absolute;
font-size: 18px;
color: #ccc;
right: 8px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
.input--style-1
padding: 9px 0;
color: #000;
.error
color: crimson;
.input--style-1::-webkit-input-placeholder
/* WebKit, Blink, Edge */
color: #555;
.input--style-1:-moz-placeholder
/* Mozilla Firefox 4 to 18 */
color: #555;
opacity: 1;
.input--style-1::-moz-placeholder
/* Mozilla Firefox 19+ */
color: #555;
opacity: 1;
.input--style-1:-ms-input-placeholder
/* Internet Explorer 10-11 */
color: #555;
.input--style-1:-ms-input-placeholder
/* Microsoft Edge */
color: #555;
/* ==========================================================================
#SELECT2
========================================================================== */
.select--no-search .select2-search
display: none !important;
.rs-select2 .select2-container
width: 100% !important;
outline: none;
.rs-select2 .select2-container .select2-selection--single
outline: none;
border: none;
height: 34px;
.rs-select2
.select2-container
.select2-selection--single
.select2-selection__rendered
line-height: 34px;
padding-left: 0;
color: #000;
.rs-select2
.select2-container
.select2-selection--single
.select2-selection__arrow
height: 32px;
right: 4px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
.rs-select2
.select2-container
.select2-selection--single
.select2-selection__arrow
b
display: none;
.rs-select2
.select2-container
.select2-selection--single
.select2-selection__arrow:after
font-family: 'Material-Design-Iconic-Font';
content: '\f2f9';
font-size: 18px;
color: #ccc;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
.rs-select2
.select2-container.select2-container--open
.select2-selection--single
.select2-selection__arrow::after
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
.select2-container--open .select2-dropdown--below
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
border: 1px solid #e0e0e0;
margin-top: 5px;
overflow: hidden;
/* ==========================================================================
#TITLE
========================================================================== */
.title
margin-bottom: 37px;
/* ==========================================================================
#CARD
========================================================================== */
.card
overflow: hidden;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #fff;
.card-1
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
.card-1 .card-heading
background: url('../iub.jpg') center center/cover no-repeat;
padding-top: 210px;
.card-1 .card-body
padding: 0 90px;
padding-top: 20px;
padding-bottom: 20px;
@media (max-width: 767px)
.card-1 .card-body
padding: 0 40px;
padding-top: 40px;
padding-bottom: 40px;
JS
(function ($)
/*==================================================================
[ Daterangepicker ]*/
try
$('.js-datepicker').daterangepicker(
singleDatePicker: true,
showDropdowns: true,
autoUpdateInput: false,
locale:
format: 'DD/MM/YYYY',
,
);
var myCalendar = $('.js-datepicker');
var isClick = 0;
$(window).on('click', function ()
isClick = 0;
);
$(myCalendar).on('apply.daterangepicker', function (ev, picker)
isClick = 0;
$(this).val(picker.startDate.format('DD-MM-YYYY'));
);
$('.js-btn-calendar').on('click', function (e)
e.stopPropagation();
if (isClick === 1) isClick = 0;
else if (isClick === 0) isClick = 1;
if (isClick === 1)
myCalendar.focus();
);
$(myCalendar).on('click', function (e)
e.stopPropagation();
isClick = 1;
);
$('.daterangepicker').on('click', function (e)
e.stopPropagation();
);
catch (er)
console.log(er);
/*[ Select 2 Config ]
===========================================================*/
try
var selectSimple = $('.js-select-simple');
selectSimple.each(function ()
var that = $(this);
var selectBox = that.find('select');
var selectDropdown = that.find('.select-dropdown');
selectBox.select2(
dropdownParent: selectDropdown,
);
);
catch (err)
console.log(err);
)(jQuery);
function validate()
let error = 0;
let courses = document.getElementById('courses');
let meeturl = document.getElementById('meeturl');
if (courses.value && courses.value != '')
let [semester, year, classcode, section] = document
.getElementById('courses')
.value.toString()
.split('-');
document.getElementById('classcode').style = 'font-weight: bold';
document.getElementById('section').style = 'font-weight: bold';
document.getElementById('semester').style = 'font-weight: bold';
document.getElementById('classcode').value = classcode;
document.getElementById('section').value = section;
document.getElementById('semester').value = semester;
document.getElementById('courses-error').innerText = '';
else
error++;
document.getElementById('courses-error').innerText =
'Please select a course';
if (meeturl.value && meeturl.value != '')
let parsed = meeturl.value
.toString()
.match(
/(?<=https:\/\/meet.google.com\/)[a-z0-9]3-[a-z0-9]4-[a-z0-9]3?/gi
);
if (parsed && parsed.length > 0)
let meetcode = parsed[0].toString().replace(/-/g, '').toUpperCase();
if (meetcode && meetcode.length == 10)
document.getElementById('meetcode').value = meetcode;
document.getElementById('meetcode').style = 'font-weight: bold';
document.getElementById('meeturl-error').innerText = '';
else
document.getElementById('meeturl-error').innerText = 'Incorrect URL';
document.getElementById('meetcode').value = '';
error++;
else
document.getElementById('meeturl-error').innerText =
'Incorrect/Empty URL';
document.getElementById('meetcode').value = '';
error++;
else
document.getElementById('meeturl-error').innerText = 'Empty URL';
document.getElementById('meetcode').value = '';
error++;
if (error != 0)
document.getElementById('submit').disabled = true;
document.getElementById('submit').classList.remove('btn--green');
document.getElementById('submit').classList.add('btn--red');
else
document.getElementById('submit').disabled = false;
document.getElementById('submit').classList.remove('btn--red');
document.getElementById('submit').classList.add('btn--green');
function submitData()
if (
document.getElementById('meetcode').value &&
document.getElementById('meeturl').value &&
document.getElementById('classcode').value &&
document.getElementById('section').value &&
document.getElementById('date').value &&
document.getElementById('semester').value
)
send =
meetcode: document.getElementById('meetcode').value,
meeturl: document.getElementById('meeturl').value,
classcode: document.getElementById('classcode').value,
section: document.getElementById('section').value,
date: document.getElementById('date').value,
semester: document.getElementById('semester').value,
;
document.getElementById('submit').classList.remove('btn--green');
document.getElementById('submit').classList.add('btn--yellow');
document.getElementById('submit').disabled = true;
fetch('',
method: 'POST',
headers: 'Content-Type': 'application/json' ,
body: JSON.stringify(send),
).then(async function (response)
let data = await response.json();
if (data.valid)
document.getElementById('messages').innerText = 'Done, enjoy teaching';
document.getElementById('messages').style = 'color: green;';
Array.from(document.getElementsByClassName('input')).forEach(function (
item
)
item.value = '';
);
document.getElementById('submit').classList.remove('btn--yellow');
document.getElementById('submit').classList.add('btn--green');
document.getElementById('submit').disabled = false;
else
document.getElementById('messages').innerText =
'Something went wrong, reload and try again';
document.getElementById('messages').style = 'color: red;';
);
else
document.getElementById('messages').innerText =
'Please fill the form properly';
document.getElementById('messages').style = 'color: red;';
validate();
【问题讨论】：
我们不知道。也许您应该显示不起作用的代码。 我不知道我错过了什么。我可以添加什么来帮助解决这个问题吗？ 我们不知道代码是什么或错误是什么。您的代码就像告诉机械师您的汽车不会在星期一启动，也不让他们看到汽车。 尝试在控制台选项卡中查看浏览器的开发者工具 我在 LINUX 和 Windows 上做过，但我没有看到任何问题。没有mac看mac的控制台。 【参考方案1】：实际原因与一组特定的正则表达式有关。到目前为止，Look ahead 还不能在任何苹果设备上工作，因此从苹果设备运行代码时会失败。我通过使用不同的正则表达式模式解决了它。
【讨论】：
以上是关于网站的 javascript 适用于 android、windows、linux 和所有浏览器，但不适用于 mac、ios 在任何浏览器上的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 时钟适用于 Chrome，但不适用于 Firefox 或 IE
HTTP POST 请求适用于 Postman，但不适用于我的 Web 应用程序的 JavaScript 提取 [关闭]