Ad

Parse.com User Management Html Iframe Not Displaying Correctly On Mobile

- 1 answer

I'm using Parse's user management html that I downloaded from Parse's Email Settings page, to display the email verification and password reset pages.

It uses js to call Parse's pages through an iframe, and serves the pages inside the user_management.html hosted on my domain. This way, for a user s/he only sees my domain.

The problem I'm having is that when a user clicks on the email verification, or password reset link from a mobile device, the Parse pages that is served through the iframe is either too big for the mobile device screen (not responsive), or the iframe does not maximise to the mobile browser's window size (content is cut off and user needs to scroll inside the iframe).

I want the Parse contents to be displayed properly on a mobile device. Where do I even start?

Below is the user_management.html that is hosted on my domain. According to Parse, no editing of this content is required.

<!DOCTYPE html>
<html>
<!-- This page is a passthrough frame used to host a parse.com experience from your server.
     If you choose to use this feature, be sure to tell Parse where you put this page in your
     app settings page.
     In general, there should be no reason to edit the contents of this page -->
<head>
  <style type='text/css'>
    .chromeless {
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      border: 0px;
      margin: 0px;
      padding: 0px;
    }
    .scrollable {
      overflow: auto;
    }
    .noscroll {
      overflow: hidden;
    }
    h1, p {
      padding: 15px;
      color: #0067AB;
      font: inherit;
      font-family: 'Open Sans', 'Helvetica Neue', Helvetica;
    }
    h1 {
      font-size: 30px;
      font-weight: 600;
    }
  </style>
  <script language='javascript' type='text/javascript'><!--

    window.onload = function() {
      // When there are query strings, this page is being used to pass content onto parse. Create
      // the iframe to do so. Forwards relevant query parameters onto the iFrame.
      if (window.location.search) {
        var urlParams = {};
        (function () {
            var pair, // Really a match. Index 0 is the full match; 1 & 2 are the key & val.
                tokenize = /([^&=]+)=?([^&]*)/g,
                // decodeURIComponents escapes everything but will leave +s that should be ' '
                re_space = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); },
                // Substring to cut off the leading '?'
                querystring = window.location.search.substring(1);

            while (pair = tokenize.exec(querystring))
               urlParams[re_space(pair[1])] = re_space(pair[2]);
        })();

        var base = 'https://www.parse.com';
        var link = '';
        var query = '';
        for (param in urlParams) {
          if (param == 'link') {
            link = urlParams['link'];
          } else {
            if (query != '') {
              query += "&";
            }
            query += param + '=' + encodeURIComponent(urlParams[param]);
          }
        }

        // Ensure there's a leading slash to avoid open redirect
        if (link.charAt(0) !== "/") {
          link = "/" + link;
        }

        var iframe = document.createElement('iframe');
        iframe.setAttribute('src', base + link + '?' + query);
        iframe.setAttribute('class', 'chromeless scrollable');
        document.getElementById('content').appendChild(iframe);

      // Otherwise, this page is likely being viewed by the app owner. Explain how to use it.
      } else {
        document.getElementById('content').innerHTML = 
          '<h1>This page lets you host Parse.com content from your own domain.</h1>' +
          '<p>Right click <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="' + encodeURI(window.location.pathname) + '">here</a> to save this page. ' +
          'Upload it to your own website and paste the URL in the "Parse Frame URL" ' +
          'app settings at Parse.com.</p>';
      }
    }
    //-->
  </script>
</head>
<body class='chromeless noscroll'>
  <noscript>We apologize, but user management requires javascript</noscript>
  <div id='content' class='chromeless noscroll'></div>
</body>
</html>

Ad

Answer

This happens because iFrame is not really designed to be used on mobile devices and does not work with responsive designs. A simple trick here is to add the following lines to your Styles just to get a full screen iFrame. This is not perfect but at least you do not end up with partial iFrame on a mobile browser:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
Ad
source: stackoverflow.com
Ad