如何让webview自适应高度?



  • 个人尝试用react-native-webview-bridge插件 然后在html那边用document.body.clientHeight回调 算出来的高度在android上是对的,但是在iOS上高度不对~ 无法自适应大小 忘高手指点
    个人QQ 512668804@qq.com



  • 
    
    'use strict';
    
    import React, { Component } from 'react';
    import {
      View,
      WebView
    } from 'react-native';
    
    const script = `<script>
          function _autoHeight(){
            window.location.hash = Date.now();
            document.title = document.documentElement.offsetHeight;
            document.body.style.height = document.documentElement.offsetHeight;
          }
          window.addEventListener('load', _autoHeight)
        </script>`;
    
    let safeHtml = function (html) {
      if (!html) {
        return ''
      }
      return `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <title></title>
          <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
          <style media="screen">
            html,body{overflow: hidden;min-height:64px;}
            img{max-width: 100%}
          </style>
        </head>
        <body>
          ${html}
          ${script}
        </body>
      </html>
      `
    }
    
    export default class WebContainer extends Component {
      constructor(props) {
        super();
        this.state = {
          height: Number(props.height) || 0
        };
      }
    
      onNavigationStateChange(navState) {
        let h = Number(navState.title)||0
        if (h) {
          this.setState({
            height: h
          });
        }
      }
      shouldComponentUpdate(nextProps, nextState){
        if (this.props.html==nextProps.html&&this.state.height==nextState.height) {
          return false
        }
        return true
      }
      render() {
        let {
          html,
          style,
          scrollEnabled,
          ...props
        } = this.props;
        // console.log(this.state.height, html)
        let page = safeHtml(html||'');
        if (!page) {
          return (<View/>)
        }
        return (
          <WebView
            {...props}
            style={[style, {height: Number(this.state.height)}]}
            scrollEnabled={false}
            source={{html: page, baseUrl: '', title: ''}}
            ref={(c) => {this.webview = c}}
            automaticallyAdjustContentInsets={true}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            decelerationRate="normal"
            startInLoadingState={false}
            scalesPageToFit={true}
            onNavigationStateChange={this.onNavigationStateChange.bind(this)} />
        );
      }
    }
    
    
    

    使用

    ...
    <WebContainer html={html.content} />
    ...
    

    url模式下原理一样,稍改下就可以了



  • @openmynet 谢谢,我试试