React Native Webview未重置注入的JavaScript
React Native Webview是一个用于在React Native应用中嵌入Web内容的组件。它提供了一个原生的Webview视图，可以加载和显示Web页面，并且可以与React Native应用进行交互。
未重置注入的JavaScript是指在使用React Native Webview时，如果没有正确重置已注入的JavaScript代码，可能会导致安全漏洞。这是因为Webview在加载Web页面时，可以通过注入JavaScript代码来与React Native应用进行通信和交互。然而，如果注入的JavaScript代码没有被正确重置，那么在加载下一个Web页面时，之前注入的代码仍然存在，可能会被恶意网站利用来进行攻击。
为了解决这个问题，开发人员应该在每次加载新的Web页面之前，通过调用Webview.injectJavaScript()方法来重置已注入的JavaScript代码。这样可以确保每次加载新页面时，都是一个干净的环境，减少安全风险。
React Native Webview的优势在于它可以将Web内容无缝地嵌入到React Native应用中，使得开发人员可以利用Web技术来构建丰富的用户界面和交互体验。它还提供了丰富的API和事件，可以方便地与Web页面进行通信和交互。
React Native Webview的应用场景包括但不限于：
- 在React Native应用中嵌入第三方Web内容，如社交媒体插件、广告等。
- 构建混合应用，将Web页面与原生界面结合起来，提供更好的用户体验。
- 开发跨平台的应用，通过一套代码同时在iOS和Android上展示Web内容。
腾讯云提供了一系列与Web开发相关的产品，可以与React Native Webview结合使用，以提供更全面的解决方案。其中包括：
- 腾讯云CDN（内容分发网络）：用于加速Web内容的传输，提高用户访问速度和体验。详情请参考：腾讯云CDN产品介绍
- 腾讯云云服务器（CVM）：提供可靠的云服务器实例，用于托管Web应用和后端服务。详情请参考：腾讯云云服务器产品介绍
- 腾讯云云数据库MySQL版：提供高性能、可扩展的关系型数据库服务，用于存储Web应用的数据。详情请参考：腾讯云云数据库MySQL版产品介绍
- 腾讯云云函数（SCF）：用于运行无服务器的后端逻辑，可以与React Native Webview结合使用，实现更复杂的业务逻辑。详情请参考：腾讯云云函数产品介绍
通过结合使用这些腾讯云产品，开发人员可以构建安全、高效的React Native应用，并将Web内容无缝地嵌入其中。
相关·内容
我正在尝试注入JS代码，以便在加载内容之前通知用户，但是，对我来说，它只是转到活动指示器并加载Webview，而没有注入任何Javascript。我该怎么解决这个问题？代码如下：
import React from 'react';
import { View, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import styles from '../../styles';
export defa
浏览 7提问于2021-05-07得票数 1
回答已采纳
我正在做一个数学教学项目(React-native移动应用程序)，并使用wiris设置问题和答案。wiris在MathML中发送这些问题，我正在使用npm包react-native-mathjax将MathML(等式、图形等)转换为JSX。 我的网络团队已经用vue.js在网络上开发了同样的东西，wiris也提供了输入域变量来写答案，我需要使用一些javascript函数对这些变量进行一些中间计算/重新格式化，这些函数是用javascript和web开发人员(vue.js)写在外部文件中的。 我试图在webview中注入js代码，但是无法在react-native中导入js函数文件，有人能给
浏览 38提问于2020-11-01得票数 0
我正在使用react-native webview在我的react-native应用程序中显示一些web内容。我的应用程序font-family和webview font-family是不同的。我想从应用程序中更改webview font-family。 有什么方法可以改变webview (webview-font-from-assets directory)的字体吗?请帮助我..谢谢
浏览 36提问于2020-09-02得票数 5
我无法将这个简单的js代码注入到react-native webview中。
import React, { Component } from 'react';
import { Platform,
StyleSheet,
Text,
View,
WebView
} from 'react-native';
export default class App extends Component<{}> {
injectjs(){
let jsCode = 'alert(hello)';
re
浏览 10提问于2017-10-11得票数 10
以前的版本不起作用，因为它是新的。 "react-native-webview"："^9.0.2“"react-native"："0.62.0"， 2. webview options
javaScriptEnabled={true}
mediaPlaybackRequiresUserAction={false}
startInLoadingState={true}
allowUniversalAccessFromFileURLs={true}
onMessage={this.respondToOnMessage}
3. react-
浏览 83提问于2020-04-03得票数 0
1回答
我正在通过我目前的网站，这是在React开发的WebView创建一个React Native应用。有一些组件，我不想显示在应用程序上，我想隐藏它。有没有办法做到这一点。
我试过使用injectedJavaScript函数。通过web浏览器找到组件的div类，并通过document.getElementsByClassName('class')[0].style.display='none'将其隐藏
这在浏览器上有效，但在我的ReactNative WebView上无效。有没有办法在React Native WebView中禁用react.js组件？
浏览 12提问于2021-03-05得票数 0
我想隐藏嵌入到React Native WebView中的特定页面的页眉。目前，我使用类似这样的东西来动态删除头文件：
<WebView
... some other props ...
injectedJavaScript={'function hideHead(){document.getElementById("head").style.display="none";};hideHead();'}
/>
有时您仍然可以看到标题闪烁，所以我猜在页面加载到WebView中之后会对此JavaScript求值。
有没有可能
浏览 3提问于2015-11-20得票数 5
回答已采纳
我使用react本机开发一个应用程序，但我试图从我的setConf()函数中调用app.js，但显然React不识别在导入这个js时存在于Script.js文件中的文档，如何在不出现文档问题的情况下调用该函数？谢谢
错误: ReactNativeJS: ReferenceError:找不到变量:文档
import React from 'react';
import {
StyleSheet,
Text,
Button,
View
} from 'react-native';
import WebView from 'react-nati
浏览 3提问于2020-03-26得票数 1
我有一个带有WebView的简单功能组件，在TabNavigator中，当选项卡聚焦时，我想注入一些javascript，如下所示：
import React, {useRef, useEffect} from 'react';
import {WebView} from 'react-native-webview';
export default (props) => {
const webViewRef = useRef();
React.useEffect(() => {
const unsubscribe = props
浏览 0提问于2020-09-09得票数 4
回答已采纳
我最近开始使用React Native开发一个涉及web抓取的应用程序。我们一直在使用一个叫做React Native WebView桥的组件，它类似于Obj-C中的UIWebViewBridge库，但有一些问题。由于React Native是异步的，我们在返回信息时遇到了麻烦，因为应用程序经常不可预测地调用WebView桥的render函数。有时WebView桥模块会调用我们注入的javascript 1次，有时会调用3次。
在React Native中有没有更好的方法来有效地抓取信息和注入javascript？
这是我们使用的React Native的的链接。
浏览 0提问于2016-06-21得票数 4
1回答
在目标-c中实现以下快速代码？
、、、、
我正在通过react-native实现web视图。因此，我使用react-native-webview库。但是，"window.open“和"window.close”没有在react-native-webview中实现。
我需要为social login应用这部分代码。所以我找到了swift代码文档。但是，我不知道如何将此文档更改为objective-c代码。
swift文件
// webView list management
var webViews = [WKWebView]()
...
func webView(_ webView: WKWebV
浏览 6提问于2022-03-16得票数 0
回答已采纳
我的世博应用程序的WebViewScreen代码：
import React from 'react';
import { WebView } from 'react-native-webview';
export default WebViewScreen = () => (
<WebView
originWhitelist={['*']}
source={{ uri: 'https://www.google.com' }}
/>
);
但是当我运行它时，我会得
浏览 6提问于2020-02-04得票数 4
我试图在加载到WebView通知上的iOS中执行javascript。我试图获得一个痛苦的简单示例来工作，但它总是抛出一个未定义的或TypeError。
以下是代码：
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Compo
浏览 5提问于2020-02-20得票数 0
嗨，我正在使用react native的webview来显示网站的url。我希望当用户单击网站内的链接(不属于我的域的行)时，它将打开用户的浏览器与该链接。 如果我有这个域名example.com，并且当我点击一个按钮example.com/about-us时，它变成了类似的东西(这没问题) 但是如果我有这个域名example.com，并且当我点击一个按钮anotherdomain.com (这应该是在用户浏览器中打开，而不是在我的webview应用程序中)时，它会变成这样。 我看过这个主题，但它没有给我需要的东西。我正在使用我的webview应用程序中的Expo。https://stack
浏览 19提问于2019-06-15得票数 0
如何重新渲染在使用react原生构建的应用程序中运行的web视图。举个例子:购物车标签需要在我每次点击时加载相同的url。
这是cart类：
import React, { useState } from 'react';
import { ActivityIndicator, WebView, View, Button, ScrollView,
RefreshControl,
Text, } from 'react-native';
import Config from '../config';
export default cl
浏览 12提问于2020-02-17得票数 0
为IOS准备一个中等规模的生产级应用程序。
应用程序使用了大量的本地功能，并试图集成其中的一些功能，我转而使用。手动使用Podfile文件。
这帮助我克服了所有的构建失败，并最终可以让RN应用程序运行。
直到现在，才有一个非常模糊的错误：
Unhandled JS Exception: Native module cannot be null
很难弄清楚是哪个第三方的包裹导致了这一切。许多git问题都指向将正确的包添加到Podfile文件和pod install中，而我这样做了，但joy仍然没有。
这些是` `git问题，其中大多数是在一个具体的一揽子方案中：
浏览 4提问于2020-04-26得票数 1
我目前正在开发一款有多种媒体来源的应用程序。其中之一是使用react-native-webview和<iframe/>的嵌入式Vimeo视频。我想知道是否有任何方法可以从ReactNative控制这些组件的播放。 问题是，我需要确保当另一个媒体源启动时，在react-native-webview中播放的任何视频都会停止。我有一个iOS的解决方案，通过视频URL上的Vimeo的playsinline查询参数禁用内联播放。但是，我在安卓上遇到了问题，目前他们的player.js有一个与此相关的公开问题。 有没有办法在react-native的iframe中控制播放
浏览 57提问于2020-07-27得票数 0
回答已采纳
我使用react-native-webview加载一个具有多个iframes的URL。我正在使用injectedJavaScript方法向加载的网站注入javascript。代码只在顶部框架中注入，而不是在iframes中注入。
对于android，我将重写public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)方法来拦截我的HTML并将所需的Javascript添加到其中。
对于iOS，经过一些谷歌搜索后，我发现一些结果指向将forMainFrameOnly设置为“否
浏览 5提问于2019-08-29得票数 5
我在我的项目React Native中使用了react-native-webview。我的webview有一个javascript数组，我需要获取这个数组并在一个菜单中显示值，就像这个幻灯片菜单：https://raw.githubusercontent.com/instea/react-native-popup-menu/master/android.demo.gif 代码： function WebViewPage(){
const html = `
<html>
<body>
<d
浏览 43提问于2020-07-17得票数 2
回答已采纳
我正在尝试在由react-native WebView加载的网页中设置一个全局变量。我试图使用injectJavascript属性来设置全局变量，但是我得到一个错误，告诉我injectJavascript应该是一个函数。
如何格式化injectJavaScript函数以将消息作为全局变量传递到加载的网页？谢谢。
class Browser extends React.Component {
render() {
const { url } = this.props;
return (
<View>
<WebView
浏览 1提问于2018-03-08得票数 7
回答已采纳
2回答
在安卓系统上，我一直在用支付世博会管理的应用程序。一切都很好，直到我更新到最新版本的世博会和反应-本土化。现在，像onClose和onPaymentSuccess这样的回调都不起作用。WebView似乎是从react本机中删除的，所以我直接从react-native-webview导入。
我没有使用expo-stripe-checkout，而是创建了自己的组件，尝试并完成正在发生的事情，似乎WebView的injectedJavaScript根本没有运行，因此window.postMessage或window.ReactNativeWebView.postMessage无法工作。
packag
浏览 10提问于2020-06-15得票数 4
我是javascript的初学者，我必须在Reactive原住民中使用chrome客户端，因为firebase在本地android webview中不工作。
我试过这个
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://githu
浏览 1提问于2018-07-12得票数 0
回答已采纳
我正在从RN 0.55.3升级到0.57.0 (手动)。 在运行react-native run-ios或react-native run-android之后，我现在得到以下错误： error: bundling failed: Error: While trying to resolve module `react-native-firebase` 我已经尝试重新运行react-native link react-native-firebase (per this post)以及删除node_modules和重新运行yarn，但都不起作用。 完整的错误报告： error: bundling
浏览 24提问于2019-06-04得票数 3
在使用android构建react时，我得到了这个错误--本机，下面提供的屏幕截图
TASK: react-native-doc-viewer compileDebugJavaWithJavac FAILED
package com.facebook.react.views.webview does not exist
浏览 4提问于2020-07-23得票数 1
回答已采纳
如何将参数从react原生webview传递到外部javascript函数，
我有一个app.js文件，它被添加到我的react native项目中，它包含一些像callfromapp(data)这样的函数，我需要将参数从react native webview传递到app.js函数。
iam在webview.js iam内添加函数injectJSFileFromWeb()，给出app.js文件路径，但当它调用app.js文件时，iam收到错误，如文档未定义，
在react原生webview.js中，
<WebView
ref={ref =>
浏览 27提问于2019-08-22得票数 1
回答已采纳
我正在用博览(SDK v35)构建一个(SDK，v35)，当我将二进制文件交付到时，我收到了一个警告，很多人已经收到了这样的警告：
苹果将停止接受使用 API的应用程序的提交。
我意识到这个警告与v7.0.1之前的react-本机-webview有关，如果UIWebView在任何地方使用，包括依赖项，它都会出现。
但是，我已经彻底清理了代码，以至于grep -r UIWebView ./*显示为空(我甚至删除了注释)。我还确保所有依赖项都使用了一个版本的react本机-webview，这个版本比修补的7.0.1版本要大。这是来自grep -r webview ./node_modules/*
浏览 0提问于2019-12-08得票数 5
回答已采纳
我在react-native中安装了包
我已经实现了选项卡导航，其中一个是以webview格式实现的。
我的问题是，如果我按下Android上的后退物理按钮，我会从应用程序本身转到上一个选项卡，而不是从网页视图返回。
我已经在互联网上应用了webview的后退按钮，但我还没有这样做。
我试图在调试时显示onNavigationStateChange日志，但在第一次启动时加载url后，url被移动时，它没有更新。下面是我实现的代码：
import React from "react";
import {BackHandler} from "react-native"
浏览 6提问于2019-03-12得票数 9
下面，我试过了，但Webview被声明为重复的。获取时出错。 import { WebView } from 'react-native-webview-old';
import { WebView as WebViewLatest } from 'react-native-webview-latest';
let WebView;
if (Platform.OS === 'android') WebView = require('react-native-webview-latest').WebView;
else if (
浏览 16提问于2021-09-07得票数 0
在Webview道具中，我将scalesPageToFit道具设置为false。在android中，我可以很好地查看webview。但在IOS上，我可以看到桌面显示的get视图，因为IOS不支持这个支柱。我尝试添加属性contentMode={'mobile'}，但没有更改。
有没有其他的道具可以做这项工作，或者还有什么其他的东西可以帮助？
环境：
0.63.4react-native-webview 操作系统: IosOS版本：*react原生版本: 10.9.2，11.0.0
浏览 12提问于2021-03-03得票数 1
我正在尝试检索用户输入的邮政编码，这是添加到cookie中的网页视图。我怎么才能得到它？我已经尝试过react-native-cookies，它得到一个空对象。 import CookieManager from 'react-native-cookies';
componentWillMount() {
CookieManager.get('https://www.example.com')
.then((res) => {
console.log('CookieManager.get from webkit-vi
浏览 72提问于2019-06-06得票数 8
回答已采纳
1回答
我想缩小我的APK大小我遵循这些
然后运行./gradlew bundleRelease而不是assembleRelease，但我得到了错误
任务':app:transformClassesAndResourcesWithProguardForRelease'.执行失败工作失败了，
因此，我如何解决它，我是谷歌它，但问题仍然存在！但是没有，它的工作非常好，我得到了(Aab & .Apk )，所以如何解决它！
我认为这个文件的问题，但我不知道如何配置！
proguard-rules.pro
# If your project uses WebView with J
浏览 0提问于2019-08-01得票数 2
我正在尝试使用react原生webview并将其自动链接到我们的react原生代码库。为此，我执行了以下步骤，并获得了在本文末尾发布的错误。你能帮我修复这个错误吗？
我添加了
include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
添加到settings.gradle文件，然后
imple
浏览 4提问于2020-05-20得票数 0
在开发带有的应用程序时，我试图使用WebView作为OAuth流。WebView显示正确，但提供程序重定向到它们的"JavaScript必须启用“错误页面。
我想我在下面引用的中找到了一个快速而清晰的答案，但是在设置了这个属性之后，我仍然被重定向到提供者的"JavaScript必须启用“错误页面。
android javaScriptEnabled bool
仅在Android上使用，JS默认为WebView on iOS启用。
我创建了以下组件作为缩减，并且足够肯定的是，当WebView显示结果页面时，它报告JavaScript未启用。
我是不是忽略了什么？
'
浏览 1提问于2016-01-10得票数 1
回答已采纳
我正在尝试将javascript注入到React Native Web视图中，而我用Google Chrome Inspect检查过的代码并不影响我的web视图。即使是警报功能也不会在web视图中显示任何更改。我正在检查iOS模拟器。
const runFirst = `
let footer = document.getElementsByTagName("#footer")[0];
footer.style.display='none';
true;
`;
return (
<View style={styles.container}
浏览 3提问于2021-03-05得票数 0
我使用的是react-本机-webview-文件上传-android，但我想用react-本机-webview-android替换它。
我运行了以下命令：
npm uninstall react-native-webview-file-upload-android
npm install --save react-native-webview-android
npm link react-native-webview-android
我将app.js中的导入更改为
import AndroidWebView from 'react-native-webview-file-upload-
浏览 0提问于2019-01-06得票数 1
回答已采纳
我使用了两个社交登录，都是引用react-native-webview依赖项。
安装的版本:react-native-linkedin(使用react-native-webview 7.0.5)，react-native-instagram-login (使用react-native-webview 7.5.1)，react-native-webview ^7.5.1
你能告诉我如何解决这个问题吗？
屏幕截图
浏览 1提问于2020-04-27得票数 0
我正在寻找一种方法来了解webview是否可以滚动，但我发现没有什么特别的。我正在使用react-native-webview。他们有什么办法找出答案吗？
浏览 46提问于2021-04-11得票数 0
回答已采纳
当我在React中使用regexp时-本机-Webview的injectedJavaScript支柱，一个错误Unterminated regular expression literal error将被抛出，而regexp将不会被遵守。
我应该如何在injectedJavaScript中使用regexp？，如果没有，有解决办法吗？
最低可复制代码如下：
// this won't work
<WebView
source={{ uri: 'https://github.com/ashi009/node-fast-html-parser' }}
injec
浏览 1提问于2020-03-29得票数 1
回答已采纳
我在fabric中看到了这个错误，它导致了很多崩溃。我搜索了很多，但没有找到任何有用的东西。我找到了，但我看不出它与react native有什么关系。
我没有在我的代码中使用WebView，但我想可能我的某个node_modules包正在使用它，唯一包含WebView的包是react-native-onesignal
下面是完整的堆栈跟踪
这种情况只发生在安卓7中，但可能是安卓将Webview与安卓5+放在了一个单独的包中
浏览 8提问于2018-02-17得票数 0
1回答
我正在渲染ZingChart内部的反应-本机webview。我需要使用%data-day访问zingchart的令牌，但是每当我尝试使用%d时，它都会打印NaN
下面是示例代码：
import React, { Component } from 'react';
import { Text, View, WebView } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
}
renderW
浏览 6提问于2018-05-26得票数 0
回答已采纳
我当前的项目需要安装react-native-chartjs和react-native-canvas。react-native-chartjs使用react-native-webview@2.0.0，而react-native-canvas需要不同版本的react-native-webview - react-native-webview@10.0.0，它返回以下错误： ? 现在我应该do...both什么是我的项目的必需依赖项
浏览 26提问于2020-11-03得票数 0
我在NPM，https://www.npmjs.com/package/react-native-progress-webview发现这个项目很有趣。 然而，我遵循了指令，它显示了以下错误： error: bundling failed: Error: Unable to resolve module `react-native-progess-webview` from `mycomponent.js`: Module `react-native-progess-webview` does not exist in the Haste module map 我已经安装了'react
浏览 16提问于2019-10-03得票数 1
我是ReactNative的新手，所以我想打开一个web视图，并使用以下命令安装WebView：
npm install --save react-native-webview
npx react-native link react-native-webview
现在当我运行这个：
npx react-native run-android --deviceId 127.0.0.1:62001
请向我返回此错误：
React本机CLI对本机依赖项使用自动链接，但以下模块是手动链接的：- React本机-webview(要取消链接运行：“React-本机取消链接-本机-webview”)，这很可
浏览 2提问于2019-12-20得票数 0
1回答
假设我有一个只有2页的网站。
然后，我创建了一个webview react本机应用程序，它可以很简单，如下所示：
App.js
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'http://ex
浏览 0提问于2018-09-14得票数 4
回答已采纳
升级后出现此错误，以响应Native0.60。
我试图按照错误消息中的建议，使用react-native unlink <dependency>手动解除每个手动链接的依赖项，但问题仍然存在。
错误消息如下：
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- react-native-admob (to unlink run: "react-native unlink react-native-a
浏览 0提问于2019-07-07得票数 24
回答已采纳
3回答
如何通过解压更新世博会网页？
、、、、
我制作了Webview应用程序与博览，反应-本地观看youtube。
一开始我做了这样的基本应用程序
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default class App extends React.Component {
render() {
return <WebView
source={{ uri: 'https://www.google.com' }}
allo
浏览 0提问于2020-05-19得票数 3
我试图在react本机样板(模板:类型记录)中使用WebView。我正在使用来自WebView库的react-native-webview。
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* Generated with the TypeScript template
* https://github.com/react-native-community/react-native-template-typescript
*
* @format
*/
import R
浏览 11提问于2022-03-04得票数 2
我尝试在我的应用程序中添加一个web视图，但是我得到了这个错误： ../node_modules/react-native-webview/lib/WebView.js
Module not found: Can't resolve 'react-native-web/dist/exports/View' in 'C:\Users\Nikola\node_modules\react-native-webview\lib' 这是我的最小代码： import { WebView } from 'react-native-webview';
浏览 72提问于2021-10-04得票数 0
1回答
我正在为objective-c中的原生react创建我自己的自定义ui组件，到目前为止一切正常，除了我似乎不能在我的组件上调用任何方法。这是我的目标-c
#import "RNTWebViewManager.h"
#import <WebKit/WebKit.h>
@interface RNTWebViewManager()
@property (strong, nonatomic) WKWebView *webView;
@end
@implementation RNTWebViewManager
@synthesize webView;
RCT_EX
浏览 24提问于2017-06-22得票数 3
回答已采纳
我正在使用react-native实现magic.link，但在导入Magic时出现错误
import { Magic } from "@magic-sdk/react-native";
错误：
Attempted import error: 'WebView' is not exported from 'react-native'.
我认为这是因为react-native-webview的子依赖已经被移除了，但我确实安装了它。npm install --将react-native-webview@^8.0.0保存到教程中吗？卡住了一段时间，不确
浏览 3提问于2021-11-29得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
