Question

使用以下代码：

function _launchIntoFullscreen (pElement) {
    if(pElement.requestFullscreen) {
        pElement.requestFullscreen();
    } else if(pElement.mozRequestFullScreen) {
        pElement.mozRequestFullScreen();
    } else if(pElement.webkitRequestFullscreen) {
        pElement.webkitRequestFullscreen();
    } else if(pElement.msRequestFullscreen) {
        pElement.msRequestFullscreen();
    }
}

我可以将单个元素切换到全屏模式，例如对于名为＆＃34; canvas＆＃34;

的dijit.form.ContentPane

_launchIntoFullscreen(canvas.domNode);

工作正常，但遗憾的是，Chrome的元素未调整大小以填充所有全屏窗口。尺寸保持不变，并以屏幕为中心。

我在CSS中添加了以下内容：

:-webkit-full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: none;
}

但唯一的变化是位置，现在是左上角，但尺寸仍然相同。

其他信息：页面结构为

<div class="page-wrapper" style="width:100%; height:100%;">
  <div id="toolbar" class="toolbar"></div>
  <div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" design="sidebar" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 100%; height: 100%; padding: 0px 0px 32px 0px;">
    <div id="projectPane" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="left" splitter="true" maxSize="Infinity" doLayout="true" style="width: 220px; padding: 0px;">
      <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%; padding: 0px;">
        <div id="treeParent" class="treeParent" data-dojo-type="dijit/layout/ContentPane" title="Palette"  data-dojo-props="selected:true" style="padding:0px;"></div>
        <div id="onlineParent" class="treeParent" data-dojo-type="dijit/layout/ContentPane" title="Online"  data-dojo-props="selected:false" style="padding:0px;"></div>
      </div>
    </div>
    <div id="workAreaContainer" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity" doLayout="true" style="padding: 0px;">
      <div id="workArea" class="workArea" data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%; padding: 0px;" data-dojo-props="tabPosition: 'right-h'">
      </div>
    </div>
    <div id="bottom" data-dojo-type="dijit/layout/TabContainer" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="bottom" splitter="true" maxSize="Infinity" doLayout="true" style="width: 100%; height: 10%; padding: 0px;">
      <div id="log" class="log" title="Log" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" maxSize="Infinity" doLayout="false" style="height:100%;padding:0px;overflow:auto;"></div>
    </div>
    <div id="properties" class="properties" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="right" splitter="true" minSize=0 maxSize="Infinity" doLayout="false" style="width:250px;padding: 0px;"></div>
  </div>
</div>

画布是动态创建的：

var lTabContainer = dijit.byId("workArea");
var canvas = new ContentPane({
            title: this.keys.pouname, //"Main",
            //id: "surface",
            class: "surfaceX",
            extractContent: "false",
            preventCache: "false",
            preload: "false",
            refreshOnShow: "false",
            maxSize: "Infinity",
            doLayout: "false",
            "data-dojo-props": "selected:true",
            style: "padding: 0px;"
});
lTabContainer.addChild(canvas);

我在这里做错了什么？

在Firefox中，即使没有CSS，一切都会按预期运行。

非常感谢您让我深入了解解决方案。

Answer 1

这是一个示例html，对我来说在Firefox和Chrome中都可以使用。尝试添加样式＆＃34;宽度：100％;身高：100％＆＃34;到全屏幕的ContentPane。

<html>
<head>
</head>

<body class="claro">
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">

    <script>
        require([
          "dijit/layout/ContentPane",
          "dojo/dom-construct",
          "dojo/on",
          "dojo/keys",
          "dojo/domReady!"
        ], function(ContentPane, domConstruct, on, keys) {
              var pane = new ContentPane({style: "background-color: green; width: 100%; height: 100%"});
              var div = domConstruct.toDom("<div>Some content here</div>");
              domConstruct.place(div, pane.containerNode);

              pane.placeAt("content");

              on(pane, "click", function() {
                _launchIntoFullscreen(pane.containerNode);
              });
        });

        function _launchIntoFullscreen (pElement) {
            if(pElement.requestFullscreen) {
                pElement.requestFullscreen();
            } else if(pElement.mozRequestFullScreen) {
                pElement.mozRequestFullScreen();
            } else if(pElement.webkitRequestFullscreen) {
                pElement.webkitRequestFullscreen();
            } else if(pElement.msRequestFullscreen) {
                pElement.msRequestFullscreen();
            }
        }
    </script>

    <div style="width: 300px; height: 100px;">
        <div id="content"></div>
    </div>
    <div id="othercontent">Some other content</div>
</body>
</html>

Answer 2

看来，封闭的dijit Layout Containers阻止元素伸展到100％的宽度和高度。

我找到的解决方案对我来说并不明显，但它有效：

安装通知全屏模式更改的处理程序
在激活全屏模式时将宽度和高度设置为100％。

所以我将我的函数_launchIntoFullscreen改为

function _launchIntoFullscreen (pElement,pFunction) {
    if(pElement.requestFullscreen) {
        pElement.onfullscreenchange = function(pEvent) {
            if(pFunction) {
                pFunction(document.fullscreenElement);
            }
        }
        pElement.requestFullscreen();
    } else if(pElement.mozRequestFullScreen) {
        pElement.onmozfullscreenchange = function(pEvent) {
            if(pFunction) {
                pFunction(document.mozFullScreenElement);
            }
        }
        pElement.mozRequestFullScreen();
    } else if(pElement.webkitRequestFullscreen) {
        pElement.onwebkitfullscreenchange = function(pEvent) {
            if(pFunction) {
                pFunction(document.webkitFullscreenElement);
            }
        }
        pElement.webkitRequestFullscreen();
    } else if(pElement.msRequestFullscreen) {
        pElement.onmsfullscreenchange = function(pEvent) {
            if(pFunction) {
                pFunction(document.msFullscreenElement);
            }
        }
        pElement.msRequestFullscreen();
    }
}

并将该函数调用为

_launchIntoFullscreen(canvas.domNode,lang.hitch(this,function(pElem) {
                    if(pElem) {
                        pElem.style.width = "100%";
                        pElem.style.height = "100%"
                    }
                }));

此解决方案有一个缺点，即用户看到（在非常短的时间内），在切换到全屏模式后调整元素大小

Chrome和全屏api：调整大小元素以填满全屏窗口无法正常工作

2 个答案: