0

我不知道为什么，但是当屏幕宽度低于 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>
4

3 回答 3

2

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 即可访问，并且响应窗口大小调整。

于 2013-11-10T23:53:26.590 回答
0

您需要使用反斜杠转义您的输入：

document.write("a\
b");
于 2013-11-10T23:54:13.533 回答
0

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

也就是说，JavaScript 认为您在

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

由于'结束了初始字符串

于 2013-11-10T23:56:39.670 回答