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

【问题标题】：Why does javascript not work in RN webview but desktop browser works fine?为什么javascript在RN webview中不起作用但桌面浏览器工作正常？
【发布时间】：2021-01-17 07:20:51
【问题描述】：

我在一个 RN 项目 (v.61.5) 中使用 react-native-webview (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 片段。以前有人处理过这个吗？

【问题讨论】：

标签： javascript react-native react-native-webview

【解决方案1】：

当我从事开发工作时，我使用 localhost 来托管服务器端点（这是 Stripe 重定向到的页面上的 GET 请求中使用的 url。

我发现由于某种原因，即使重定向页面本身没有在本地托管，模拟器也不会与重定向页面上的 javascript 配合。

我更改为我的生产 API 端点，突然间 WebView 决定执行 JS 没问题。真的不知道为什么，如果有人想发表评论，我可以添加到答案中。

【讨论】：