檢測位置：使用javascript固定

我想從這裏使用Kangax的腳本：http://kangax.github.com/cft/來檢測那些「正常」實現位置的瀏覽器：與移動瀏覽器相比，這是固定的，因爲我可以使用jQuery來僞裝它移動瀏覽器。檢測位置：使用javascript固定

Kangax的代碼工作正常。但是，當我將它合併到我的頁面時，它不會。我認爲這肯定是一個明顯的錯誤。任何幫助將非常感激！

////Detect whether position:fixed works (mobile browsers). Use JS to position #navwrap if not. 
    //Kangax's script - begins at "function" on the next line. 
function detected() { 
    var container = document.body; 
    if (document.createElement && 
    container && container.appendChild && container.removeChild) { 
     var el = document.createElement("div"); 
     if (!el.getBoundingClientRect) { 
      return null; 
     } 
     el.innerHTML = "x"; 
     el.style.cssText = "position:fixed;top:100px;"; 
     container.appendChild(el); 
     var originalHeight = container.style.height, originalScrollTop = container.scrollTop; 
     container.style.height = "3000px"; 
     container.scrollTop = 500; 
     var elementTop = el.getBoundingClientRect().top; 
     container.style.height = originalHeight; 
     var isSupported = elementTop === 100; 
     container.removeChild(el); 
     container.scrollTop = originalScrollTop; 
     return isSupported; 
    } 
    return null; 
}; 
if (detected()) { 
    alert ('non-mobile'); 
} 
    else { 
     alert ('mobile'); 
    }

萬一有幫助，原代碼（剝離儘可能多地）：

<body> 
<h2>Position Fixed Test</h2>  

<script>  
(function(__global){ 
// make sure `window` resolves to a global object 
var window = this; 
var features = { }; 
features.IS_POSITION_FIXED_SUPPORTED = (features.__IS_POSITION_FIXED_SUPPORTED = function() { 
var container = document.body; 
if (document.createElement && 
    container && container.appendChild && container.removeChild) { 
    var el = document.createElement("div"); 
    if (!el.getBoundingClientRect) { 
     return null; 
    } 
    el.innerHTML = "x"; 
    el.style.cssText = "position:fixed;top:100px;"; 
    container.appendChild(el); 
    var originalHeight = container.style.height, originalScrollTop = container.scrollTop; 
    container.style.height = "3000px"; 
    container.scrollTop = 500; 
    var elementTop = el.getBoundingClientRect().top; 
    container.style.height = originalHeight; 
    var isSupported = elementTop === 100; 
    container.removeChild(el); 
    container.scrollTop = originalScrollTop; 
    return isSupported; 
} 
return null; 
})(); 
__global.__features = features; 
})(this); 

(function(){ 
function detect() { 
for (var i=0; i<1; i++) { 
    var testResult = __features['IS_POSITION_FIXED_SUPPORTED']; 
    alert (testResult); 
    i++; 
} 
}; 
detect(); 
})(); 
</script> 

</body>

來源

2011-05-10 phil

什麼是錯誤 – shevski 2011-05-10 11:02:03

http://kangax.github.com/cft/上的原始示例可以成功地區分桌面和移動瀏覽器，但我的不是。我想我沒有測試null與isSupported正確？ – phil 2011-05-10 12:38:41

你看到什麼，什麼時候 – shevski 2011-05-10 12:45:04

Sorted。感謝您的意見。

原來我的代碼版本運行良好，但它必須放在頁面的主體中。如果它在Head中，即使在DOM Ready調用中也不會。

只需要找出爲什麼現在！但至少代碼的作品。

來源

2011-05-11 20:47:47 phil

我猜你總是越來越non-mobile。您正在檢查detected是否存在未執行該功能。更改JavaScript來

if (detected()) { 
    alert ('non-mobile'); 
} 
else { 
    alert ('mobile'); 
}

到底有沒有你所創建的功能分配給一個變量，而不是作爲命名功能例如對匿名函數的原因

function detected(){ 
    // Function content. 
}

來源

2011-05-10 11:12:56 detaylor

感謝您的回覆。我併入，但沒有變化:( 我也糾正了命名函數與var - 只是noob-ness。 – phil 2011-05-10 12:40:08

你會得到什麼結果？你提供的代碼對我來說工作正常[http://jsfiddle.net /seRr3/](http://jsfiddle.net/seRr3/）。你會得到什麼樣的提示？ – detaylor 2011-05-10 12:46:43

@phil - 將函數聲明爲一個變量沒有任何問題，只是當函數是 – detaylor 2011-05-10 12:58:41

檢測位置：使用javascript固定

回答

相關問題