【问题标题】:How to check is CDN versions have loaded and if not load local versions of jquery, jquery-mobile,如何检查是否已加载 CDN 版本,如果未加载 jquery、jquery-mobile 的本地版本,
【发布时间】:2013-09-08 16:46:28
【问题描述】:

我广泛搜索并检查了各种建议,但没有为我的问题找到合理的解决方案:如何检查 CDN 版本是否已正确加载?这应该包括检查 css,例如

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

关于如何检查正确加载的 css 文件有什么建议吗?

设置:Node.js 在本地和 heroku 上运行。

我的测试文件(不能正常工作):

<!DOCTYPE html> 
<html> <head>
<meta charset="utf-8">
<title>template.html</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>-->
<script>
  if(typeof jQuery == 'undefined') {
    document.write('<link rel="stylesheet" href="/jqm/jquery.mobile-1.3.2.min.css" \/>')
    document.write('<script src="/jq/jquery-1.10.2.min.js"><\/script>')
    document.write('<script src="/jq/jquery-migrate-1.2.1.min.js"><\/script>')
  }
  if($.mobile == undefined) {document.write('<script src="/jqm/jquery.mobile-1.3.2.min.js"><\/script>')}
</script>
</head>
<body> 

<div data-role="page">
    <div data-role="header">
        <h1>data-role="header"</h1>
    </div>

    <div data-role="content">   
        <p>data-role="content"</p>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>data-role="footer" data-position="fixed"</h4>
    </div>
</div>
</body>    </html>

我的测试 'hello-world' web.js 如下(在本地运行,node s/web.jss 用于服务器目录):

var express = require("express");
var path = require('path');//http://stackoverflow.com/questions/10434001/static-files-with-express-js
var app = express();

process.env.PWD = process.cwd();//http://stackoverflow.com/questions/17212624/deploy-nodejs-on-heroku-fails-serving-static-files-located-in-subfolders

app.use(express.logger());
app.use(express.static(path.join(process.env.PWD, 'html'))); //http://stackoverflow.com/questions/14576644/whats-the-simplest-way-to-serve-static-files-using-node-js
app.use(express.static(path.join(process.env.PWD, 'jq')));
app.use(express.static(path.join(process.env.PWD, 'jqm')));

//app.get('/', function(request, response) {
//    response.send('Hello jc138691');
//});

var port = process.env.PORT || 3000;
app.listen(port, function() {
    console.log("Listening on " + port);
});

这在 Windows 本地也不起作用:process.env.PWD = process.cwd() 不会返回正确的目录。

简而言之,有没有人有一个合理的设置示例:节点后端和任何类型的前端(例如 jquery mobile)?包括灵活的目录结构(即不是一个目录中的所有内容)。

【问题讨论】:

    标签: javascript jquery node.js jquery-mobile heroku


    【解决方案1】:

    这是我的混合物:

    if (typeof jQuery == 'undefined') {
    
        var jqueryins = document.createElement('script');
        jqueryins.type = 'text/javascript';
        jqueryins.async = true;
        jqueryins.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        var s = document.getElementsByTagName('jqueryins')[0];
        s.parentNode.insertBefore(jquery-ins, s);
    

    灵感来自 googleAnalytics 脚本插入

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-146052-10']);
    _gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    

    【讨论】:

      【解决方案2】:

      以下内容在 heroku 和通过 webstorm 在本地运行。 有没有“更好”的设置,请评论? c_xxx 为客户端代码; s_xxx 为服务器代码;

      模板_130906.html:

      <!DOCTYPE html><html><head><meta charset="utf-8"><title>template_130906.html</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
      <!--<script src="loadJQ_1_10_2_JQM_1_3_2.js"></script>-->
      
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
      
      <script>
        if (typeof jQuery == 'undefined') {
          document.write('<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css" \/>');
          document.write('<script src="jquery-1.10.2.min.js"><\/script>');
          document.write('<script src="jquery-migrate-1.2.1.min.js"><\/script>');
        }
        if (typeof $ == 'undefined'  ||  $.mobile == undefined) {
          document.write('<script src="jquery.mobile-1.3.2.min.js"><\/script>');
        }
      </script>
      </head>
      <body> 
      
      <div data-role="page">
          <div data-role="header">
              <h1>data-role="header"</h1>
          </div>
      
          <div data-role="content">   
              <p>data-role="content"</p>
          </div>
      
          <div data-role="footer" data-position="fixed">
              <h4>data-role="footer" data-position="fixed"</h4>
          </div>
      </div>
      </body>  </html>
      

      仍然没有检查 css 是否正确加载的解决方案?!?!

      web_130906.js:

      // webstorm setup:
      //http://blog.jetbrains.com/webide/2010/11/working-with-javascript-libraries-in-phpstorm-webstorm/
      
      var express = require("express");
      var path = require('path');//http://stackoverflow.com/questions/10434001/static-files-with-express-js
      var app = express();
      
      process.env.PWD = process.cwd();//http://stackoverflow.com/questions/17212624/deploy-nodejs-on-heroku-fails-serving-static-files-located-in-subfolders
      
      app.use(express.logger());
      app.use(express.static(path.join(process.env.PWD, 'c_html'))); //http://stackoverflow.com/questions/14576644/whats-the-simplest-way-to-serve-static-files-using-node-js
      app.use(express.static(path.join(process.env.PWD, 'c_js')));
      app.use(express.static(path.join(process.env.PWD, 'jq')));
      app.use(express.static(path.join(process.env.PWD, 'jquery.mobile-1.3.2')));
      
      //app.get('/', function(request, response) {
      //    response.send('Hello jc138691');
      //});
      
      var port = process.env.PORT || 3000;
      app.listen(port, function() {
          console.log("Listening on " + port);
      });
      

      package.json:

      {
          "name": "jqm130824",
          "version": "2013.08.27",
          "description": "jqm130824",
          "dependencies": {
            "express": "3.3.5",
            "path": "0.4.9"
          },
          "engines": {
              "node": "0.10.15",
              "npm": "1.3.5"
          }
      }
      

      对于heroku,Procfile:

      web: node s_js/web_130906.js
      

      入口点index.html:

      <!DOCTYPE html>
      <html>
      <head>
          <title> title </title>
      </head>
      <body>
           <h1> index.html boby </h1>
           <a href="template_130906.html">template_130906.html </a>
      </body>
      </html>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-10-21
        • 2012-08-21
        • 1970-01-01
        • 2013-05-25
        • 1970-01-01
        • 2010-12-22
        • 1970-01-01
        • 2023-04-11
        相关资源
        最近更新 更多