Asked Oct 16th, 2017 8:17 AM 1720 0 1
  • 1720 0 1
+1

[React Native] Nhúng file js vào Webview

Share
  • 1720 0 1

Em đang gặp vấn đề về load file js vào webview trong React Native (Nó ko load đc js vào) Có ai có thể support giúp em đc ko ạ

let html = "... <script type=\"text/javascript\" src="../../assets/myjs.js"></script>..." ;

<WebView
                                    source={{ html: html }}
                                    style={{ flex: 1 }}
                                    javaScriptEnabledAndroid={true} />

1 ANSWERS


Answered Oct 17th, 2017 3:54 AM
+2

Mình thử khá nhiều cách nhưng chưa load trực tiếp file js trên local vào Webview được =_= Bạn thử các cách dưới đây xem có được không nhé:

  • Cách 1: sử dụng uri trực tiếp đến web mà bạn muốn hiển thị - live preview
import React, { Component } from 'react';
import { WebView } from 'react-native';

export default class App extends Component {
    render() {
        return (
            <WebView
                source={{uri: 'https://viblo.asia'}}
                style={{flex: 1}}
                mixedContentMode='always'
            />
        );
    }
}
  • Cách 2: import script trực tiếp từ web - live preview
import React, { Component } from 'react';
import { WebView } from 'react-native';

const html = `
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Simple todo with React</title>
    </head>
    <body>
        <div id="app">Hello</div>
        <script type="text/javascript" src="https://doanhpham.github.io/todo/index.4e87939e32afa4a57454.js"></script>
    </body>
    </html>
`;

export default class App extends Component {
    render() {
        return (
            <WebView
                source={{html, baseUrl: 'web/'}}
                style={{flex: 1}}
                mixedContentMode='always'
            />
        );
    }
}
import React, { Component } from 'react';
import { WebView } from 'react-native';

const html = `
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <div id="test-app">Hello world!</div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <style>body {display: flex; font-size: 2em; justify-content: center; align-items: center;}</style>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#test-app').text('Test done!');
            });
        </script>
    </body>
    </html>
`

export default class App extends Component {
    render() {
        return (
            <WebView
                source={{html, baseUrl: 'web/'}}
                style={{flex: 1}}
                mixedContentMode='always'
            />
        );
    }
}

Ngoài ra trong document về Webview, bạn có thể inject function hoặc script trực tiếp vào Webview như sau:

<WebView
    source={{html, baseUrl: 'web/'}}
    injectedJavaScript='./script.js'
    injectJavaScript={this.injectFunction}
    style={{flex: 1}}
    mixedContentMode='always'
/>
Share
Oct 17th, 2017 4:04 AM

Hiện mình đang dùng cách 2, nhưng vì cái load js này khá lâu nên mình muốn cải thiện tốc độ bằng load từ local Mặt khác đây là nhiều file js + file font ... nên ko xài cách 3 đc :-s

0
| Reply
Share
Oct 17th, 2017 5:59 AM

Bạn thử dùng <script src="file://path/to/script.js"></script> chưa? File js mình ném vào trong android/app/src/main/assets/...

0
| Reply
Share