为什么此javascript在本地运行，但不在Web服务器上运行？

我有我的网页上下面的JavaScript/jQuery的：为什么此javascript在本地运行，但不在Web服务器上运行？

<script> 
$("#mymarkdown").load("./LPInfo.md"); 
var md = markdown.toHTML($("#mymarkdown").html()); 
$("#mymarkdown").html(md); 
</script>

该网页是在这里：

http://www.nickhodges.com/LeanTed/bootstrap/about.html

该页面使用引导程序。在查看代码时，我查看了控制台中的任何错误。正如你所看到的，它没有做我想做的事情，它使用markdown.js将文件的内容呈现为HTML。

这里的怪异的一部分，和我的问题的根源：

如果我打开网页的本地文件，浏览器什么都不做。 IE9将打开并正确呈现该页面，但只有在我允许运行脚本后。

两个浏览器均无法正确使用上述链接呈现网页。 Firefox有相同的结果。

我承认在所有这些方面都差不多，但我无法解释不一致的行为。我知道代码正在访问本地文件，但通过Web服务器访问时不应该是一个问题，对吧？

无论如何，帮助将不胜感激。

UPDATE：下面是页面代码：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>LeanTed Markdown Editor</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Le styles --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <style> 
     body { 
     padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ 
     } 
    </style> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    <!-- Le fav and touch icons --> 
    <link rel="shortcut icon" href="../assets/ico/favicon.ico"> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> 
    </head> 

    <body> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 
      <a class="brand" href="#">LeanTed Markdown Editor</a> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li><a href="hero.html">Home</a></li> 
       <li class="active"><a href="#">About</a></li> 
       <li><a href="http://www.nickhodges.com/contact.aspx">Contact</a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 

    <div class="container"> 
     <div id="mymarkdown"></div> 
    </div> <!-- /container --> 

    <!-- Le javascript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="../assets/js/bootstrap-transition.js"></script> 
    <script src="../assets/js/bootstrap-alert.js"></script> 
    <script src="../assets/js/bootstrap-modal.js"></script> 
    <script src="../assets/js/bootstrap-dropdown.js"></script> 
    <script src="../assets/js/bootstrap-scrollspy.js"></script> 
    <script src="../assets/js/bootstrap-tab.js"></script> 
    <script src="../assets/js/bootstrap-tooltip.js"></script> 
    <script src="../assets/js/bootstrap-popover.js"></script> 
    <script src="../assets/js/bootstrap-button.js"></script> 
    <script src="../assets/js/bootstrap-collapse.js"></script> 
    <script src="../assets/js/bootstrap-carousel.js"></script> 
    <script src="../assets/js/bootstrap-typeahead.js"></script> 

    <script src="markdown.js"></script> 


    <script> 
    $("#mymarkdown").load("./LPInfo.md"); 
    var md = markdown.toHTML($("#mymarkdown").html()); 
    $("#mymarkdown").html(md); 
    </script> 

    </body> 
</html>

来源

2012-11-19 Nick Hodges

您是否将LPInfo.md上传到远程服务器？ – Matt

你能发布about.html代码吗？ –

@Matt - 是的，文件在那里。它实际上表现为原始的，不降价的降价。 –

的问题是，你想运行的#mymarkdown内容markdown.toHTML之前，它已经完全加载到DOM（load是异步的，）。使用的load“完整”的回调和它的作品：

$("#mymarkdown").load("./LPInfo.md", function() { 
    var md = markdown.toHTML($("#mymarkdown").html()); 
    $("#mymarkdown").html(md); 
});

（它本地工作的原因可能是因为lpinfo.md装载近瞬间，或者是因为1. Ajax调用本地主机是非常快，或2.您的浏览器已经从本地缓存文件。）

来源

2012-11-19 23:20:43 McGarnagle

我认为这是某种记录。我不能接受你的答案，因为它已经不是6分钟了，显然。 ;-)它效果很好。非常感谢。 –

@NickHodges - 我认为它是9分钟... o.O –

是的，它还剩6分钟，这意味着我问了我的问题，得到了答案，并在3分钟内修复。 :-) –

看看this或that问题如何通过XHR启用本地文件系统访问。

您的实际问题是，.load()不只是开始的异步加载的文件。但即使在加载之前，您也会获得HTML内容（可能为空）并将其呈现为降价。不久之后，该元素将从ajax回调中被覆盖。使用回调参数！

如果您没有加载HTML，请不要使用load。jQuery有一个powerful ajax function上，你甚至可以建立一个Markdown2html转换器时，降价文件送达和HTML是想用于自动：

$.ajaxSetup({ 
    accepts: { 
     "markdown": "text/x-markdown" // MIME type 
    }, 
    contents: { 
     "markdown": /markdown/ // MIME type matcher 
    }, 
    converters: { 
     "markdown html": markdown.toHTML 
    } 
});

但你的目的，只使用一个简单.ajax call：

$.ajax("./LPInfo.md").done(function(md) { 
    $(function() { 
     $("#mymarkdown").html(markdown.toHTML(md)); 
    }); 
});

来源

2012-11-19 23:22:41 Bergi

做它像这样：

$(function() { 
    $.get('./LPInfo.md', function (data) { 
     $('#mymarkdown').html(markdown.toHTML(data)); 
    }); 
});

因此，代码是DOMContentLoaded处理程序，以确保里面的DOM已准备就绪（罪您正在向它注入内容）。此外，$.get是适当的检索机制。你正在做这在你的情况下没有多大意义。

什么你与做：

获得通过Ajax MD文件，
将其内容到DOM，
检索从DOM的内容，
处理使用Markdown的内容，
将生成的HTML源代码插入到DOM中。

什么我的代码做什么：

通过Ajax获得MD文件，
处理其内容与降价，
将生成的HTML源代码到DOM。

来源

2012-11-19 23:23:02

为什么此javascript在本地运行，但不在Web服务器上运行？

回答

相关问题