使用javascript包含文件

Question

我需要始終包含一個文件，以使屏幕瀏覽器大於或等於699px，為此，我嘗試使用以下腳本：

<script type="text/javascript">
<!--
if (screen.width >= 699) {
document.write (" <!--#include virtual="/menu.asp"-->");
}
//-->
</script>

但是什么也沒做。 有誰知道如何使它工作？

最好的祝福。

Answer 1

頁面傳遞到瀏覽器后，JavaScript會觸發。 ASP包括需要在呈現頁面之前在服務器端完成。

Answer 2

include指令必須先進入頁面的一部分， 然后才能到達Web瀏覽器，並且由於JavaScript 在 Web瀏覽器中執行，因此已經為時已晚。 您可以考慮將包含內容放入頁面中，但將其隱藏在具有style="display:none;"的div style="display:none;" ，然后在頁面加載時使用JavaScript將其刪除：

<script type="text/javascript">
window.addEventListener('load', function(){
    if (screen.width >= 699)
        document.getElementById('myHiddenElement').style.display = null;
});
</script>

另外，您可以對CSS Media Queries使用相同的策略。

編輯：示例：

<style type="text/css">
#myHiddenElement {
    display: none;
}
@media screen and (min-width: 699px) {
    #myHiddenElement {
        display: block;
    }
}
</style>

這將為您提供更好的性能，並且當用戶調整其瀏覽器窗口的大小時，它將自動隱藏和顯示內容。

Answer 3

<!--#include virtual="/menu.asp"-->是SSI語法（我認為ASP Classic也借用該語法）。 無論哪種方式，如果服務器支持，它將在服務器上進行處理並替換為文件的內容。

在完成所有服務器端處理后，結果將交付給客戶端。

賠率是，無論該文件的內容是，它將包括"人物和新的生產線，其中任何一個將打破JavaScript字符串字面。

根據經驗，如果要在更大的屏幕上顯示更多內容，則應：

• 始終在頁面中包含內容
• 比屏幕大小更關注窗口大小
• 使用CSS Media Queries根據大小重新設置樣式
• 在狹窄的窗口中逐個顯示內容，而不是完全隱藏一些內容

如果確實要避免在狹窄的屏幕上完全加載內容，請使用JavaScript測試屏幕/窗口大小，然后使用XMLHttpRequest加載其他內容，然后使用DOM將其添加到頁面。