WebView 上的 ChatGPT 显示空白

问题描述 投票:0回答:0

问题症结:

  • Android的
    Chrome
    浏览器登录并显示ChatGPT正常并允许交互式输入和输出。
  • 我的应用程序
    WebView
    OTOH 可以很好地登录到 ChatGPT 但是一旦登录,就会显示一个空白页面。
  • 我的应用程序的
    WebView
    显示正常(如
    Chrome
    所有我测试过的其他网站。

由于 current

Chrome
WebView
都基于
AppleWebKit/537.36
,我很困惑这可能是什么原因。 对于如何进一步解决此问题的任何想法或提示,我将不胜感激。

我验证了我的 WebView 设置:

WebView webView = findViewById(R.id.webView);
webView.setWebViewClient(new WebViewClient());
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDisplayZoomControls(false);
webView.setWebChromeClient(new WebChromeClient());

但没有帮助。

然后我从

ChatGPT
捕获了 HTML 的<body> 部分,但找不到对这种奇怪行为的解释:

<body>
    <div id="__next">
        <div style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"/>
        <div/>
        <div class="overflow-hidden w-full h-full relative">
            <div class="flex h-full flex-1 flex-col md:pl-[260px]">
                <div class="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
                    <button type="button" class="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white">
                        <span class="sr-only">Open sidebar</span>
                        <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                            <line x1="3" y1="12" x2="21" y2="12"/>
                            <line x1="3" y1="6" x2="21" y2="6"/>
                            <line x1="3" y1="18" x2="21" y2="18"/>
                        </svg>
                    </button>
                    <h1 class="flex-1 text-center text-base font-normal">New chat</h1>
                    <button type="button" class="px-3">
                        <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                            <line x1="12" y1="5" x2="12" y2="19"/>
                            <line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                    </button>
                </div>
                <main class="relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1">
                    <div class="flex-1 overflow-hidden">
                        <div class="react-scroll-to-bottom--css-ngzlr-79elbk h-full dark:bg-gray-800">
                            <div class="react-scroll-to-bottom--css-ngzlr-1n7m0yu">
                                <div class="flex flex-col items-center text-sm dark:bg-gray-800">
                                    <div class="w-full h-32 md:h-48 flex-shrink-0"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:!bg-transparent dark:md:bg-vert-dark-gradient pt-2">
                        <form class="stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-3xl">
                            <div class="relative flex h-full flex-1 md:flex-col">
                                <div class="flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]">
                                    <textarea tabindex="0" data-id="root" rows="1" class="m-0 w-full resize-none border-0 bg-transparent p-0 pr-7 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pl-2 md:pl-0" style="max-height: 200px; height: 24px; overflow-y: hidden;"/>
                                    <button class="absolute p-1 rounded-md text-gray-500 bottom-1.5 md:bottom-2.5 hover:bg-gray-100 dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent right-1 md:right-2">
                                        <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 mr-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                            <line x1="22" y1="2" x2="11" y2="13"/>
                                            <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                                        </svg>
                                    </button>
                                </div>
                                <div class="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center"/>
                            </div>
                        </form>
                        <div class="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
                            <a href="https://help.openai.com/en/articles/6825453-chatgpt-release-notes" target="_blank" rel="noreferrer" class="underline">ChatGPT Mar 14 Version</a>. Free Research Preview. Our goal is to make AI systems more natural and safe to interact with. Your feedback will help us improve.</div>
                    </div>
                </main>
            </div>
        </div>
        <div class="absolute top-0 left-0 right-0 z-[2]"/>
    </div>
    <next-route-announcer>
        <p aria-live="assertive" id="__next-route-announcer__" role="alert" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;"/>
    </next-route-announcer>
    <div portal-container="">
        <span class="pointer-events-none fixed inset-0 z-[60] mx-auto my-2 flex max-w-[560px] flex-col items-stretch justify-start md:pb-5"/>
    </div>
    <div id="headlessui-portal-root">
        <div data-headlessui-portal="">
            <button type="button" aria-hidden="true" style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"/>
            <div>
                <div class="relative z-50" id="headlessui-dialog-:r1:" role="dialog" aria-modal="true" data-headlessui-state="open">
                    <div class="fixed inset-0 bg-gray-500/90 transition-opacity dark:bg-gray-800/90 ease-out duration-75 opacity-100"/>
                    <div class="fixed inset-0 z-50 overflow-y-auto">
                        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                            <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-900 sm:my-8 sm:w-full sm:max-w-lg px-4 pt-5 pb-4 sm:p-6 ease-out duration-300 opacity-100 translate-y-0 sm:scale-100" id="headlessui-dialog-panel-:r2:" data-headlessui-state="open">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="text-center sm:text-left"/>
                                    </div>
                                    <div/>
                                </div>
                                <div class="prose dark:prose-invert">
                                    <div class="mb-5">
                                        <h2 class="!mt-4 font-normal !mb-2">
                                            <b>ChatGPT</b>
                                        </h2>
                                    </div>
                                    <div class="w-full h-[1px] bg-gray-300 opacity-20"/>
                                    <h4 class="mb-4">This is a free research preview.</h4>
                                    <div class="flex gap-4 flex-col text-sm">
                                        <div class="flex p-4 bg-gray-50 dark:bg-white/5 rounded-md items-center gap-4 min-h-[71px]">
                                            <div class="w-10 text-2xl text-center">🔬</div>
                                            <div class="flex-1 leading-5">Our goal is to get external feedback in order to improve our systems and make them safer.</div>
                                        </div>
                                        <div class="flex p-4 bg-gray-50 dark:bg-white/5 rounded-md items-center gap-4 min-h-[71px]">
                                            <div class="w-10 text-2xl text-center">🚨</div>
                                            <div class="flex-1 leading-5">While we have safeguards in place, the system may occasionally generate incorrect or misleading information and produce offensive or biased content. It is not intended to give advice.</div>
                                        </div>
                                    </div>
                                    <div class="flex gap-4 mt-6">
                                        <button class="btn relative btn-neutral ml-auto" tabindex="0">
                                            <div class="flex w-full items-center justify-center gap-2">Next</div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" aria-hidden="true" style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"/>
        </div>
    </div>
</body>

知道如何解决这个问题吗?

起点可以是了解 https://chat.openai.com/chat 与其他网站相比的结构或行为有何特别之处。

javascript android html webview android-webview
© www.soinside.com 2019 - 2024. All rights reserved.