WordPress + jQuery Mobile-不赞成在主线程上使用同步XMLHttpRequest吗？

Question

Why do I get these errors below after adding jquery mobile to my WordPress website?

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery.min.js?ver=3.1.1:4
ajax @ jquery.min.js?ver=3.1.1:4
a.ajax @ jquery-migrate.min.js?ver=3.0.0:2
r._evalUrl @ jquery.min.js?ver=3.1.1:4
Ia @ jquery.min.js?ver=3.1.1:3
append @ jquery.min.js?ver=3.1.1:3
r.fn.(anonymous function) @ jquery.min.js?ver=3.1.1:3
_include @ jquery.mobile.js:4790
(anonymous) @ jquery.mobile.js:890
(anonymous) @ jquery.mobile.js:4997
e @ jquery.min.js?ver=3.1.1:2
i @ jquery.min.js?ver=3.1.1:2
fireWith @ jquery.min.js?ver=3.1.1:2
A @ jquery.min.js?ver=3.1.1:4
(anonymous) @ jquery.min.js?ver=3.1.1:4

my-wordpress:1 IntersectionObserver.observe(target): target element is not a descendant of root.

The WP just stopped working - when I click to the menu and I can see that URL has changed but the page content stay the same.

Any ideas?

This is how I add the jquery stuff in the function.php:

    // Load latest compiled and minified jquery.
    wp_enqueue_script( 'jquery-min', get_template_directory_uri() . '/node_modules/jquery/dist/jquery.min.js', array(), '3.1.1' );

    // Load latest compiled and minified jquery migrate.
    wp_enqueue_script( 'jquery-migrate-2', get_template_directory_uri() . '/node_modules/jquery-migrate/dist/jquery-migrate.min.js', array(), '3.0.0' );

    // Load latest compiled and minified jquery mobile.
    wp_enqueue_script( 'jquery-mobile', get_template_directory_uri() . '/node_modules/jquery-mobile/dist/jquery.mobile.min.js', array(), '1.4.1' );

Notes: I don't have any AJAX call on my WP site.#

I found something odd at the bottom of my page - Loading:

What's that? Is not from me!

I use jQuery mobile because I need to touch and swipe images on mobile devices:

// bind scroll to anchor links
// http://stackoverflow.com/questions/11397028/document-click-function-for-touch-device
$(document).on("click touchstart", "a[href^='#']", function (e) {
  var id = $(this).attr("href");
  if ($(id).length > 0) {
    e.preventDefault();

    // trigger scroll
    scrollMagicController.scrollTo(id);

      // if supported by the browser we can even update the URL.
    if (window.history && window.history.pushState) {
      history.pushState("", document.title, id);
    }
  }
});

// Add swipe to carousel.
$("#myCarousel").swiperight(function() {
  $(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
  $(this).carousel('next');
});

Answer 1

I ran in the same issue with adding jQuery Mobile 1.4.5 to the wordpress admin area.

The error can by fixed by changing the following lines of code in your jQuery Mobile file (lines 681-682 in jQM Version 1.4.5):

    // Automatically handle clicks and form submissions through Ajax, when same-domain
    ajaxEnabled: true,

to

    ajaxEnabled: false,

Answer 2

Just to add to Examizer's answer, if you prefer not to amend the jQueryMobile code directly you can run your own custom script to set defaults on jQueryMobile. Just make sure you queue it before jQueryMobile's script is queued.

This worked for me:

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});

From this answer: https://stackoverflow.com/a/8684532

Answer 3

The main thread is used for UI rendering. Here you're trying to make synchronous requests on this same thread, which would result in screen freezes while you waiting for the HttpResponse.