如何设置WebView的背景色？

WebView加载新闻详情页，新闻内容较少时，高度不足以撑开整个界面，底部会有灰色的背景。

HarmonyOS

zbw_apple

2024-09-29 13:25:41

浏览

回答 2

按赞同

按时间

鱼弦CTO

在使用 WebView 组件时，设置背景色可以通过两个方面来解决：一是设置 WebView 本身的背景色，二是设置加载网页内容的背景色。

### 方案1：设置 WebView 组件本身的背景色

你可以直接在 WebView 组件外部包裹一个带有背景色的容器，例如 Container 或者 Stack，来设置背景颜色：

import { WebView, Stack } from '@arkui/components';
import { useState } from '@arkui/hooks';

function App() {
  const [url, setUrl] = useState('https://example.com');

  return (
    <Stack style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <WebView
        src={url}
        style={{ flex: 1 }}
        onPageFinished={() => console.log("Page loaded")}
      />
    </Stack>
  );
}

export default App;1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

在这个示例中，我们通过给外层 Stack 容器设置 backgroundColor 属性来改变 WebView 的背景色。

### 方案2：设置加载网页内容的背景色

有时候，仅仅设置 WebView 组件的背景色是不够的，因为网页内容可能有自己的样式。此时，我们需要注入一些 CSS 样式到网页内容中，使其背景色覆盖整个视图。

以下是一个示例代码，通过 WebView 的 JavaScript 注入功能来设置网页内容的背景色：

import { WebView, Stack } from '@arkui/components';
import { useRef, useEffect } from '@arkui/hooks';

function App() {
  const webViewRef = useRef<WebView>(null);
  const url = 'https://example.com';

  useEffect(() => {
    if (webViewRef.current) {
      // 等待页面加载完成后，注入CSS样式修改背景色
      webViewRef.current.onPageFinished = () => {
        webViewRef.current.injectJavaScript(`
          (function() {
            document.body.style.backgroundColor = '#FFFFFF';
          })();
        `);
      };
    }
  }, []);

  return (
    <Stack style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        src={url}
        style={{ flex: 1 }}
      />
    </Stack>
  );
}

export default App;1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

### 解释

引用 WebView 组件：使用 useRef 来引用 WebView 组件，这样可以在其他地方灵活地操作它。
生命周期钩子：使用 useEffect 钩子监听组件的加载状态，当 WebView 加载完成时，通过 injectJavaScript 方法注入 CSS 样式，设置 document.body 的背景色。
注入 JavaScript：使用 webViewRef.current.injectJavaScript 方法向网页内容中注入 JavaScript 代码，动态修改网页的背景色。

通过这两种方法，你可以有效地控制 WebView 及其内容的背景色，从而避免出现灰色背景的问题。如果有任何进一步的问题或其他需求，请随时提问！

2024-09-29 13:57:02

FengTianYa

尝试以下方案：1、是否使用沉浸式布局，如果未使用的话，尝试使用沉浸式，相关代码：

async onWindowStageCreate(windowStage: window.WindowStage) {  
  await windowStage.getMainWindowSync().setWindowLayoutFullScreen(true)  
  windowStage.loadContent('pages/Index', (err, data) => {  
    if (err.code) {  
      return;  
    }  
  });  
}1.
2.
3.
4.
5.
6.
7.
8.

2、如果不使用深色模式，可以尝试设置window的背景色为白色，相关代码：

async onWindowStageCreate(windowStage: window.WindowStage) {  
  windowStage.loadContent('pages/Index', (err, data) => {  
    if (err.code) {  
      return;  
    }  
    windowStage.getMainWindowSync().setWindowBackgroundColor('#ffffff');  
  });  
}1.
2.
3.
4.
5.
6.
7.
8.

2024-09-29 17:51:45

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

如何设置WebView的背景色？

订阅鸿蒙技术特刊，精选内容抢先看