jQuery Mobile Web 应用程序中 Firebase 身份验证屏幕的奇怪性能答案

【问题标题】：Odd performance with Firebase Authentication Screen in jQuery Mobile web applicationjQuery Mobile Web 应用程序中 Firebase 身份验证屏幕的奇怪性能
【发布时间】：2018-07-29 09:11:48
【问题描述】：

我正在开发一个使用 Firebase 身份验证的 jQuery Mobile 网站。在我的例子中，我们使用身份验证令牌（带有custom claims）来限制对团队电话名册的访问。如果您不在团队中，节点服务器将不会提供该内容。 ajax 调用、身份验证和服务器的东西都很好用。第一次登录的外观不行。

当网站第一次显示，然后选择电话列表页面时，（http://localhost/#phone_list）我们看到：

该页面在此表单中不可用。没有地方可以输入电话号码。

当页面被简单地刷新时，显示转换为：

显然这正是它应该的样子。有一个易于识别的空间供用户输入手机号码。

这是非常可重复的。我假设这与 Javascript 类条目的时间有关。输入的电话号码内容全部来自 Google 的“罐装”javascript 元素。

当我检查 Chrome 开发工具中的关键元素时，我看到...

问题展示：

<button class="firebaseui-id-country-selector firebaseui-country-selector mdl-button mdl-js-button ui-btn ui-shadow ui-corner-all" data-upgraded=",MaterialButton">
     <span class="firebaseui-flag firebaseui-country-selector-flag firebaseui-id-country-selector-flag firebaseui-flag-US"></span>
     <span class="firebaseui-id-country-selector-code">‎+1</span>
</button>

简单刷新后：

<button class="firebaseui-id-country-selector firebaseui-country-selector mdl-button mdl-js-button" data-upgraded=",MaterialButton">
     <span class="firebaseui-flag firebaseui-country-selector-flag firebaseui-id-country-selector-flag firebaseui-flag-US"></span>
    <span class="firebaseui-id-country-selector-code">‎+1</span>
</button>

整个刷新的东西不是一个很好的修复。我的用户很困惑。我正在覆盖关键的 CSS 元素以使其远程运行，但我不太确定如何最好地解决这个问题。由于 jQueryMobile 导航功能，确实没有一种简单的方法来执行此“页面”的重绘/刷新。我确实找到了这个reference posting，但它似乎没有多大帮助。

关于如何使其功能齐全的任何想法？

【问题讨论】：

您是否尝试过这个api.jquerymobile.com/data-attribute 参见增强 data-enhance="false"？
不要去那里。我已经尝试过 data-enhance="false" 和 data-ajax="false" 。请记住，Google Firebase 和 jQuery Mobile 都在将类名操作到元素以影响渲染。

标签： javascript jquery firebase jquery-mobile firebase-authentication

【解决方案1】：

这是一个修复，但它完全是 hack。我仔细检查了之前和之后的班级结构。使用 CSS 特异性应用蛮力。

$(document).on('pagecreate', "#phone_list", function() {
    console.log("on #phone_list 'page' ");
    $('#firebaseui-container button').removeClass("ui-btn ui-shadow ui-corner-all");
    $('div.mdl-textfield div.ui-input-text').removeClass("ui-input-text");
});

【讨论】：

【解决方案2】：

ui-btn ui-shadow ui-corner-all ui-input-text 是 JQM 类。为了防止 JQM 自动增强，您需要 set the default ignoreContentEnabled to: true，然后使用 JQM 数据属性 data-enhance="false" 标记 html 容器部分。这在之前的一些SO answers 中已经指出。

我相信这是一个很好的问题，因为如果所有其他混合 JS/CSS 库都具有相同的功能来跳过增强，那将是完美。关于相交的 CSS 样式，除了使用 CSS 特异性或 important 声明外，别无他法。

下面是一个具体的例子：JQM 和Material Design Lite

function injectCard() {
  var card = ['<div class="mdl-card mdl-shadow--2dp">',
    '<div class="mdl-card__title">',
    '<h2 class="mdl-card__title-text">Welcome</h2>',
    '</div>',
    '<div class="mdl-card__supporting-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
    '<div class="mdl-cell">',
    '<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">',
    '<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">',
    '<label class="mdl-textfield__label" for="sample4">Number...</label>',
    '<span class="mdl-textfield__error">Input is not a number!</span>',
    '</div>',
    '</div>',
    '<div class="mdl-card__actions mdl-typography--text-right">',
    '<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Cancel</a>',
    '<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">Verify</button>',
    '</div>',
    '</div>'
  ].join("");
  $("#container").html(card);
  componentHandler.upgradeDom();
}

$(document).on('pagecontainershow', function(e, ui) {
  $.mobile.loading("show");
});

$(document).ready(function() {
  // Just a test
  setTimeout(function() {
    $.mobile.loading("hide");
    injectCard();
  }, 1000);
});

/* Some manual adjustmets */

.mdl-textfield__label {
  margin-bottom: 0px !important;
}

.mdl-button {
  font-weight: 500 !important;
}

.ui-header .ui-title,
.ui-footer .ui-title {
  font-weight: inherit;
  font-size: 1.250em !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript">
    $(document).on('mobileinit', function() {
      $.mobile.ignoreContentEnabled = true;
    });
  </script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>

<body>
  <div id="page-1" data-role="page">
    <div data-role="header">
      <h1>Login</h1>
    </div>
    <div role="main" class="ui-content">
      <form>
        <fieldset data-role="controlgroup" data-type="horizontal">
          <legend>Enhanced by jQuery Mobile:</legend>
          <label for="select-h-2a">Select A</label>
          <select name="select-h-2a" id="select-h-2a">
            <option value="#">One</option>
            <option value="#">Two</option>
            <option value="#">Three</option>
          </select>
          <label for="select-h-2b">Select B</label>
          <select name="select-h-2b" id="select-h-2b">
            <option value="#">One</option>
            <option value="#" selected>Two</option>
            <option value="#">Three</option>
          </select>
          <label for="select-h-2c">Select C</label>
          <select name="select-h-2c" id="select-h-2c">
            <option value="#">One</option>
            <option value="#">Two</option>
            <option value="#" selected>Three</option>
          </select>
        </fieldset>
        <input name="search-1" id="search-1" value="" type="search">
      </form>
      <hr>
      <div data-enhance="false" id="container">
        <legend>Not Enhanced</legend>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：