+1
[React Native] Nhúng file js vào Webview
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} />
Thêm một bình luận
1 CÂU TRẢ LỜI
+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
uritrự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
scripttrự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'
/>
);
}
}
- Cách 3: sử dụng
inline javascript- live preview
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'
/>
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
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/...
Trên obj C đặt các file css, js mà trong file html gọi đến trong native, khi build nó sẽ đc thêm vào bản build. Trong file html truy cập link dạng:
<link rel="stylesheet" type="text/css" href="./tvstyle.css"> <script src="./numeral.min.js"></script>