WordPress + jQuery移动-主线程上的同步XMLHttpRequest是不推荐的？

Question

为什么在将jquery添加到我的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 site.#上没有任何AJAX调用

我在页面底部发现了一些奇怪的东西--加载：

​

​

那是什么？不是我送的！

我使用jQuery手机是因为我需要在移动设备上触摸和滑动图像：

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

我在wordpress管理区域中添加了jQuery Mobile1.4.5，这也是同样的问题。

通过更改jQuery移动文件中的以下代码行可以修复此错误( jQM版本1.4.5中的第681-682行)：

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

至

    ajaxEnabled: false,

Answer 2

为了添加到验证器的答案中，如果您不想直接修改jQueryMobile代码，您可以运行您自己的自定义脚本来在jQueryMobile上设置默认值。只需确保在jQueryMobile的脚本排队之前将其排队。

这对我起了作用：

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

从这个答案：https://stackoverflow.com/a/8684532

Answer 3

主线程用于UI呈现。在这里，您试图在同一个线程上发出同步请求，这将导致在等待HttpResponse时屏幕冻结。