Parse.com 用户管理 html iframe 无法在移动设备上正确显示答案

【问题标题】：Parse.com user management html iframe not displaying correctly on mobileParse.com 用户管理 html iframe 无法在移动设备上正确显示
【发布时间】：2015-12-15 00:05:28
【问题描述】：

我正在使用从 Parse 的电子邮件设置页面下载的 Parse 用户管理 html 来显示电子邮件验证和密码重置页面。

它使用 js 通过 iframe 调用 Parse 的页面，并在我的域中托管的 user_management.html 内提供页面。这样，用户就只能看到我的域。

我遇到的问题是，当用户从移动设备单击电子邮件验证或密码重置链接时，通过 iframe 提供的 Parse 页面对于移动设备屏幕来说太大（没有响应)，或者 iframe 没有最大化到移动浏览器的窗口大小（内容被截断，用户需要在 iframe 内滚动）。

我希望 Parse 内容能够在移动设备上正确显示。我什至从哪里开始？

以下是托管在我的域上的 user_management.html。根据 Parse，无需编辑此内容。

<!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 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>

【问题讨论】：

标签： javascript html iframe parse-platform

【解决方案1】：

发生这种情况是因为iFrame 并非真正设计用于移动设备，也不适用于响应式设计。这里的一个简单技巧是将以下几行添加到您的样式中，以获得全屏iFrame。这并不完美，但至少您不会在移动浏览器上看到部分 iFrame：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

【讨论】：