优雅的Javascript降级 - 外部源文件

Question

对于精通JS的编码人员而言,这是一个简单的问题.

我正在构建一个使用jQuery AJAX方法的Wordpress站点,在单击顶部导航链接时重新加载我的整个内容区域,或者在单击侧栏导航链接时重新加载我的主要内容区域.我想确保只有在用户的浏览器支持JavaScript时才会发出AJAX调用.我在这里和其他网站上找到了一些参考资料,通过外部引用我的脚本来说,没有装配JavaScript的浏览器会忽略所有的JS文件.这准确吗？我考虑使用PHP:

$my_arr = get_browser(null,true);if $my_arr['javascript'] == 1 {
  echo '<script type="text/javascript" src="path/to/script"';
}

我想要的用户体验是如果启用JS,然后激活AJAX调用; 如果JS被禁用,只需将用户发送到他们请求的页面.

例如

    <?php
    /**
     * The template for displaying all pages.
     *
     $ajxy = $_GET['ajxy'];
     if(!is_null($ajxy)) {
       $ajax_code = $ajxy; 
     }

     if(!$ajxy) {
       get_header(); 
     }
     ?>

    <?php if(!$ajax_code) { ?>
            <div id="primary">
              <div id="content" role="main">
                 <div class="container_12" id="contentWrapper">
    <?php } ?>

                   <div id="contentContainer" <?php if($ajax_code) { echo 'class="ajxn"'; } ?>>

    <?php while ( have_posts() ) : the_post(); ?>

                    <div class="grid_8" id="contentGrid">
                        <?php 
                            get_template_part( 'content', 'page' ); 
                        ?>
                    </div>
                        <?php get_sidebar(); ?>

                    <?php endwhile; // end of the loop. ?>
                    </div>

                <?php if(!$ajax_code) { ?>
                </div>
                </div><!-- #content -->
            </div><!-- #primary -->
            <?php } ?>

    <!---My Ajax Loading Script -->
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ajxy.js"></script><!---My Ajax Loading Script -->

    <?php 
    if(!$ajxy) {
        get_footer(); 
    }
    ?>

和脚本:

    function ajxnOff(list, ajxnCode, wrapper, container) {
        jQuery(list).click(function(e) {
            e.preventDefault();

            var $lnkGoz = jQuery(this).attr("href");

            var $lnkGozAjx = $lnkGoz + '?ajxy=' + ajxnCode;
            var $ajxyContainer = wrapper;
            var $ajxyCurThing = container;

            $ajxyCurThing.fadeOut(400, function() {
                    $ajxyContainer.html('<div id="loaderA"></div>');
                    jQuery("div#loaderA").fadeIn(400);
                    jQuery.ajax({
                        url: $lnkGozAjx,
                        success: function(data) {
                                jQuery("div#loaderA").delay(2000).fadeOut(400, function() {
                                    $ajxyContainer.html(data);
                                    jQuery("div.ajxn").fadeIn(400);
                                    jQuery.remove("div#loaderA");
                                });
                        }
                    });

            });
        });
    }

    jQuery(document).ready(function() {
        ajxnOff(jQuery("ul#topNavList a"), 1, jQuery("div#contentWrapper"), jQuery("div#contentContainer"));
        ajxnOff(jQuery("ul#sidebarNavList a"), 2, jQuery("div#contentGrid"), jQuery("div#contentPageContainer"))
    }); 

我一直在学习自己编写代码大约6个月,而且没有任何关于这个主题的书籍,所以非常感谢周围专家的帮助.

Answer 1

这是一个简单的模式,可以通过回退到非ajax链接来进行不显眼的ajax导航.

在您的HTML中:

<a class="ajaxnav" href="page.html">Text</a>

在你的脚本中:

$(".ajaxnav").click(function(event) {
  event.preventDefault();
  // do ajax nav here; 
  // URL is in event.currentTarget.href, modify it however necessary
});

如果不支持javascript,则不会运行脚本,并且您将使用具有有效HREF的标准Web锚点.如果支持javascript,则脚本将使用您的ajax单击处理程序替换所有"ajaxnav"链接处理.非常简单.

Answer 2

是的，如果用户的浏览器不支持 JS 或者禁用了 JS，脚本标签基本上会被忽略。无论如何，包含它们并没有什么坏处，您只需针对不使用它们时发生的情况规划您的站点即可。

就 AJAX 与页面重新加载而言，您只需对站点进行编码，就好像没有 AJAX 一样，即所有链接都应该具有适当的href属性，指向它们应该去的位置。如果启用了 JS，您可以通过其处理程序将 AJAX 附加到链接，并通过从处理单击事件的任何函数onclick返回来阻止默认操作。false