Facebook 社交登录页面正在加载偏离中心

问题描述

我正在启动一个用于 Facebook 社交登录的弹出窗口。

但是当连接到 Facebook 时,“https://facebook.com/login/reauth.PHP页面会偏离中心加载。因此,对用户隐藏了一半的表单和“继续”按钮。

Facebook 加载时的样子(偏离中心):https://imgur.com/a/dxhjSfA

但我需要它像这样加载(在弹出窗口中):https://imgur.com/a/n8Swqs2

如何让它居中?

这是我用来启动弹出窗口的内容。它在打开窗口的中心启动,但我无法使加载的 Facebook 页面在弹出窗口中居中:

let windowObjectReference = null;
let prevIoUsUrl = null;

const openSignInWindow = (url,name) => {

    // remove any existing event listeners
    window.removeEventListener('message',receiveMessage);

    // window features (open in center of opening window - works well for multi monitor setups)
    const w = '600';
    const h = '700';
    const y = window.outerHeight / 2 + window.screenY - ( h / 2);
    const x = window.outerWidth / 2 + window.screenX - ( w / 2);
    const strWindowFeatures =
        `toolbar=no,menubar=no,width=${w},height=${h},top=${y},left=${x}`;

    if (windowObjectReference === null || windowObjectReference.closed) {
        /* if the pointer to the window object in memory does not exist
         or if such pointer exists but the window was closed */
        windowObjectReference = window.open(url,name,strWindowFeatures);
    } else if (prevIoUsUrl !== url) {
        /* if the resource to load is different,then we load it in the already opened secondary window and then
         we bring such window back on top/in front of its parent window. */
        windowObjectReference = window.open(url,strWindowFeatures);
        windowObjectReference.focus();
    } else {
        /* else the window reference must exist and the window
         is not closed; therefore,we can bring it back on top of any other
         window with the focus() method. There would be no need to re-create
         the window or to reload the referenced resource. */
        windowObjectReference.focus();
    }

    // add the listener for receiving a message from the popup
    window.addEventListener('message',receiveMessage,false);

    // assign the prevIoUs URL
    prevIoUsUrl = url;

};

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)