向后移动会导致错误：““不赞成在主线程上使用同步XMLHttpRequest…”

Question

I move back and forth between two link and changing the content using ajax. 我在两个链接之间来回移动，并使用ajax更改内容。 The problem is when I tried to move backward all the way to index.php 问题是当我尝试向后移到index.php的所有方式时

here's the code: 这是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="bk/jquery-3.3.1.min.js" charset="utf-8"></script>
</head>
    <body>
        <a href="admin.html">Admin</a>
        <a href="content.html">Get Content</a>
        <div id="content"></div>
    </body>
</html>
<script>
$(function() {
    $('body').find('a').off('click').click( function(e) {
        e.preventDefault();

        history.pushState(null, null, $(this).attr('href'));

        callPage($(this).attr('href'));
    });

    function callPage(ref) {
        $.get(
            ref,
            function(data) {
                $('#content').html(data);
            },
            'text'
        );
    }

    $.ajaxSetup({ cache: false });

    $(window).on('popstate', function() {
        callPage(location.pathname.split('/').pop());
    });
});
</script>

the content of admin.html and content.html are Admin and Hello World, respectively wrapped with h1 tag. admin.html和content.html的内容分别是Admin和Hello World，分别用h1标签包装。 Whenever I press the back button and reached the index, I always encounter this error: 每当我按下“后退”按钮并到达索引时，我总是会遇到此错误：

Error message in console 控制台中的错误消息

and in the browser: view in browser after reaching the index 并在浏览器中：到达索引后在浏览器中查看

It was supposedly not like that. 据说不是那样的。 Any suggestion what might be the reasons for that? 任何建议可能是什么原因？

Answer 1

When you get back to index.html, it is probably trying to load a copy of itself into div#content. 回到index.html时，它可能正在尝试将自身的副本加载到div＃content中。 This would probably cause lots of unexpected results: It's going to be loading a second copy of your jquery library and all sorts of other weird things. 这可能会导致很多出乎意料的结果：将要加载jquery库的第二个副本以及其他各种奇怪的东西。

A more reliable practice would be to put your "virtual" path after a hash tag, like this: http://test.com/index.html#/admin.html . 一种更可靠的做法是将“虚拟”路径放在井号标签之后，例如： http://test.com/index.html#/admin.html : http://test.com/index.html#/admin.html 。 That way reload/refresh events would also work. 这样，重新加载/刷新事件也将起作用。 Something like this: 像这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
    <body>
        <a href="#/admin.html">Admin</a>
        <a href="#/content.html">Get Content</a>
        <div id="content"></div>
        <script>
        $(function() {

            function callPage(ref) {
                if(ref!=='') {
                    $.get(
                        ref,
                        function(data) {
                            $('#content').html(data);
                        },
                        'text'
                    );
                 } else $('#content').html('');
            }

            $.ajaxSetup({ cache: false });

            var fnHashchange = function() {
                 var path = location.hash.replace(/^#/,'');
                callPage(path);
            }
            $(window).on('hashchange', fnHashchange);
            fnHashchange();
        });
        </script>
    </body>
</html>

Also, as an aside, it's not really a good practice to put the script tag outside of the html tag. 另外，顺便说一句，将script标签放在html标签之外并不是一个好习惯。 Most browsers will parse it, but I don't believe it's legal html. 大多数浏览器都会解析它，但我不认为这是合法的html。

向后移动会导致错误：““不赞成在主线程上使用同步XMLHttpRequest…”

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-03-03 15:12:05

向后移动会导致错误：““不赞成在主线程上使用同步XMLHttpRequest…”

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-03-03 15:12:05

解决方案1
0 已采纳 2018-03-03 15:12:05