使用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 之前，include指令需要成为页面的一部分才能进入Web浏览器，而且由于JavaScript在 Web浏览器中执行，所以已经太晚了为了那个原因。您可以考虑将包含在页面中，但将其隐藏在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以将其添加到页面。