React Native WebView injectedJavaScript 报错window.postMessage

最新推荐文章于 2024-05-26 23:19:15 发布
原创 最新推荐文章于 2024-05-26 23:19:15 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react native

本文提供了一个解决方案，通过重新定义injectedJavaScript中的window.postMessage方法来修复其存在的问题。具体实现是覆盖原有的postMessage方法，并在覆盖的方法中调用原始的postMessage方法，同时修改toString方法返回值，以达到修复目的。

解决方案：

定义injectedJavaScript

(function() {

  var originalPostMessage = window.postMessage;

  var patchedPostMessage = function(message, targetOrigin, transfer) {

    originalPostMessage(message, targetOrigin, transfer);

  };

  patchedPostMessage.toString = function() {

    return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');

  }; 

window.postMessage = patchedPostMessage;

})();

<WebView injectedJavaScript={patchPostMessageJsCode} /> 

这样就可以解决window.postMessage的问题了 

reactNative之Webview与h5互调
03-26
injectedJavaScript={`window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); };`} /> ... componentDidMount() { this.webViewRef.postMessage('Hello from React Native!');...
微信小程序webview与h5通过postMessage实现实时通讯的实现
01-19
在做 React Native 应用时，如果需要在 App 里面内嵌 H5 页面，那么 H5 与 App 之间可以通过 Webview 的 PostMessage 功能实现实时的通讯，但是在小程序里面，虽然也提供了一个 webview 组件，但是，在进行 post...
ReactNative 中 webview 与H5进行交互
闫瑞锋的博客
03-11 1488
https://www.jianshu.com/p/44365ec64e4a
React Native与WebView的交互
热门推荐
wh义华的专栏
11-16 1万+
1、WebView中注入JavaScript在webview中通过injectJavaScript注入javascript的方法时，使用方法如下injectJavaScript={this.init()} init()方法定义如下 init = () => { // todo something }通过injectedJavaScript注入javascript字符串时，只能注入静态的文本代
React-Native之WebView组件 - Native与Web的通信和交互
举世武双的博客
12-13 3744
文档地址：https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native WebView组件是RN端与Web端交互的一个常用组件。 原本WebView组件是放在react-native组件库当中的，现在R...
WebView注入JavaScript代码
Noodles_ck的博客
10-23 1552
应用需要统计网页打开情况，部分三方网页在网页跳转时无法在onPageFinished中监测到。使用代码注入在网页url发生变化时调用原生代码，传入新的url。
React Native之网页组件WebView的使用与通信
03-29 382
在实际开发中，我们通常会嵌入一些html页面，官方为我们提供了一个非常好用的网页组件WebView，通过这个组件我们可以通过传入一个url或者是传入一段html 一. WebView的基本属性方法介绍与使用 主要属性介绍 source：在 WebView 中载入一段静态的 html 代码或是传入一个 url（还可以附带一些 header 选项） automaticallyAdjus...
react native webview window.reactnativewebview.postmessage
11-21
`window.ReactNativeWebView.postMessage(message)`是React Native WebView组件中用于向WebView发送消息的方法。如果你在React Native中使用WebView组件，可以通过在WebView中注入JavaScript代码来调用该方法。具体...
react native与webview通信的示例代码
08-29
在 WebView 的网页中，我们可以使用 window.postMessage 方法来发送数据到 React Native 端。同时，在 React Native 端，我们需要使用 onMessage 方法来处理来自 WebView 的数据。 在这个示例代码中，我们首先构建...
React Native WebView组件实现，支持iOS的postMessage
通过这个模块，开发者可以在iOS设备上使用WebView，并且能够利用`window.postMessage`这一Web API进行通信。 ### 描述知识点说明 在描述中，我们首先看到了“响应本机WebView”，这表明react-native-web-view允许...
ReactNative WebView组件详解
weixin_34275734的博客
08-13 702
源码传送门 react-native-webview-plugin插件 在开发Android的时候，一般我们会有一些加载网页的需求，或者执行一些JavaScript，我们都知道在Android中实现这个功能的控件是WebView,在ReactNative中也有实现此类需求额的组件，它的名字也是WebView。那么今天的这篇文章就来详细说说在ReactNative WebView的使用。本文示例效果...
史上最强reactNative中react-native-webview交互封装
xiaoerduo123x的博客
01-16 1225
在开发reactNative过程中，一些复杂易变的需求，我们也会经常写在H5的项目中，这时候就需要RN和H5交互的效果了，以下是我封装的webview代码。
ReactNative进阶（十）：WebView 应用详解
IT全栈 华强工作室
04-26 8135
使用WebView组件可通过url来加载显示一个网页，也可以传入一段html代码来显示。下面对其主要属性和方法进行介绍。1. 主要属性source：在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）；：设置是否自动调整内容。bool；：设置内容所占的尺寸大小。：当网页加载之前注入一段js代码。其值是字符串形式。（默认值：无）：是否开启页面加载的状态，其值为true或者false。bounces（仅iOS，默认值：true）：回弹特性。如果设置为false。
Android WebView的Js对象注入漏洞解决方案
最新发布
2401_85112737的博客
05-26 473
关于这个问题，我们的方法是通过Js声明的，通过loadUrl的形式来注入到页面中，其实本质相当于把我们这动态生成的这一段Js直接写在Html页面中，所以，这些Js中的window中虽然包含了我们声明的对象，但是他们并不是Java对象，他们是通过Js语法声明的，所以不存在getClass之类的方法。本质上他们是Js对象。这里严格说来，应该有一个需要过滤方法的列表。**方法中，我们去解析传递过来的文本，得到方法名，参数等，再通过反射机制，调用指定的方法，从而调用到Java对象的方法。
React-native WebView通信坑 2019-08-08
zarek_jiamu的博客
08-08 1414
1.父级向子级发布数据： a.设置结点 ref='webView'； b.发布信息： onLoadEnd={() => { this.refs.webView.postMessage('RN向H5发送的消息'); }} 2.子级接收数据： a.首先想到监听方法与h5的生命周期； b.其次监听订阅：window.onload =...
react 调用 html5,React-Native Webview 和H5交互的两种方式
weixin_39865625的博客
06-09 1064
React-Native WebView 和H5交互有两种方式：方式1：RN Webview 向H5注入JS此方式可作为Webview向H5端传递数据。RN Webview 有以下属性，可以注入一段js，然后在相应的时间调用。injectedJavaScript 设置 js 字符串，在网页加载之前注入的一段 JS 代码。类型必填string否思路：通过injectedJavaScript 注入J...
react native WebView 高度自适应 RN与网页交互
Lee_taotao的博客
06-08 4138
首先介绍几个属性和方法1、source    {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number   在WebView中载入一段静态html代码或者url（还可以附带一些header选项）。2、injectedJavaScript     设置在网...
React Native WebView 开发中的各种问题
xingxingxingge的博客
06-10 4569
1.WebView 嵌入 html 代码时乱码, 在后面加 baseUrl: '' <WebView source ={{html:"<h1> html </h1>", baseUrl: ''}}></WebView> 2.浏览器返回上一页 //定义 canGoBack constructor(props){ super(props...
rn webview问题
吴蕴强的博客
05-25 2521
1：Error loading page Domain: WebKitErrorDomain Error Code: 101 The URL can’t be shown 参考：https://github.com/wuyunqiang/ReactNativeUtil/issues/48 1：webview添加header问题 header中是以key:value的形式存在的并且，ke...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值