上節將顯示我們地圖的OBJECT控件,布了一下局,但地圖沒有進行加載。
這是因為我們要在另一個頁面,對OBJECT控件進行地圖加載,並且得到該控件的sgworld,以便對其進行我們想要的開發。
這里,細心的人會說,為什么要在另一個頁面加載呢?為什么不在OBJECT所在頁面進行加載呢?
這也是一個比較關鍵性的問題,原因很簡單,
因為Object控件上,放置任何DIV,SPAN,或者其他控件時,都會被Object控件覆蓋在下面。
在網上找了很多辦法,最有效的,而且項目中常用到的就是IFRAME方法。
1.項目中加上一個HTML頁。

2.在Index.cshtml中加入Iframe,並且src指向MenuPage.html
-z-index將Iframe,放置於Object之上。
<body>
<iframe id = "menuIframe" src="/HTMLPage/MenuPage.html" style="z-index:1;position:absolute; width:400px;height:100%;" ></iframe>
</body>
3.看一下效果。
-左-菜單,右-地圖^^

4.設置焦點
-在這又遇到新問題,頁面加載后,當點擊3D窗口控件時,左邊菜單又被蓋到,地圖下面。
解決辦法,設置一個隱藏按鈕,放置在MenuPage.html里,在任何情況下,將焦點設置在該按鈕上,這個問題就可以解決了。
加載的時候,聚一次焦,加上一個文檔OnClick事件,當每次點擊本文檔時,都要聚焦一次。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function Load() {
document.getElementById('btnhidden').focus(); //加載時,設置焦點
if (document.all) {
window.document.onclick = new Function("return onClick(event);"); //當點擊MenuPage.html時,再次聚焦
} else {
window.document.body.setAttribute("onclick", "return onClick(event);");
}
}
function onClick(ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if (target && target.id && target.id == "PanelBox") {
}
else {
if (target.tagName == 'INPUT') {
if (target.role == 'checkbox') {
document.getElementById('btnhidden').focus(); //當點擊checkbox的時候,再次聚焦
}
}
else { document.getElementById('btnhidden').focus(); }
}
}
</script>
</head>
<body onload="Load()" onclick="MyFocus()">
<input type="button" style="width:40px;z-index:-2;position:absolute;top:0px;left:0px;filter:alpha(opacity=0);" id="btnhidden" />
</body>
</html>
*這個時候我們發現,我們點擊網頁上任何地方的時候,菜單頁都不會被蓋在地圖下。
5.結束語
-這一節,我們征服了,任何HTML控件都不能放在OBJECT控件之上的霸道的一面。
