如何在 iFrame 上制作应用栏？

发布于 2024-12-21 22:47:01 字数 1506 浏览 1 评论 0原文

我正在玩一些 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

.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% 的空白，以便我点击来切换空白。但我真的很想让它全屏显示。有人吗？非常感谢。

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

原文

I am playing around some windows 8 stuff and wonder how I can do the following in a windows 8 app.

Display a web page.
Implement a metro style app bar over the web page.

Here is my 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>

And here is my 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 */
}

Usually, the App bar can be toggled by right-click.
But in the above code, right click doesn't work on the iFrame.
So I had to leave a 20% white space for me to click on to toggle the white space.
But I really want to make it to be fullscreen.
Anyone? Thank you very much.

Note: If you are on a touch device, the App Bar can actually be toggled by swiping your finger from the outside of the screen to inside of the screen. So that works just fine. But not for right-click. So this post is asking right click option. Thank you very much in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九局 2024-12-28 22:47:01

由 Microsoft 同事回答.. 在这里重新发布...

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

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

回复收藏 0 原文

み格子的夏天 2024-12-28 22:47:01

右键单击页面底部留下的 20% 空间。我打赌应用栏将会出现。当您在底部滑动手指时，您正在触摸父页面，因此应用程序栏会显示，但是当您在 iframe 中右键单击时，右键单击不会被检测为父页面上的事件，因此应用程序栏会显示不出现。

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

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

<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('naviged', navigated);
您会注意到，在 WinJS.Application.onmainwindowactivated 上，我们导航到 "main.html" 片段，这是初始加载。您可以使用“添加新项目”> 创建此项目片段。
此外，当我们单击应用栏中的“设置”按钮时，我们将导航到“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();
})();

Right click on the 20% space you left at the bottom of the page. My bet is that the App Bar will show up. When you were swiping your finger at the bottom, you were touching the parent page so the App Bar shows up, but when you right click in the iframe the right click is not detected as an event on the parent page, so the App Bar does not show up.

In these scenarios, you will have to go with fragment navigation rather than the iframe navigation which you were using.

EDIT:
Assume the following html is in the body tag of default.html.
"contentHost" div will be where you will load your pages(even the initial page)
The App Bar will exist on this page also.

<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>

The default.js will look like the following.
You can use the "navigated" function as it is.
Also include this line WinJS.Navigation.addEventListener('navigated', navigated);
You will notice that on WinJS.Application.onmainwindowactivated we are navigating to "main.html" fragment, this is the initial load. You can create this by using "Add new item" > Fragment.
Also, when we click the "settings" button in the App Bar we will navigate to "settings.html" fragment

(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();
})();

回复收藏 0 原文

~没有更多了~