DISQUS and Pushstate AJAX or Hashbang

Question

Has anyone gotten Disqus to work properly with something like PJAX or even regular #! AJAX.

Lets look at some examples of people who are doing this:

1. http://donejs.com/
2. http://www.playmodules.net/demo/1

The first one is using Hash bang style and the second one PJAX. Now click around those sites and you will notice in Disqus that your gravatar icon disappears and if you open the javascript console you will typically get errors and log messages because the DISQUS object has trouble unbinding.

I have tried my own random hacks (which is difficult because I can't find a DISQUS js that is not obfuscated through minification):

(function() {
    if ( document.getElementById('my_disqus_script') && document.getElementById('disqus_thread') ) {
        //var ds = document.getElementById('my_disqus_script');
        //(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).removeChild(ds);
        alert(window.location.href);
        DISQUS.reset({
            reload: true,
            config: function() {
                this.page.identifier = 'disqus_thread';
                this.page.url = window.location.href + '#!disqus_thread';
            }
        });
    }
    else if (document.getElementById('disqus_thread')){
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.id = 'my_disqus_script';
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }
    else {
        var ds = document.getElementById('my_disqus_script');
        if (ds)
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).removeChild(ds);
        if (window['DISQUS']) {
            alert('cleanup');
            DISQUS.reset();
            DISQUS.cleanup();
            DISQUS = null;
        }
    }
})();

Basically I tried a bunch of cleanup techniques so that when my PJAX loads the new page it should cleanup but I always get some events that are bound to null throwing an exception.

Answer 1

@JanHančič was correct in that an iframe is the best route (so if he answers I'll mark him correct). The height and seamless of the iframe can be handled with: https://github.com/house9/jquery-iframe-auto-height

What I did is make a controller (or whatever your framework calls it) that handles any url like: http://my.com/page/disqus which will load comments for http://my.com/page.

The controller just loads the DISQUS widget (wrapped in a html/body). Then in http://my.com/page template you include the iframe to http://my.com/page/disqus.