Question

我不知道为什么，但是当屏幕宽度低于1230像素时应该打印的HTML将不会显示。寻找一些关于原因的建议。提前谢谢！

<script type="text/javascript">
        if (screen.width < 1230) {
           document.write('
           <ul class="navbar-holder">
                <li id="navitem" class="navbaritem-active"><a href="<?php echo 'http://' . $_SERVER['HTTP_HOST']; ?>">home</a></li>
                <li id="navitem" class="navbaritem"><a href="#">about us</a></li>
                <li id="navitem" class="navbaritem"><a href="#">our services</a></li>
                <li id="navitem" class="navbaritem"><a href="#">our work</a></li>
                <li id="navitem" class="navbaritem"><a href="#">blog</a></li>
                <li id="navitem" class="navbaritem"><a href="#">contact us</a></li>
            </ul>
            ');
        }
        else {
            document.write('
            <select class="mobile-page-selector">
                <option>Home</option>
            </select>
            ');
        }
</script>

Answer 1

JavaScript字符串不能包含换行符;你可以在每一行的末尾用反斜杠转义它们，或者连接几个字符串。

<script type="text/javascript">
        if (screen.width < 1230) {
           document.write('\
           <ul class="navbar-holder">\
                <li id="navitem" class="navbaritem-active"><a href="<?php echo 'http://' . $_SERVER['HTTP_HOST']; ?>">home</a></li>\
                <li id="navitem" class="navbaritem"><a href="#">about us</a></li>\
                <li id="navitem" class="navbaritem"><a href="#">our services</a></li>\
                <li id="navitem" class="navbaritem"><a href="#">our work</a></li>\
                <li id="navitem" class="navbaritem"><a href="#">blog</a></li>\
                <li id="navitem" class="navbaritem"><a href="#">contact us</a></li>\
            </ul>\
            ');
        }
        else {
            document.write('\
            <select class="mobile-page-selector">\
                <option>Home</option>\
            </select>\
            ');
        }
</script>

我可以推荐使用CSS吗？此JavaScript仅适用一次，在JavaScript中生成HTML通常错误。如果您使用媒体查询：

@media screen and (max-width: 1230px) {
    .navbar-holder {
        /* Apply some `display: none`s, perhaps */
    }
}

它将更高效，更易于使用，无需JavaScript即可访问，并且可以响应窗口大小调整。

Answer 2

你需要用反斜杠来逃避输入：

document.write("a\
b");

Answer 3

PHP是服务器端，JavaScript是客户端，JavaScript将无法document.write任何PHP并执行它

也就是说，JavaScript认为您在语法错误

href="<?php echo 'http://' . $_SERVER['HTTP_HOST']; ?>

由于'结束了初始字符串

为什么这个HTML不打印？

3 个答案: