Pull request #3648: feat(KERNEL-15966): 指定body挂载的弹窗挂在最外层

Merge in VISUAL/fineui from ~WINDY/fui:master to master

* commit 'ddcbdf5147a8ff5d778a022f9a69040fc7d61574':
  feat(KERNEL-15966): 指定body挂载的弹窗挂在最外层

packages/fineui/src/base/layer/layer.popover.js

@@ -16,6 +16,7 @@ import {
 } from "@/core";
 import { Label, IconButton, Button } from "../single";
 import { Resizers } from "../0.base";
+import { getOuterBody } from "@/core/utils/dom";
 
 /**
  * Popover弹出层，
@@ -66,10 +67,11 @@ export class Popover extends Widget {
         this.startX = 0;
         this.startY = 0;
         const size = this._calculateSize();
+        const bodyDom = getOuterBody();
         this.tracker = new MouseMoveTracker(
             (deltaX, deltaY) => {
-                const W = Widget._renderEngine.createElement("body").width();
+                const W = Widget._renderEngine.createElement(bodyDom).width();
-                const H = Widget._renderEngine.createElement("body").height();
+                const H = Widget._renderEngine.createElement(bodyDom).height();
                 this.startX += deltaX;
                 this.startY += deltaY;
                 this.element.css({
@@ -228,11 +230,11 @@ export class Popover extends Widget {
 
     _getSuitableBodyHeight(height) {
         const { headerHeight, footer, footerHeight, bodyTgap } = this.options;
-
+        const bodyDom = getOuterBody();
         return clamp(
             height,
             0,
-            Widget._renderEngine.createElement("body")[0].clientHeight -
+            Widget._renderEngine.createElement(bodyDom)[0].clientHeight -
             headerHeight -
             (footer ? footerHeight : 0) -
             bodyTgap
@@ -240,11 +242,11 @@ export class Popover extends Widget {
     }
 
     _getSuitableHeight(height) {
-        return clamp(height, 0, Widget._renderEngine.createElement("body")[0].clientHeight);
+        return clamp(height, 0, Widget._renderEngine.createElement(getOuterBody())[0].clientHeight);
     }
 
     _getSuitableWidth(width) {
-        return clamp(width, 0, Widget._renderEngine.createElement("body").width());
+        return clamp(width, 0, Widget._renderEngine.createElement(getOuterBody()).width());
     }
 
     _calculateSize() {

packages/fineui/src/core/controller/controller.layer.js

@@ -8,7 +8,7 @@ import { isNull, isNotNull, each, keys, isWidget, isNotEmptyString, extend, bind
 import { Widget } from "../4.widget";
 import { createWidget } from "../5.inject";
 import { zIndex_layer } from "../constant";
-import { DOM } from "../utils";
+import { getPositionRelativeContainingBlockRect, getOuterBody } from "../utils/dom";
 
 export class LayerController extends Controller {
     constructor(Resizers) {
@@ -63,7 +63,7 @@ export class LayerController extends Controller {
             w = from.element;
         }
         if (isNotEmptyString(w)) {
-            w = Widget._renderEngine.createElement(w);
+            w = Widget._renderEngine.createElement(w === 'body' ? getOuterBody() : w);
         }
         if (this.has(name)) {
             return this.get(name);
@@ -86,7 +86,7 @@ export class LayerController extends Controller {
         }, context);
         createWidget({
             type: "bi.absolute",
-            element: op.container || this.options.render,
+            element: op.container || this.getRender(),
             items: [
                 {
                     el: layout,
@@ -108,7 +108,7 @@ export class LayerController extends Controller {
                     height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || "",
                 };
 
-                const { top, left, scaleY, scaleX } = DOM.getPositionRelativeContainingBlockRect(layout.element[0]);
+                const { top, left, scaleY, scaleX } = getPositionRelativeContainingBlockRect(layout.element[0]);
 
                 css.top = (css.top - top) / scaleY;
                 css.left = (css.left - left) / scaleX;
@@ -164,6 +164,15 @@ export class LayerController extends Controller {
         return this;
     }
 
+    getRender() {
+        // 默认挂在body上的都找最外层的body
+        let render = this.options.render;
+        if (render === 'body') {
+            return getOuterBody();
+        }
+        return render;
+    }
+
     _getLayout(name) {
         return this.layouts[name];
     }

packages/fineui/src/core/controller/controller.popover.js

@@ -7,6 +7,7 @@ import { isNotNull, each } from "../2.base";
 import { Widget } from "../4.widget";
 import { createWidget } from "../5.inject";
 import { zIndex_popover } from "../constant";
+import { getOuterBody } from "../utils/dom";
 
 export class PopoverController extends Controller {
     constructor() {
@@ -56,8 +57,9 @@ export class PopoverController extends Controller {
             this.floatContainer[name].visible();
             const popover = this.get(name);
             popover.show && popover.show();
-            const W = Widget._renderEngine.createElement(this.options.render).width(),
+            const render = this.getRender();
-                H = Widget._renderEngine.createElement(this.options.render).height();
+            const W = Widget._renderEngine.createElement(render).width(),
+                H = Widget._renderEngine.createElement(render).height();
             const w = popover.element.width(), h = popover.element.height();
             let left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
@@ -124,7 +126,7 @@ export class PopoverController extends Controller {
         popover.on(BI.Popover.EVENT_CLOSE, () => this.close(name));
         createWidget({
             type: "bi.absolute",
-            element: options.container || this.options.render,
+            element: options.container || this.getRender(),
             items: [{
                 el: this.floatContainer[name],
                 left: 0,
@@ -137,6 +139,15 @@ export class PopoverController extends Controller {
         return this;
     }
 
+    getRender() {
+        // 默认挂在body上的都找最外层的body
+        let render = this.options.render;
+        if (render === 'body') {
+            return getOuterBody();
+        }
+        return render;
+    }
+
     get(name) {
         return this.floatManager[name];
     }

packages/fineui/src/core/utils/dom.js

@@ -788,3 +788,19 @@ export function getPositionRelativeContainingBlockRect(element) {
         scaleY: rect.height / positionRelativeElement.offsetHeight,
     };
 }
+
+/**
+ * 获取最外层的body
+ */
+export function getOuterBody() {
+    // 默认挂在body上的都找最外层的body
+    let parentWindow = window;
+    let body = document.body;
+    try {
+        while (parentWindow.parent !== parentWindow) {
+            parentWindow = parentWindow.parent;
+        }
+        body = parentWindow.document.body;
+    } catch (e) {}
+    return body;
+}