angular-ui-layout - 调整大小不适用于 iframe答案

【问题标题】：angular-ui-layout - resize doesn't work properly with an iframeangular-ui-layout - 调整大小不适用于 iframe
【发布时间】：2020-04-30 22:57:13
【问题描述】：

正如您在示例中看到的，使用 iframe 时调整大小无法正常工作。您可以将拆分器向左移动，但不能向右移动。有谁知道这是为什么以及如何解决？

<!DOCTYPE html>
<html ng-app="x">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>UI.Layout : demo </title>

    <link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
    <style>
        .html-back {
            background: #eee;
        }
    </style>
</head>

<body>
<div ui-layout options="{ flow : 'column', disableToggle: true }">
    <div ui-layout-container size="50%" class="html-back">
        AA
    </div>
    <div ui-layout-container size="50%" class="html-back">
        <iframe style="width: 100%; height: 100%;" src=""></iframe>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
    var app = angular.module("x", ["ui.layout"]);
</script>
</body>
</html>

【问题讨论】：

标签： javascript html angularjs iframe angular-ui

【解决方案1】：

问题似乎是 iframe 窃取了焦点。我设法通过在移动拆分栏时添加覆盖div 来防止这种情况发生。

<!DOCTYPE html>
<html ng-app="x">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>UI.Layout : demo </title>

    <link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
    <style>
        .html-back {
            background: #eee;
        }
    </style>
</head>

<body>
<div ng-controller="AppController">
    <div ui-layout ui-layout-loaded options="{ flow : 'column', disableToggle: true }" id="splitViewContainer">
        <div ui-layout-container size="50%" class="html-back">
            AA
        </div>
        <div ui-layout-container class="html-back">
            <iframe style="width: 100%; height: 100%;" src=""></iframe>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
    class AppController {

        constructor($document, $element, $scope) {
            this.$document = $document;
            this.$element = $element;
            this.$scope = $scope;

            this.mouseDown = this.mouseDown.bind(this);
            this.mouseUp = this.mouseUp.bind(this);

            this.$scope.$on("ui.layout.loaded", () => {
                this.splitter = this.$element.find(".ui-splitbar");
                this.splitter.on("mousedown", this.mouseDown);
            });

            this.overlay = angular.element("<div></div>");
            this.overlay.css({
                width: "100%",
                height: "100%",
                "z-index": 1,
                position: "absolute",
                top: 0,
                left: 0
            });
        }

        mouseDown() {
            if (!this.splitViewContainer) {
                this.splitViewContainer = this.$element.find("#splitViewContainer");
            }

            this.splitViewContainer.append(this.overlay);
            this.$document.one("mouseup", this.mouseUp);
        }

        mouseUp() {
            this.overlay.remove();
        }

    }


    const app = angular.module("x", ["ui.layout"]);
    app.controller("AppController", AppController);
</script>
</body>
</html>

【讨论】：