JQuery and GWT History support get mixed up

问题

I'm dynamically appending GWT scripts using JQuery and then tracking the history using JQuery history.

Problem: My GWT modules generate the History tokens because all of my GWT modules are MVP modules. And onClick()s of MenuItems is dynamically loading the GWT module, along withThis I'm adding the history for the MenuItems using JQuery. But my GWT modules also use History. Now the problem is that If I repetitively click on the MenuItem which loads GWT MVP modules , someHow my browser is getting strucked.

code:

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                    <script src="/newclickmenu/jquery.history.js"></script>

                 // Contains code which creates menuItems using JSTL. In this menuItem there will be menuItem and *subMenuItem(onclick of menuItem there will be a slideDown which would show subMenuItem


                    <script type="text/javascript">
                        jQuery(window).load(function() {
                            $('body').on('click', '#subMenuItem', function(event) {
                                // onClick of subMenuItem(which is anchor) then it add the History and will invoke the GWT mvp module.
                                // After doing the push then below `$.history.on('load change push', function(event, url, type) {` line is called.
                                $.history.push($(this).attr("href"));
                                event.preventDefault();
                            });
                            $.ajaxSetup({ cache: true });
                            $.history.on('load change push', function(event, url, type) {
                                if (event.type == "load") {
                                    if (url.split("!").length < 2) {
                                        window.location = url;
                                    }
                                } else {
                                    // This code will add the GWT module dynamically.
                                    if (typeof url !== undefined && url !== null && url !== "") {
                                        // Remove the old GWT script and append the new script
                                        var previousModule = $(".mainModule");
                                        if (previousModule.parent().length !== 0) {
                                            $(previousModule).remove();
                                        }
                                        var expectedUrl = "<script class='mainModule' src='/Masters/Masters.cache.js'/>";
                                        $('head').append($(expectedUrl));
                                    }
                                }
                        )};
                            }).listen('hash');
                    </script>

回答1:

Have you tried to disable the GWT´s History?

Reading the official documentation here

To use GWT History support, you must first embed an iframe into your host HTML page.
    <iframe src="javascript:''" id="__gwt_historyFrame" 
          style="width:0;height:0;border:0" />

Try to delete it, compile your modules again.

Anyway only for curiosity, why are you using with jQuery injection of GWT´s scripts? I think is much better do in the reverse way.

You can create an Activity and Places desing, control your History in a really simple way, and use the GWT´s script injector for your jQuery scripts.

    final JavaScriptObject idScript = $(window).prop("IDSCRIPT");
    if (idScript == null){
       ScriptInjector.fromUrl("js/jq/myJqueryScript.js").setCallback(
        new Callback<Void, Exception>() {
          public void onFailure(Exception reason) {
              AppConf.C("Trying to inject js/fb/myJqueryScript. Fail.");
          }
          public void onSuccess(Void result) {
              executeMyStuff(...);
          }
        }).inject();
    } else {
        executeMyStuff(...);
    }

回答2:

I think your setup is very complex, I dont know the reason you need this in your app, but anyway:

1- When you add a gwt-module you cannot unload it. So although you remove the script tag, the code is loaded in memory, and all events gwt has added continue in exectution.

2- If your gwt-module changes the history token your jquery code listening for history events, will be called each time.

3- This setup could work for the first gwt module loaded, but the second module would interfere with the first one since both are adding certain event handlers to the same thing. So each mvp gwt-module loaded is listening for history events, mouse events, etc, and you will get an uncertain behavior.

Maybe if you explain a bit more about your app architecture and requirements, we could figure out a most suitable setup.

来源：https://stackoverflow.com/questions/16946154/jquery-and-gwt-history-support-get-mixed-up