scroll-frame.js
function(url) {
    var prevHref = location.href;
    var prevTitle = document.title;

    // Change the history
    history.pushState({ scrollFrame: true, href: location.href }, '', url);

    // Create the wrapper & iframe modal
    var body = document.getElementsByTagName('body')[0];
    var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false;
    var attributes = [
      'position: fixed', 'top: 0', 'left: 0','width: 100%', 'height: 100%',
      'z-index: 10000000', 'background-color: white', 'border: 0'
    ];

    //only add scrolling fix for ios devices
    if (iOS){
      attributes.push('overflow-y: scroll');
      attributes.push('-webkit-overflow-scrolling: touch');
    }
    //create wrapper for iOS scroll fix
    var wrapper = document.createElement("div");
    wrapper.setAttribute('style',attributes.join(';'));
    var iframe = document.createElement("iframe");
    iframe.className = 'scroll-frame-iframe'
    iframe.setAttribute('style', [
      'width: 100%', 'height: 100%', 'position:absolute',
      'border: 0'
    ].join(';'));

    // Lock the body from scrolling & hide the body's scroll bars.
    body.setAttribute('style', 'overflow: hidden;' +
      (body.getAttribute('style') || ''));

    // Add a class to the body while the iframe loads then append it
    body.className += ' scroll-frame-loading';
    iframe.onload = function() {
      body.className = body.className.replace(' scroll-frame-loading', '');
      document.title = iframe.contentDocument.title;
    }
    wrapper.appendChild(iframe);
    body.appendChild(wrapper);
    iframe.contentWindow.location.replace(url);

    // On back-button remove the wrapper
    var onPopState = function(e) {
      if (location.href != prevHref) return;
      wrapper.removeChild(iframe);
      document.title = prevTitle;
      body.removeChild(wrapper);
      body.setAttribute('style',
        body.getAttribute('style').replace('overflow: hidden;', ''));
      removeEventListener('popstate', onPopState);
    }
    addEventListener('popstate', onPopState);
  }
function(url) {
    var prevHref = location.href;
    var prevTitle = document.title;

    // Change the history
    history.pushState({ scrollFrame: true, href: location.href }, '', url);

    // Create the wrapper & iframe modal
    var body = document.getElementsByTagName('body')[0];
    var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false;
    var attributes = [
      'position: fixed', 'top: 0', 'left: 0','width: 100%', 'height: 100%',
      'z-index: 10000000', 'background-color: white', 'border: 0'
    ];

    //only add scrolling fix for ios devices
    if (iOS){
      attributes.push('overflow-y: scroll');
      attributes.push('-webkit-overflow-scrolling: touch');
    }
    //create wrapper for iOS scroll fix
    var wrapper = document.createElement("div");
    wrapper.setAttribute('style',attributes.join(';'));
    var iframe = document.createElement("iframe");
    iframe.className = 'scroll-frame-iframe'
    iframe.setAttribute('style', [
      'width: 100%', 'height: 100%', 'position:absolute',
      'border: 0'
    ].join(';'));

    // Lock the body from scrolling & hide the body's scroll bars.
    body.setAttribute('style', 'overflow: hidden;' +
      (body.getAttribute('style') || ''));

    // Add a class to the body while the iframe loads then append it
    body.className += ' scroll-frame-loading';
    iframe.onload = function() {
      body.className = body.className.replace(' scroll-frame-loading', '');
      document.title = iframe.contentDocument.title;
    }
    wrapper.appendChild(iframe);
    body.appendChild(wrapper);
    iframe.contentWindow.location.replace(url);

    // On back-button remove the wrapper
    var onPopState = function(e) {
      if (location.href != prevHref) return;
      wrapper.removeChild(iframe);
      document.title = prevTitle;
      body.removeChild(wrapper);
      body.setAttribute('style',
        body.getAttribute('style').replace('overflow: hidden;', ''));
      removeEventListener('popstate', onPopState);
    }
    addEventListener('popstate', onPopState);
  }
function ( url ) { var prevHref = location . href ; var prevTitle = document . title ; // Change the history history . pushState ( { scrollFrame : true , href : location . href } , '' , url ) ; // Create the wrapper & iframe modal var body = document . getElementsByTagName ( 'body' ) [ 0 ] ; var iOS = navigator . userAgent . match ( / (iPad|iPhone|iPod) / g ) ? true : false ; var attributes = [ 'position: fixed' , 'top: 0' , 'left: 0' , 'width: 100%' , 'height: 100%' , 'z-index: 10000000' , 'background-color: white' , 'border: 0' ] ; //only add scrolling fix for ios devices if ( iOS ) { attributes . push ( 'overflow-y: scroll' ) ; attributes . push ( '-webkit-overflow-scrolling: touch' ) ; } //create wrapper for iOS scroll fix var wrapper = document . createElement ( "div" ) ; wrapper . setAttribute ( 'style' , attributes . join ( ';' ) ) ; var iframe = document . createElement ( "iframe" ) ; iframe . className = 'scroll-frame-iframe' iframe . setAttribute ( 'style' , [ 'width: 100%' , 'height: 100%' , 'position:absolute' , 'border: 0' ] . join ( ';' ) ) ; // Lock the body from scrolling & hide the body's scroll bars. body . setAttribute ( 'style' , 'overflow: hidden;' + ( body . getAttribute ( 'style' ) || '' ) ) ; // Add a class to the body while the iframe loads then append it body . className += ' scroll-frame-loading' ; iframe . onload = function ( ) { body . className = body . className . replace ( ' scroll-frame-loading' , '' ) ; document . title = iframe . contentDocument . title ; } wrapper . appendChild ( iframe ) ; body . appendChild ( wrapper ) ; iframe . contentWindow . location . replace ( url ) ; // On back-button remove the wrapper var onPopState = function ( e ) { if ( location . href != prevHref ) return ; wrapper . removeChild ( iframe ) ; document . title = prevTitle ; body . removeChild ( wrapper ) ; body . setAttribute ( 'style' , body . getAttribute ( 'style' ) . replace ( 'overflow: hidden;' , '' ) ) ; removeEventListener ( 'popstate' , onPopState ) ; } addEventListener ( 'popstate' , onPopState ) ; }
Change pushState and open the iframe modal pointing to this url.  @param {String} url
Change pushState and open the iframe modal pointing to this url .