React Native Webview“onNavigationStateChange”仅在 iOS 设备上返回空 document.title

发布于 2025-01-12 18:56:40 字数 1894 浏览 2 评论 0原文

我正在尝试使用 Paypal 创建付款结账流程，并使用 WebView 处理 ExpressJS 后端的请求。 React Native应用程序读取后端渲染的html的document.title来确定事务的成功或失败。在 Android 上它工作得很好，但是在 iOS 上 document.title 总是返回为“”。

REACT NATIVE SECTION：

const INJECTED_JAVASCRIPT =
    `document.getElementById('total').value="${total}"; 
    document.getElementById('address').value="${address}"; 
    document.getElementById('firstName').value="${userProfile.firstName}";
    document.getElementById('lastName').value="${userProfile.lastName}";
    document.getElementById('email').value="${accessStore.auth.userEmail}";
    document.getElementById('addressDetails').value="${moreDetails}";
    setTimeout(function() {document.f1.submit()}, 1000);`
    
    
<WebView
     source={{uri: process.env.BACKEND_NODE_URL_PAYMENT}}
     onNavigationStateChange={(data) => {
         handleResponse(data), console.log(data)
     }}
     onMessage={(event) => {}}
     injectedJavaScript={INJECTED_JAVASCRIPT}
/>

EXPRESS SECTION

app.get('/success', (req, res) => {

    var PayerID = req.query.PayerID;

    var execute_payment_json = {
         "payer_id": PayerID,
    };

    var paymentId = req.query.paymentId;

    paypal.payment.execute(paymentId, execute_payment_json, function (error, payment)
    {
         if (error) {
              console.log(error.response);
              throw error;
         } else {
             res.render('success');
         }
    });
});

在 EXPRESS JS 中呈现 HTML 的

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>success</title>
</head>
<body>
<h1>Zahlung erfolgreich!</h1>
</body>
</html>

原文

I'm trying to create a payment checkout process with Paypal, and using WebView to handle the request on an ExpressJS backend. The React Native app reads the document.title of the rendered html in the backend to determine the success or failure of a transaction. On Android it works perfectcly, however on iOS the document.title is always returned as "".

REACT NATIVE SECTION:

const INJECTED_JAVASCRIPT =
    `document.getElementById('total').value="${total}"; 
    document.getElementById('address').value="${address}"; 
    document.getElementById('firstName').value="${userProfile.firstName}";
    document.getElementById('lastName').value="${userProfile.lastName}";
    document.getElementById('email').value="${accessStore.auth.userEmail}";
    document.getElementById('addressDetails').value="${moreDetails}";
    setTimeout(function() {document.f1.submit()}, 1000);`
    
    
<WebView
     source={{uri: process.env.BACKEND_NODE_URL_PAYMENT}}
     onNavigationStateChange={(data) => {
         handleResponse(data), console.log(data)
     }}
     onMessage={(event) => {}}
     injectedJavaScript={INJECTED_JAVASCRIPT}
/>

EXPRESS SECTION

app.get('/success', (req, res) => {

    var PayerID = req.query.PayerID;

    var execute_payment_json = {
         "payer_id": PayerID,
    };

    var paymentId = req.query.paymentId;

    paypal.payment.execute(paymentId, execute_payment_json, function (error, payment)
    {
         if (error) {
              console.log(error.response);
              throw error;
         } else {
             res.render('success');
         }
    });
});

RENDERED HTML IN EXPRESS JS

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>success</title>
</head>
<body>
<h1>Zahlung erfolgreich!</h1>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷乱花海 2025-01-19 18:56:40

我使用Web视图的onLoadProgress属性通过e.nativeEvent获取URL：

 onLoadProgress = {e => {
      let {url} = e?.nativeEvent;
}}

I used the onLoadProgress property of web view to get URL through e.nativeEvent:

 onLoadProgress = {e => {
      let {url} = e?.nativeEvent;
}}

回复收藏 0 原文

尸血腥色 2025-01-19 18:56:40

最后用不同的方法解决了。我使用了“url”值并在条件中使用它

 if (data.url.includes('https://example.com/success')) {
     ///do if payment successfull
 }
 
 if (data.url.includes('https://example.com/cencel')) {
     ///do if payment is cancelled
 }

Solved with a different approach in the end. I used the "url" value and used it in the conditional as

 if (data.url.includes('https://example.com/success')) {
     ///do if payment successfull
 }
 
 if (data.url.includes('https://example.com/cencel')) {
     ///do if payment is cancelled
 }

回复收藏 0 原文

醉梦枕江山 2025-01-19 18:56:40

根据我在 WebView 文档中读到的内容，为了将消息从 Web 传递到 React Native，您必须在 JavaScript 中使用 postMessage ，在 React 中使用 onMessage prop本机： https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating- Between-js-and-native

这在理论上意味着你的代码即使在 Android 上也不应该工作，所以你肯定有一个有趣的用例！

回复收藏 0 原文

老街孤人 2025-01-19 18:56:40

我在最近的一个应用程序中遇到了同样的问题，其中 html 是从 React-native 的后端处理的，
请原谅它不是 webview，

我使用 react-native-render-html 包来渲染收集的 html来自后端

import { View, Text } from 'react-native'
import React from 'react'
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

const ComponentHTML = ({body}) => {
 // body is the props sent down from parent as response of - api call
  const { width } = useWindowDimensions();
  const source_ = {html: `${body}`};
return (
   <View style={styles.announceMentView}>
    <RenderHtml
      contentWidth={width}
      source={source_}
   />
  </View>
 )
}
export default ComponentHTML

I faced the same in one of my recent apps where html is handled from backend in react-native,
pardon its not webview

i used react-native-render-html package to render the html collected from backend

import { View, Text } from 'react-native'
import React from 'react'
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

const ComponentHTML = ({body}) => {
 // body is the props sent down from parent as response of - api call
  const { width } = useWindowDimensions();
  const source_ = {html: `${body}`};
return (
   <View style={styles.announceMentView}>
    <RenderHtml
      contentWidth={width}
      source={source_}
   />
  </View>
 )
}
export default ComponentHTML

回复收藏 0 原文

~没有更多了~