如何通過iFrame製作應用欄？

我正在玩一些Windows 8的東西，並想知道我可以如何在Windows 8應用程序中執行以下操作。如何通過iFrame製作應用欄？

顯示一個網頁。
在網頁上實現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％的空白空間讓我點擊來切換空格。但我真的想讓它成爲全屏。有人嗎？非常感謝你。

注意：如果您使用的是觸控設備，則應用欄實際上可以通過將手指從屏幕外側滑動到屏幕內側來切換。所以這工作得很好。但不是右鍵單擊。所以這篇文章是要求右鍵點擊選項。非常感謝你提前。

來源

2011-12-20 louis.luo

由微軟研究員回答..在這裏重新發布它...

這個想法是在iframe上添加一個div。需要確保div具有透明背景，並且div位於iframe的「上方」。

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

來源

2012-01-17 01:53:27

右鍵單擊頁面底部留下的20％空間。我敢打賭，應用程序欄將顯示出來。當您在底部滑動手指時，您正在觸摸父頁面以顯示應用欄，但是當您右鍵單擊iframe時，右側的點擊不會在父頁面上檢測爲事件，因此應用欄會執行此操作沒有出現。

在這些情況下，您將不得不使用片段導航而不是您正在使用的iframe導航。

編輯：
假設以下html是在default.html的身體標記。
「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（'navigated'，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(); 
})();

來源

2012-01-10 20:40:31 sunil

請您詳細解釋一下嗎？我是新來的。非常感謝你。 @sunil – 2012-01-10 20:51:13

非常感謝您在這個問題上的更新，@sunil。但我仍然不明白你的改變將如何切換應用欄。您是否建議我應該將一個appbar放在主體內容之外，以便它始終與整個應用程序的appbar相同？如果這就是您的意思，那麼當您在只顯示全屏iframe的頁面上時，如何切換appbar？ – 2012-01-15 22:25:45

我上面描述的場景將只有一個「應用欄」爲整個「應用程序」。你能否在你說「appbar可以切換」時解釋你的意思。你的意思是當你進入另一個全屏iframe時你想隱藏應用欄？ – sunil 2012-01-25 18:57:49

如何通過iFrame製作應用欄？

回答

相關問題