A tool to reload necessary part of the page, and leave js and css intact for faster loading and stuff like constantly playing player and so on. And responsive reloading behaviour by browser loading progress.

Include iframe_reloader.js to your html.

A simpliest way to use is set to needed container needed attribute default is data-pjax-container and bind event click to needed links or watever you want by attribute data-ifr-url something like this:

$('a').on 'click', IFrameReloader.click

And that's it.

This can be used with custom progressbar, cause mobile browsers not showing it's progress. It can be used automatically with useProgressBar option is set. Or can be used as it's own.

Usage:

// shows progress bar with progress 0 is does nothing if progress exists
IFrameReloader.showProgress();

// showing progress bar if not, and sets progress to *value*, value is between 0 and 1.
IFrameReloader.setProgress(value);

// hides progress with effect of 100% done
IFrameReloader.hideProgress();

Configuration for this a little bit lower.

IFrameReloader.configure({
    urlParam: '_ifr',
    dataUrlAttribute: 'data-ifr-url',
    replacementContainerAttribute: 'data-pjax-container',
    iframeId: 'util-iframe',
    onload: function() { console.log('success'); },
    onerror: function() { console.log('error or abort'); }
    useProgressBar: true,
    progressBarId: 'ifr-progress',
    progressInnerBarClass: 'indicator',
    progressAppendTo: 'body',
    progressRemoveTimeout: 200,
    progressHideOnMaxValueSet: true
});

Params: