javascript - WebView HTML 渲染问题

标签 javascript reactjs react-native webview

我正在用 React Native 构建一个应用程序。我有一个用例,我必须打开一些 eSinger 网关(例如在 Web 应用程序中打开的支付网关)。在这个网关中,我必须从后台发布带有 PDF 文件的 base64 数据的表单,以便他们可以将我重定向到他们的网关页面,但有时我用来呈现此页面的 HTML 字符串太大,它会破坏 Web View 。

组件的render()中的代码是:

<WebView
   source={{html: this.state.data}}
   scalesPageToFit={true}
   onNavigationStateChange={ this.onNavigationStateChange.bind(this) }
 />

我在 constructor 中使用如下字符串初始化 data:

let data = `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type = "text/javascript" src = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Verigo</title></head><body style="margin-top:10%;margin-left:10%;margin-right:10%;"><form action="` + POST_URL + `" id="frmdata" method="post"><input id="File" Name="File" type="hidden"/><input id="Name" name="Name" type="hidden" value=""><input id="SelectPage" name="SelectPage" type="hidden" value="ALL"><input data-val="true" data-val-number="The field SignatureType must be a number." data-val-required="The SignatureType field is required." id="SignatureType" name="SignatureType" type="hidden" value="3"><input id="SignaturePosition" name="SignaturePosition" type="hidden" value="Customize"><input id="AuthToken" name="AuthToken" type="hidden" value=""><input id="PageNumber" name="PageNumber" type="hidden" value=""><input id="Data" name="Data" type="hidden" value=""><input id="FileType" name="FileType" type="hidden" value="PDF"><input data-val="true" data-val-required="The PreviewRequired field is required." id="PreviewRequired" name="PreviewRequired" type="hidden" value="True"><input id="CustomizeCoordinates" name="CustomizeCoordinates" type="hidden" value=""><input id="PagelevelCoordinates" name="PagelevelCoordinates" type="hidden" value=""><input id="ReferenceNumber" name="ReferenceNumber" type="hidden" value=""><input id="IsCosign" name="IsCosign" type="hidden" value=""><input id="SUrl" name="SUrl" type="hidden" value=""><input id="CUrl" name="CUrl" type="hidden" value=""><input id="FUrl" name="FUrl" type="hidden" value=""><center style="position:absolute;top:35%;left:5%"><div><img src="/Content/Img/ajax-loader.gif"><div><p style="font-size:15px;">Redirect to Aadhaar OTP screen.Please don't cancel or press back.This process can take some time.</p></div></div></center></form><script type="text/javascript">$(document).ready(function () {$('#ReferenceNumber').val('` + this.props.transaction_id + `');$('#FileType').val('PDF');$('#File').val('` + this.props.base64 + `');$('#Name').val('` + this.props.sign_payload.user_name + `');$('#AuthToken').val('` + this.props.auth_token + `');$('#SignatureType').val('3');$('#SelectPage').val('ALL');$('#SignaturePosition').val('Customize');$('#PageNumber').val('');$('#PagelevelCoordinates').val('');$('#CustomizeCoordinates').val('` + [this.props.sign_payload.yx, this.props.sign_payload.yy, 150, 150].join(",") + `');$('#PreviewRequired').val('False');$('#IsCosign').val('True');$('#SUrl').val('` + surl + `');$('#FUrl').val('` + furl + `');$('#CUrl').val('` + curl + `');$('#frmdata').submit();});</script></body></html>`

上面 HTML 中的主要 javascript 代码是:

$(document).ready(function () {$('#ReferenceNumber').val('` + this.props.transaction_id + `');$('#FileType').val('PDF');$('#File').val('` + this.props.base64 + `');$('#Name').val('` + this.props.sign_payload.user_name + `');$('#AuthToken').val('` + this.props.auth_token + `');$('#SignatureType').val('3');$('#SelectPage').val('ALL');$('#SignaturePosition').val('Customize');$('#PageNumber').val('');$('#PagelevelCoordinates').val('');$('#CustomizeCoordinates').val('` + [this.props.sign_payload.yx, this.props.sign_payload.yy, 150, 150].join(",") + `');$('#PreviewRequired').val('False');$('#IsCosign').val('True');$('#SUrl').val('` + surl + `');$('#FUrl').val('` + furl + `');$('#CUrl').val('` + curl + `');$('#frmdata').submit();});

当大小为 1 MB 左右的文件的 base64 正常工作但之后开始崩溃时。 我的 HTML 字符串长度是 4548156。

我可以将多长的 HTML 字符串传递给 WebView?

提前致谢。

最佳答案

我用于呈现 DOM 的数据字符串太长(由于 base64),因此无法呈现。 我通过调用我的 API 解决了这个问题,它通过 ajax 调用在上面的 javascript 中为我提供了 base64 数据,并在运行时将 base64 设置为 #File,这解决了这个问题。

关于javascript - WebView HTML 渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47184731/

相关文章:

javascript - 取消选中数组中的复选框后如何删除元素?

android - 如何从 React Native 打开其他应用程序?

react-native - Realm 与 React Native 0.29 兼容吗?

javascript复选框到按钮

javascript - 有没有办法直接访问 CSS 网格中自动放置元素的实际网格坐标?

reactjs - npm install react-native-paper 期间出现问题

android - react native - "undefined is not an object react native evaluating this.props.navigation"

react-native - Facebook iOS 应用程序是用 React Native 构建的吗?

javascript - 如何通过 react-arcgis npm 将图层添加到 arcgis map ?

javascript - 具有重复键的选择框