feat(h5 webview): add prop fullscreen

packages/uni-h5/src/view/components/web-view/index.tsx

@@ -30,6 +30,10 @@ const props = {
     type: String,
     default: '',
   },
+  fullscreen: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 type RootRef = Ref<HTMLElement | null>
@@ -60,14 +64,18 @@ export default /*#__PURE__*/ defineBuiltInComponent({
       watchEffect(() => {
         iframe.src = getRealPath(props.src)
       })
-      document.body.appendChild(iframe)
-      iframeRef.value = iframe
-      _resize = useWebViewSize(rootRef, iframeRef)
+      _resize = useWebViewSize(rootRef, iframe, props.fullscreen)
+      if(props.fullscreen){
+        document.body.appendChild(iframe)
+      }else{
+        iframeRef.value = iframe
+      }
     }
 
     __NODE_JS__ ? onMounted(renderIframe) : renderIframe()
     onMounted(() => {
       _resize()
+      !props.fullscreen && rootRef.value?.appendChild(iframeRef.value!)
     })
 
     onActivated(() => {
@@ -79,13 +87,14 @@ export default /*#__PURE__*/ defineBuiltInComponent({
     })
 
     onBeforeUnmount(() => {
-      document.body.removeChild(iframeRef.value!)
+      iframeRef.value && document.body.removeChild(iframeRef.value)
     })
 
     return () => {
       return (
         <>
           <uni-web-view
+            class={props.fullscreen ? 'uni-webview--fullscreen': ''}
             {...$listeners.value}
             {...$excludeAttrs.value}
             ref={rootRef}
@@ -108,12 +117,11 @@ export default /*#__PURE__*/ defineBuiltInComponent({
   },
 })
 
-function useWebViewSize(rootRef: RootRef, iframeRef: RootRef) {
+function useWebViewSize(rootRef: RootRef, iframe: HTMLIFrameElement, fullscreen:boolean) {
   const _resize = () => {
-    const { top, left, width, height } = rootRef.value!.getBoundingClientRect()
-
-    iframeRef.value &&
-      updateElementStyle(iframeRef.value, {
+    if(fullscreen){
+      const { top, left, width, height } = rootRef.value!.getBoundingClientRect()
+      updateElementStyle(iframe, {
         position: 'absolute',
         display: 'block',
         border: '0',
@@ -122,6 +130,12 @@ function useWebViewSize(rootRef: RootRef, iframeRef: RootRef) {
         width: width + 'px',
         height: height + 'px',
       })
+    }else{
+      updateElementStyle(iframe, {
+        width: rootRef.value?.style.width || '300px',
+        height: rootRef.value?.style.height || '150px',
+      })
+    }
   }
 
   return _resize

packages/uni-h5/style/web-view.css

 uni-web-view {
+  display: flex;
+}
+uni-web-view.uni-webview--fullscreen {
   position: absolute;
   left: 0;
   right: 0;