Question

我正在玩一些Windows 8的东西，并想知道如何在Windows 8应用程序中执行以下操作。

显示网页。
在网页上实施metro风格的应用栏。

这是我的default.html：

<body role="application">
<div style="z-index:2;">
    <div id="standardAppBar" data-win-control="WinJS.UI.AppBar" disabled="false" aria-label="Command Bar"
        data-win-options="{position:'bottom',transient:true,autoHide:0,lightDismiss:true}" >
        <div class="win-right">
            <button onclick="sdkSample.displayStatus('Add button pressed')" class="win-command">
                <span class="win-commandicon win-large iconAdd"></span>
                <span class="win-label">Add to Menu_1</span>
            </button>
        </div>
    </div>
</div>
<div style="z-index:0;">
    <div data-win-control="WinJS.UI.ViewBox">
        <div>
            <!-- taking Apple.com as an example -->
            <iframe class="fullscreen" src="http://apple.com" />
        </div>
    </div>
</div>
</body>

这是我的css for“fullscreen”

.fullscreen {
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:80%; /* leave 20% white space to right click to toggle App Bar */
}

通常，可以通过右键单击切换应用栏。但在上面的代码中，右键单击对iFrame不起作用。所以我不得不留下20％的空白空间让我点击以切换白色空间。但我真的想让它成为全屏。任何人？非常感谢你。

注意：如果您使用的是触摸设备，则可以通过将手指从屏幕外侧滑动到屏幕内来实际切换应用栏。所以这很好用。但不是右键单击。所以这篇文章是要求右键单击选项。非常感谢你提前。

Answer 1

微软研究员回答。在此重新发布...

这个想法是在iframe上添加一个div。需要确保div具有透明背景，并且div位于iframe的“上方”。

http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/45f947c5-ee79-4eed-8bb3-6352e89c8c05

Answer 2

右键单击页面底部剩余的20％空间。我敢打赌App Bar会出现。当您在底部滑动手指时，您正在触摸父页面以便App Bar显示，但是当您右键单击iframe时，右键单击不会被检测为父页面上的事件，因此App Bar会执行没有出现。

在这些情况下，您必须使用片段导航而不是您正在使用的iframe导航。

编辑：
假设以下 html 位于default.html的body标记中。
“contentHost” div将是您加载页面的位置（甚至是初始页面）
App Bar也将存在于此页面上。

<div id="contentHost">

</div>
<div id="trafficTipsAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{position:'bottom',transient:true,autoHide:0,lightDismiss:true}">
    <div class="win-right">
        <button class="win-command" id="settingsButton">
            <span style="background-image: url('images/smalllogo.png')" class="win-commandicon"></span>
            <span class="win-label">Settings</span>
        </button>
    </div>
</div>

default.js将如下所示。
您可以按原样使用“导航”功能还包括以下行 WinJS.Navigation.addEventListener（'navigated'，navigated）;
您会注意到，在 WinJS.Application.onmainwindowactivated 上，我们导航到“main.html”片段，这是初始加载。您可以使用“添加新项目”＆gt;创建此项。片段。
此外，当我们点击应用栏中的“设置”按钮时，我们将导航到“settings.html”片段

(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);

document.addEventListener("DOMContentLoaded", function () {
    WinJS.UI.processAll();
}, false);

WinJS.Application.onmainwindowactivated = function (e) {
    if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        WinJS.Navigation.navigate('main.html');

        var settingsButton = document.getElementById('settingsButton');
        settingsButton.addEventListener('click', function () {
            WinJS.Navigation.navigate('settings.html');
        });
    }
}

function navigated(e) {
    WinJS.UI.Fragments.clone(e.detail.location, e.detail.state)
        .then(function (frag) {
        var host = document.getElementById('contentHost');
        host.innerHTML = '';
        host.appendChild(frag);
        document.body.focus();

        WinJS.Application.queueEvent({
            type: 'fragmentappended',
            location: e.detail.location,
            fragment: host,
            state : e.detail.state
            });

    });
}

WinJS.Navigation.addEventListener('navigated', navigated);
WinJS.Application.start();
})();

如何在iFrame上制作App Bar？

2 个答案: