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

Easy question for a coder well-versed in JS.

对于精通JS的程序员来说，这是个简单的问题。

I'm building a Wordpress site that uses jQuery AJAX methods, reloading either my entire content area when a top nav link is clicked or my main content area when a sidebar nav link is clicked. I want to be sure that the AJAX call is only issued if the user's browser supports JavaScript. I found some reference material here and on other sites that said by referencing my script externally, a browser unequipped with JavaScript would simply ignore all JS files. Is this accurate? I considered using php:

我正在构建一个使用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"';
}

The UX I'm going for is if JS is enabled, then fire AJAX calls; if JS is disabled, just send the user to the page they've requested.

我想要的UX是如果启用了JS，那么就触发AJAX调用;如果JS被禁用，只需将用户发送到他们请求的页面。

e.g.

如。

    <?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(); 
    }
    ?>

and the script:

和脚本:

    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"))
    });

I've been learning to code on my own for about 6 months and don't have any books on the subject, so any help from the experts around here is greatly appreciated.

我已经自学了6个月的代码，没有任何关于这个主题的书，所以这里的专家的任何帮助都非常感谢。

2 个解决方案

#1

Yes, if the user's browser either doesn't support JS or has JS disabled, script tags are essentially ignored. It doesn't hurt to include them no matter what, you just have to plan your site for what happens when they're not utilized.

是的，如果用户的浏览器不支持JS或禁用了JS，脚本标签基本上就会被忽略。不管怎样，包含它们都没有坏处，你只需要规划你的站点，看看当它们没有被利用时会发生什么。

As far as AJAX versus page reload goes, you simply code your site as if there were no AJAX, i.e. all links should have appropriate href attributes point to where they should go. If JS is enabled, you attach your AJAX to the links via its onclick handler and prevent the default action by returning false from whatever function handles the click event.

至于AJAX和页面重载，您只需像没有AJAX一样编写站点代码，也就是说，所有链接都应该有适当的href属性指向它们应该去的地方。如果启用了JS，则通过其onclick处理程序将AJAX附加到链接，并通过从处理单击事件的任何函数返回false来防止默认操作。

#2

Here is a simple pattern to do unobtrusive ajax navigation with fallback to non-ajax links.

下面是一个简单的模式，可以使用非ajax链接进行不引人注目的ajax导航。

In your HTML:

HTML:

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

In your script:

在你的脚本:

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

If javascript is not supported, the script is simply not run, and you're left with standard web anchors with valid HREFs. If javascript is supported, the script replaces all "ajaxnav" link handling with your ajax click handler. Easy as pie.

如果不支持javascript，脚本就不会运行，剩下的是标准的web锚和有效的href。如果支持javascript，脚本将用ajax单击处理程序替换所有的“ajaxnav”链接处理。简单派。

#1

#2