javascript - 使用 javascript 和 jquery 更改 url

Question

你好

我正在开发一个通过ajax加载文件的jQuery插件。当用户单击按钮时:

<button class='btn btn-info' data-load="ajax" data-file="ajax/login.html" >Login</button>

当用户点击按钮时，它会生成以下网址:

http://localhost//plugins/ajaxLoad/index.html#ajax/Login

我想把它改成

http://localhost//plugins/ajaxLoad/index.html/ajax/Login

我的 JavaScript 是:

(function ($) {
$.fn.ajaxLoad = function (options) {
    var settings = $.extend({
        fileUrl : 'null',
        loadOn : '.em'

    }, options);
    $('[data-load="ajax"]').each(function(index, el) {
        $(this).click(function () {
            var file = $(this).attr('data-file');
            var loadOn = $(this).attr('data-load-on');
            var permission = $(this).attr("data-ask-permission");
            settings.fileUrl = file;
            settings.loadOn = loadOn;
            if (permission == 'yes') {
                var ask = confirm("Do you want to load file");
                if (ask == true) {
                    $.fn.loadFile();
                }
            }else {
                $.fn.loadFile();
            }
        });
    });
    $.fn.loadFile = function () {
        // setting location;
        var a = settings.fileUrl.split(".");
        location.hash = a[0];
        $.post(settings.fileUrl, function(response) {
            $(settings.loadOn).html(response);
        });
    }
}
}(jQuery))

谁能告诉我如何更改 jquery 和 Javascript 中的 url。

Answer 1

您需要使用history.pushstate()来执行此操作。

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

查看 MDN 上的这篇文章了解更多详细信息 https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

本文提供了一些不错的 jQuery 示例。 https://rosspenman.com/pushstate-jquery