Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

In react-native-webview, Injectedjavascript does not inject code before the web page is loaded. #34164

Closed
haohongyang1 opened this issue Jul 9, 2022 · 1 comment
Closed

In react-native-webview, Injectedjavascript does not inject code before the web page is loaded. #34164

haohongyang1 opened this issue Jul 9, 2022 · 1 comment
Labels
Component: WebView Related to the WebView component. Needs: Triage 🔍

Comments

@haohongyang1
Copy link

Description

The injectedjavascript described in the document is a JS code injected before the web page is loaded, but in the actual test, it is the JS code executed at the end of the document object.

Version

2.15.0

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 11.4
CPU: (8) x64 Apple M1
Memory: 22.82 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
Languages:
Java: Not Found
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: git+https://code.taou.com/git/maimai/react-native-0.63.2.git#v0.63.2_08 => 0.63.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

  1. Define a WebView tag locally.
    `

<WebView
ref={(view) => {
webviewRef = view;
}}
source={{
uri:"http://localhost:8080/SlideTest.html", // 这个html内容是通过http-server启动了本地服务，生成的网页，该html内容下方会粘贴；
}}
originWhitelist={['*']}
injectedJavaScript={test("NativeApp");true;} // 网页加载前
allowFileAccess={true}
domStorageEnabled={true}
javaScriptEnabled={true}
onMessage={(event) => {}}
onLoadStart={() => {
webviewRef.injectJavaScript(``);
}}
/>

`

  1. Write an HTML test file locally.
    `
    <title>职位详情</title>
    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
        function test (userAgent)  {
            console.log("😺 test进入===userAgent==",userAgent);
            window.userAgent = userAgent
        }
    </script>
</head>
<body>
</body>
<script>
    console.log("😺 body===网页加载后", window.userAgent)
    setTimeout(() => {
        console.log("😺 == 网页加载后 延时获取window变量信息",window.userAgent) // 这里拿不到我们刚才注入的JS变量；
    },0)
</script>

<!-- interceptScript 注入的JS代码是在这里执行的 -->
`
  1. Load into page to get results.
    Android and IOS didn't meet expectations:

image

Snack, code example, screenshot, or link to a repository

image
@react-native-bot react-native-bot added the Component: WebView Related to the WebView component. label Jul 9, 2022
@cortinico
Copy link
Contributor

Please move this to https://github.com/react-native-webview/react-native-webview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: WebView Related to the WebView component. Needs: Triage 🔍
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cortinico @react-native-bot @haohongyang1