个人中心
gpt4 book ai didi

javascript - HTML 不延伸到服务器上的窗口但在本地工作

转载 作者：行者123 更新时间：2023-11-28 05:49:36 26 4
gpt4 key购买 nike

我在创建响应式网页时遇到了一个奇怪的问题。

基本上，我创建了一个简单的 html 页面(第 1 页)并将其上传到 blob 存储。然后该页面在 Azure AD 的 B2C 门户中运行，该门户将登录表单插入我的 html 页面(使用 CORS)并向用户显示组合页面。由于我拥有最终合并页面(第 2 页)的源代码，它会自动将我的内容与 Azure 的表单合并，因此我也能够从我的本地计算机测试该页面。

我面临的问题是第 1 页(我上传到 blob)完美地延伸到窗口(高度和宽度)，但与 Azure 登录表单合并后的第 2 页不会沿高度延伸。

我已经使用 chrome 开发人员工具(在 chrome 上使用 F12 启用)验证了 page2 中 html/body 上的 css 样式是我应用的，浏览器/Azure 添加到它的唯一其他东西是 {display: block;}我认为这不应该导致当前的问题。

下面是源代码:-

第 1 页:

<html>
    <head>
        <title>User Details</title>
        <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/common-1.0.4.css">
            <link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/selfAsserted.1.0.8.css"> 
            <script src="https://login.microsoftonline.com/static/tenant/default/js/layout-1.0.0.min.js"></script>-->
        <style>
        #main_div {
        background-image:url('https://adasphase2.blob.core.windows.net/democontainerblockblob/mm_background.jpg'); 
        /* background-color: 00ff00; */
        height:100%;
        width:100%;
        background-repeat:no-repeat;
        background-size:100% 100%; 
        }
        body {
        /*background-color: #ff00ff;*/
        height:100%;
        width:100%;
        }
        h1 {
        font-size: 3vw;
        letter-spacing: 0px;
        color:#F8F8F8;
        font-family: sans-serif;
        padding:0% 5% 5% 5%;
        }
        img {
        width:100%; 
        padding-top:10%;		
        /*padding-top:10%; 
        padding-left:5%; 
        padding-right:5%*/
        }
        label[for=password] {
        display: none;
        }
        h2 {
        display: none;
        }
        {
        }
        label[for=logonIdentifier] {
        display: none;
        }
        #forgotPassword {
        display: none;
        }
        #password, #logonIdentifier {
        margin: 2% 5% 2% 5%;
        width: 90%;
        }
        #password, #logonIdentifier {
        margin: 1% 5%;
        width: 86%;
        padding: 2% 2%;
        }
        #next {
        background-color: #222222;
        border-style: solid;
        border-radius: 5px;
        border-color: #ffffff;
        color: white;
        padding: 2% 2%;
        text-align: center;
        font-size: 3vw;
        font-family: sans-serif;
        border-width: 1px;
        width: 90%;
        margin: 2% 5%;
        text-transform: uppercase;
        font-weight: bold;
        }
        #next:active {
        background-color: #444444;
        }
        div.create {
        display: none;
        }
        #forgot{
        font-size: 3vw;
        letter-spacing: 0px;
        color:#F8F8F8;
        font-family: sans-serif;
        margin:2% 5%
        }
        </style
    </head>
    <body>
        <div id="main_div">
            <img id="background_background_image" src="https://adasphase2.blob.core.windows.net:443/democontainerblockblob/splash_stacked_logo.png" alt="Illustration" />
            <h1>LOGIN WITH A TARPPORTAL.COM ACCOUNT OR CLICK REGISTER FOR A NEW ACCOUNT.</h1>
            <div id="api"></div>
        </div>
    </body>
</html>

Page2(组合页面):

<!DOCTYPE html>
<!-- Build: 1.0.0.114 -->
<html>
    <head>
        <title>Loading...</title>
        <script src="https://login.microsoftonline.com/static/library/require-2.1.17.min.js"></script>
        <script>window.staticHost="https://login.microsoftonline.com/static";window.targetSlice="001-000";</script>
        <script>var elementUrl="elements/selfasserted/unifiedSSP-1.0.8.min";</script>
        <script>define('template.CP', [/** no dependencies. **/], {"list":[]});
            define('template.SA_FIELDS', [/** no dependencies. **/], {"AttributeFields":[{"IS_TEXT":true,"IS_PASSWORD":false,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"LogonIdentifier","ID":"logonIdentifier","U_HELP":"","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false},{"IS_TEXT":false,"IS_PASSWORD":true,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"Password","ID":"password","U_HELP":"Enter password","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false}]});
            
            
            define('language.data', [/** no dependencies. **/], {"email_pattern":"^[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$","logonIdentifier_email":"Email Address","requiredField_email":"Please enter your email","logonIdentifier_username":"Username","createaccount_link":"Sign up now","requiredField_username":"Please enter your user name","createaccount_intro":"Don&#39;t have an account?","forgotpassword_link":"Forgot your password?","divider_title":"OR","cancel_message":"The user has forgotten their password","button_signin":"Sign in","social_intro":"Sign in with your social account","requiredField_password":"Please enter your password","invalid_password":"The password you entered is not in the expected format.","local_intro_username":"Sign in with your user name","local_intro_email":"Sign in with your existing account","invalid_email":"Please enter a valid email address","unknown_error":"We are having trouble signing you in. Please try again later."});
            
            define('settings.data', [/** no dependencies. **/], {"remoteResource":"https://adasphase2.blob.core.windows.net/democontainerblockblob/RemoteServicesLoginPage.html","retryLimit":3,"api":"CombinedSigninAndSignup","csrf":"R2lYeVl1cEJLYWlpdENnSHJoOHpITHZtWWFaR2Y4eCsvcUZiK3JsTDd5OXFBZFAzUDViNDBtSTczUTd1YnpPS3RpVURmd1dPOGM1K0FZYU5Fam1IRkE9PTsyMDE2LTA1LTE4VDIyOjEzOjU3LjQxNTEwMjJaO0F6U0VkYlRUbDlHenNoQkVHK1JYSUE9PTt7Ik9yY2hlc3RyYXRpb25TdGVwIjoxfQ==","transId":"eyJUSUQiOiJmN2I4ODJjOS03NmJlLTQ0MzktYWJjNi1hNzE1NjM3ZDM4MGQifQ","pageMode":0,"config":{"operatingMode":"Email","sendHintOnSignup":"False","forgotPasswordLinkLocation":"AfterLabel","includePasswordRequirements":"true"},"hosts":{"tenant":"/lexustmstest.onmicrosoft.com/B2C_1_TMS_Lexus_SignUpandSignIn_Policy","policy":"B2C_1_TMS_Lexus_SignUpandSignIn_Policy","static":"https://login.microsoftonline.com/static/"},"locale":{"lang":"en","country":"US"}});
            
        </script>
        <script>var cookieEnabled=navigator.cookieEnabled?!0:!1,Constants;typeof navigator.cookieEnabled!="undefined"||cookieEnabled||(document.cookie="probe",cookieEnabled=document.cookie.indexOf("probe")!=-1?!0:!1),function(){document.querySelectorAll||(document.querySelectorAll=function(n){var i=i=document.createStyleSheet(),r=document.all,f=r.length,t,u=[];for(i.addRule(n,"k:v"),t=0;t<f;t+=1)if(r[t].currentStyle.k==="v"&&(u.push(r[t]),u.length>Infinity))break;return i.removeRule(0),u});String.prototype.trim||function(){var n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;String.prototype.trim=function(){return this.replace(n,"")}}()}();cookieEnabled&&(Constants=[],Constants.ERROR_REDIRECT_CONSOLE_STRING="Redirecting back to B2C service with querystring",function(){for(var n,u=function(){},t=["assert","clear","count","debug","dir","dirxml","error","exception","group","groupCollapsed","groupEnd","info","log","markTimeline","profile","profileEnd","table","time","timeEnd","timeStamp","trace","warn"],i=t.length,r=window.console=window.console||{};i--;)n=t[i],r[n]||(r[n]=u)}(),require(["require"],function(){require.config({baseUrl:window.staticHost,paths:{jquery:"library/jquery-1.10.2.min",handlebars:"library/handlebars-2.0.0.min",requirecss:"library/require-css-0.1.8.min",simpleModal:"library/jquery.simplemodal-1.4.5.min",core:"js/core-1.0.17.min",metrics:"js/metrics-1.0.1.min",modal:"js/modal-1.0.1.min",iso:"js/iso-unified-1.0.2.min",element:elementUrl},map:{"*":{css:"requirecss"}},skipDataMain:!0});require(["core","settings.data","metrics","element"],function(n,t,i,r){try{window.Metrics=i;metricResource=window.Metrics.create(t.remoteResource);metricResource.start();function u(){var i,f=canSetHeaders=!0,e=t.retryLimit;window.XDomainRequest?(i=new XDomainRequest,f=canSetHeaders=!1):i=new XMLHttpRequest;i.open("GET",metricResource.id);canSetHeaders&&metricResource.id.indexOf(window.staticHost)===0&&i.setRequestHeader("x-ms-cpim-slice",window.targetSlice);i.onload=function(){var t,u;if(!f||f&&i.status===200){metricResource.end();t=(new Date).getTime();r.initialize(i.responseText);metricResource.setInitializationTime((new Date).getTime()-t);return}u="external?statusCode="+i.status+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(u);return};i.onerror=function(){var t=0,r;f&&(t=i.status);r="external?statusCode="+t+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(r)};i.timeout=function(){if(this.tryCount++,this.tryCount<=this.retryLimit){u();return}var t="external?statusCode=4&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(t);return};i.onprogress=function(){};i.send()}u()}catch(f){n.redirectToServer("error?statusCode=0&statusMessage="+encodeURIComponent(f.message)+"&resource="+encodeURIComponent(t.remoteResource))}})}))</script>
    </head>
    <body>
        <style>.no_display{display:none}.error_container h1{color:#333;font-size:1.2em;font-family:'Segoe UI Light',Segoe,'Segoe UI',SegoeUI-Light-final,Tahoma,Helvetica,Arial,sans-serif;font-weight:lighter}.error_container p{color:#333;font-size:.8em;font-family:'Segoe UI',Segoe,SegoeUI-Regular-final,Tahoma,Helvetica,Arial,sans-serif;margin:14px 0}</style>
        <noscript>
            <div id="no_js">
                <div class="error_container">
                    <div>
                        <h1>We can't sign you in</h1>
                        <p>Your browser is currently set to block JavaScript. You need to allow JavaScript to use this service.</p>
                        <p>To learn how to allow JavaScript or to find out whether your browser supports JavaScript, check the online help in your web browser.</p>
                    </div>
                </div>
            </div>
        </noscript>
        <div id="no_cookie" class="no_display">
            <div class="error_container">
                <div>
                    <h1>We can't sign you in</h1>
                    <p>Your browser is currently set to block cookies. You need to allow cookies to use this service.</p>
                    <p>Cookies are small text files stored on your computer that tell us when you're signed in. To learn how to allow cookies, check the online help in your web browser.</p>
                </div>
            </div>
        </div>
        <script>if (!cookieEnabled) document.getElementById('no_cookie').className = '';</script>
    </body>
</html>

感谢任何帮助/指点!

最佳答案

你可以试试

body, html { margin: 0; padding: 0; }

关于javascript - HTML 不延伸到服务器上的窗口但在本地工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37419393/

26 4 0
文章推荐： swift - 字典作为数组的通用元素
文章推荐： android - 如何将 NV21 YUV 转换为 RGB 并返回
文章推荐： arrays - 在 UICollectionViewCell 中创建多个 UIImageView
文章推荐： javascript - 如何在从 Google 电子表格中提取数据的 Google 图表上显示注释？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com