jQuery Mobile Web应用程序中Firebase身份验证屏幕的性能奇特
[英]Odd performance with Firebase Authentication Screen in jQuery Mobile web application
问题描述
我正在使用Firebase身份验证在jQuery Mobile网站上工作。 就我而言，我们使用auth令牌（带有自定义声明 ）来限制对团队电话花名册的访问。 如果您不在团队中，则节点服务器将不会提供该内容。 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导航功能的存在，确实没有一种简单的方法可以对此“页面”进行重新绘制/刷新。 我确实找到了此参考发布 ，但似乎并没有太大帮助。
关于如何使此功能完全正常的任何想法？
2 个解决方案
解决方案1
0 2018-02-19 17:32:38
这是一个修复程序，但这是完全破解。 我之前和之后都仔细检查了班级结构。 使用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
0 2018-02-21 08:09:37
ui-btn ui-shadow ui-corner-all ui-input-text是JQM类。 为了防止JQM自动增强，您需要将默认的ignoreContentEnabled设置为： true ，然后使用JQM数据属性data-enhance="false" ignoreContentEnabled data-enhance="false"标记html容器部分。 先前的一些SO答案已经指出了这一点。
我相信这是一个很好的问题，因为如果所有其他混合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>
如何在 Firebase Web 应用程序中通过密钥（手机号码）获取数据？
[英]How To Get data by key (mobile number) in firebase web application?
使用Jquery Mobile动态选择Cordova应用程序的第一个屏幕
[英]Dynamically pick first screen for cordova application with Jquery Mobile
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.