WordPress + jQuery Mobile-不贊成在主線程上使用同步XMLHttpRequest嗎？

Question

將jQuery mobile添加到我的WordPress網站后，為什么會在下面出現這些錯誤？

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.

WP剛剛停止工作-當我單擊菜單時，我可以看到URL已更改，但頁面內容保持不變。

有任何想法嗎？

這就是我在function.php中添加jquery內容的方式：

    // 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' );

注意：我的WP網站上沒有任何AJAX呼叫。＃

我在頁面底部發現了一些奇怪的東西-正在加載：

那是什么？ 不是我的！

我使用jQuery mobile是因為我需要在移動設備上觸摸和滑動圖像：

// 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

我在將jQuery Mobile 1.4.5添加到wordpress管理區域時遇到了同樣的問題。

可以通過更改jQuery Mobile文件中的以下代碼行（jQM版本1.4.5中的681-682行）來修復錯誤：

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

至

    ajaxEnabled: false,

Answer 2

僅添加到Examizer的答案中，如果您不想直接修改jQueryMobile代碼，則可以運行自己的自定義腳本以在jQueryMobile上設置默認值。 只要確保在 jQueryMobile的腳本排隊之前將其排隊即可。

這為我工作：

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

從這個答案： https ： //stackoverflow.com/a/8684532

Answer 3

主線程用於UI渲染。 在這里，您嘗試在同一線程上發出同步請求，這將導致在等待HttpResponse時屏幕凍結。