У меня есть собственный плагин WordPress, который использует функцию Javascript ajax onClick для создания интерактивного элемента, который случайным образом выбирает элемент из раскрывающегося списка, а затем открывает этот выбор в новой вкладке.
Код работает как мечта на всех настольных и мобильных браузерах, кроме Safari на iOS.
В Safari на iOS, если вы нажмете случайную кнопку, он успешно выберет случайным образом параметр из списка выбора и покажет анимацию загрузки, но не сможет загрузить новую страницу из выбора.
Кажется, что эта ошибка похожа на другие сафари, только ajax ошибок onClick, которые подробно обсуждались с первых дней выпуска iOS. За исключением того, что мне еще предстоит найти обходной путь для этой конкретной реализации.
Я включаю код как для случайной кнопки, на которой обнаружена ошибка, так и для списка выбора, поскольку, согласно моим исследованиям на сегодняшний день, это может быть взаимодействие этих двух элементов, которое вызывает ошибку в Safari .
Есть какие-то мысли?
(Следующий код был очищен для защиты моего клиента)
PHP в плагине WordPress
<div ><a href="javascript:;" id="randoms" class="tooltip">
<span class="tooltiptext" style="background : grey; opacity : 0.5;">Random</span>
</a></div>
<div class="select_able">
<div class="ruler"></div>
<img src="<?php echo CLIENT_WEBSITE_URL; ?>public/image/widget-background.jpg" alt="Widget">
<select name="person_profile" id="person_id">
<option value="0" >Search</option>
<?php if(!empty($search_person)): ?>
<?php foreach($search_person as $search_person): ?>
<option value="<?php echo $search_person->entity_id; ?>"> <?php echo $search_person->person_name ?> </option>
<?php endforeach; ?>
<?php endif; ?>
</select>
</div>
HTML Вывод
Javascript в плагине WordPress
$("#randoms").on("click", function() {
$.ajax({
type: "post",
dataType: "json",
url: ajaxUrl,
data: {
action: "random_client"
},
beforeSend: function() {
$(".loader").removeClass("hide");
},
async: true,
cache: false,
headers: { "cache-control": "no-cache" },
success: function(resp) {
$(".loader").addClass("hide");
if (resp.code == 200) {
var data = {
id: resp.entity_id,
text: resp.person_name
};
var newOption = new Option(data.text, data.id, true, true);
$("#person_id")
.append(newOption)
.trigger("change");
var pers_rating = $.trim($(".person_rating").val());
if (pers_rating < 0) {
$(".ruler").addClass("hide");
}
}
}
});
});
$(".new-tab-random").on("click", function() {
$.ajax({
type: "post",
dataType: "json",
url: ajaxUrl,
data: {
action: "random_client"
},
beforeSend: function() {
$(".loader").removeClass("hide");
},
async: true,
cache: false,
headers: { "cache-control": "no-cache" },
success: function(resp) {
$(".loader").addClass("hide");
if (resp.code == 200) {
fetch_profile_tab(resp.entity_id, resp.person_name);
}
}
});
});
$(".loader").removeClass("hide");
$(document).on("click", ".lower", function() {
$("#designator").val("lower");
var designator = $("#designator").val();
feed_back(designator);
});
$(document).on("click", ".higher", function() {
$("#designator").val("higher");
var designator = $("#designator").val();
feed_back(designator);
});
function fetch_profile_tab(
person_new_tab_id = 0,
slug_name_new_tab = 0
) {
var person_id;
var slug_name;
if (person_new_tab_id != 0) {
person_id = person_new_tab_id;
slug_name = string_to_slug(slug_name_new_tab);
} else {
person_id = $("#person_id").val();
var data = $("#person_id").select2("data");
slug_name = string_to_slug(data[0].text);
}
if (window.location.hostname == "localhost") {
var new_link =
window.location.origin +
"/website/result/" +
person_id;
} else {
var new_link =
window.location.origin + "/result/" + person_id;
}
window.open(new_link, "_blank");
}