javascript - 为什么javascript在RN webview中不起作用但桌面浏览器工作正常？

问题描述

我react-native-webview在一个 RN 项目（v.61.5）中使用（v9.4.0）来显示一个 url。首先它转到条带 oauth 链接，然后条带重定向到我选择的网址。

笔记：

这个重定向网址在我的桌面浏览器上运行良好
页面内容不多，但几乎所有页面内容都是由Javascript生成的
当模拟器打开 webview 时，它确实成功导航到了 url，因为渲染了 body 的背景颜色。(iOS)
在模拟器设置中启用了 javascript
此重定向 URL 的先前版本正在运行。我使用了 fetch ，它立即发出请求并静态显示 html 标记，它工作没有问题。现在我立即使用 jquery ajax 调用，并用 JS 设置 html，但它不起作用

网页浏览：

<WebView
  style={{ height: height, width: width }}
  ref={(ref) => (this.webview = ref)}
  source={{ uri: this.props.stripe }}
  renderError={(error) => <View style={{ flex: 1 }}><Text>{error}</Text></View>}
  onError={syntheticEvent => {
    const { nativeEvent } = syntheticEvent;
    console.warn('WebView error: ', nativeEvent);
  }}
  onNavigatorStateChange={(event) => {
    if (event.url !== this.props.stripeUri) {
      this.webview.stopLoading();
      Linking.openURL(event.url);
    }
  }}
  javaScriptEnabled={true} //even though this is true by default
/>

重定向网址html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <style>
            body {
                background-color: #454C66;
            }
            .container {
                display: grid;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 90vh;
            }
            .wrapper {
                display:flex;
                flex-direction: column;
                align-items: center;
            }
            #status {
                color: #FFFFFF;
                font-size: 36px;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="wrapper">
                <h1 id="status"></h1>
                <!-- Used to display progress -->
                <div id="spinner" class="spinner-grow text-light"></div>
            </div>
        </div>

        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        
        <!-- Latest compiled Bootstrap JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

        <script type="text/javascript">
            var $j = jQuery.noConflict();
            let status = document.getElementById("status");
            let spinner = document.getElementById("spinner");
            status.innerHTML = 'Connecting...';

            const SERVER_URL = "http://localhost:5000/connect";

            var STRIPE_USER_ID;

            const url = new URL(document.URL)
            const urlParams= new URLSearchParams(url.search)
            const stripe_code = urlParams.get("code")
        
            if( stripe_code == null ) {
                status.innerHTML = "Stripe is not authorized."
                spinner.style.display = "none";
            } else {  
                $j.ajax({
                    url: ERVER_URL + "/complete?code=" + stripe_code,
                    type: 'GET',
                    success: function(res) {
                        console.log("success")
                        console.log(res)
                        spinner.style.display = 'none'
                        status.innerHTML = res.message
                    },
                    error: function(jqXHR, textStatus, error) {
                        console.log("error")
                        console.log(error)
                        spinner.style.display = 'none'
                        status.innerHTML = error
                    }
                })
            }
            function createForm(msg) {
                $("#status").html(msg);
                
                // create form
                $("h1").append("<form style='padding-left: 20%; padding-right:20%' id='form' onSubmit='return submitId()'> <div style='margin-top: 30px' class='form-group align-items-center'> <label>Paste the Id from the earlier step:</label> <input name='aflareId' class='form-control' id='some-id' type='text'> </div> <button form='form' onclick='submitId()' formmethod='post' type='button' class='btn btn-danger'>Submit</button> </form> <h5 style='text-align: center; margin-top:10px' id='progress-label'></h5>")
            }

            function submitId() {
                spinner.style.display = "block";
                $j.ajax({
                    url: SERVER_URL + '/link',
                    type: 'POST',
                    data: {
                        docId: $('#some-id').val(),
                        stripeId: STRIPE_USER_ID
                    },
                    success: function(res) {
                        console.log("success")
                        console.log(res)
                        spinner.style.display = 'none'
                        status.innerHTML = res.message
                    },
                    error: function(jqXHR, textStatus, error) {
                        console.log("error")
                        console.log(error)
                        spinner.style.display = 'none'
                        status.innerHTML = error
                    }
                })
            }
         </script>
    </body>
</html>

Webview 正在工作，但显然在 JS 方面存在问题，考虑到 JS 中发生的第一件事是呈现两个 html 片段。以前有人处理过这个吗？

标签： javascriptreact-nativereact-native-webview

javascript - 为什么javascript在RN webview中不起作用但桌面浏览器工作正常？

问题描述

解决方案

推荐阅读