angular -ui-layout - изменение размера некорректно работает с iframe - PullRequest
Новая
       64

angular -ui-layout - изменение размера некорректно работает с iframe

1 голос
/ 14 января 2020

Как видно из примера, изменение размера не работает должным образом при использовании 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>

1 Ответ

0 голосов
/ 24 января 2020

Кажется, проблема в том, что 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>
...