使用javascript包含文件

Question

I need to include a file always that the screen browser would be greater or equal than 699px, for this I'm trying to use the following script:

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

But nothing it does. Does anyone know how to get it work?

Best regards.

Answer 1

JavaScript fires after the page is passed to the browser. ASP includes need to be done server side, before page is rendered.

Answer 2

The include directive needs to be a part of the page before it gets to the web browser, and since the JavaScript executes in the web browser, it's already too late for that. You might consider putting the include in the page, but hiding it in a div with style="display:none;" , and then removing that using JavaScript when the page loads:

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

Alternatively, you could use the same strategy with CSS Media Queries .

Edit: Example:

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

This will give you better performance, and it will automatically hide and show the content as the user resizes their browser window.

Answer 3

<!--#include virtual="/menu.asp"--> is SSI syntax (I think ASP Classic borrows that syntax too). Either way, if the server supports it, it gets processed on the server and replaced by the content of the file.

After all the server side processing is complete, the result is delivered to the client.

The odds are that whatever the content of the file is, it will include " characters and new lines, either of which would break the JavaScript string literal.

As a rule of thumb, if you want to show extra content for wider screens when you should:

• Always include the content in the page
• Be more concerned about window size than screen size
• Use CSS Media Queries to restyle it based on the size
• Display the content one thing after another on narrower windows instead of hiding some completely

If you really want to avoid loading the content at all on narrower screens, then use JavaScript to test for the screen/window size and then use XMLHttpRequest to load additional content and DOM to add it to the page.