Question

我目前与一个无法使用CMS或PHP的地方签约，但他们希望我使用HTML和JavaScript构建类似CMS的东西。

我知道这听起来很荒谬，但我现在不想找另一份工作，而且他们是我曾经为之工作的最好的人 - 永远 - 我老了。

CMS的一个概念是拥有您可以在任何给定时间包含的全局文件。

结果，我尝试了$ .ajax，$ .get等等，但我遇到了Access URI被拒绝的问题以及尝试加载一个目录级别的文件的那些事情当前目录。

我能够通过使用旧的XMLHttpRequest / ActiveXObject来加载javascript文件。

但是，无法调用已加载的div中的脚本。我收到错误“无法找到变量：mFunc”，这是已加载到div中的函数的名称。

这是我的html的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>retrieve local file one level up</title>
<script type="text/javascript">
<!--
var createRequestObject = function(){   
    var req;

    if(window.XMLHttpRequest){
        // Firefox, Safari, Opera...
        req = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        // Internet Explorer 5+
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        alert('There was a problem creating the XMLHttpRequest object');
    }   
    return req; 
}

    // Make the XMLHttpRequest object
    var http = createRequestObject();


var sendRequestPost = function(){
    var jscript = '../test.js';
    // Open PHP script for requests
    http.open('GET', jscript);
    http.setRequestHeader('Content-Type', 'text/javascript');
    http.onreadystatechange = handleResponsePost;
    http.send(null);
    var mT = setTimeout("mFunc()", 2000);
}

var handleResponsePost = function(){
    if(http.readyState == 1){
        document.getElementById('mDiv').innerHTML = "Please wait, loading... " ; 
    }else if(http.readyState == 4 && http.status == 200){
        // Text returned from PHP script
        var response = http.responseText;
        document.getElementById('mDiv').innerHTML = response;

        if(response){
            // Update ajaxTest2 content
            document.getElementById('mDiv').innerHTML = response;
        }
    }else if(http.readyState == 2){
        document.getElementById('mDiv').innerHTML = http.responseText;
    }else if(http.readyState == 3){
        document.getElementById('mDiv').innerHTML = http.responseText;
    }
}
-->
</script>
</head>

<body onload="javascript:sendRequestPost();">
<div id="mDiv"></div>
</body>
</html>

这是javascript加载到mDiv：

<script type="text/javascript">
<!--
var mFunc = function(){
    var mScript = document.createElement("script");
    mScript.setAttribute("type","text/javascript");
    var data = 'alert("gets here");'
    mScript.text = data;

    var head = document.getElementsByTagName("head")[0];
    head.appendChild(mScript);
}
-->
</script>

然而，在两秒钟过后，我收到错误。

我确信这可能是因为浏览器只是将其视为div中的文本，因此如何让它识别出它是javascript。

我尝试过使用eval，我不想使用它，但甚至会返回一个解析错误。

提前致谢

Answer 1

../对本地文件系统（在大多数平台上）有意义，但对HTML或大多数Web服务器都没有意义。请记住，URL只是服务器的查询字符串。

一般来说，您需要解析URL以删除不需要的少数元素。但是，如果您只想要在网站上使用的脚本，则应从根目录引用它们，因此相对URL将以/开头。

快速破解将是/(.*)\/.*/.exec( '/foo/bar/baz.html' )[1]。这不会处理?之后的查询字符串或#之后的锚点，但您不会在静态网站上查询，并且在您使用更高级的技术之前不会有锚点。 jQuery有一个更好的实用程序来解析URL，也基于正则表达式。

这是该网站的offtopic，但您必须非常熟悉XHR才能实现JavaScript CMS。

Answer 2

好的，我与之合作的另一位程序员找到了一个简单的解决方案。

而是尝试使用ajax从更高的目录级别加载JavaScript文件，然后运行document.writeln或document.getElementById（“someDiv”）。innerHTML - 反向步骤。

按正常方式包含JS文件：

<script type="text/javascript" src="../../common/header.js"></script>

在这个JS文件中

function CommonHeader(mPath) {
    document.writeln('<header>');
    document.writeln('  <div class="PageWidth">');
    document.writeln('      <h1><a href="' + mPath + 'index.html"     title="Something">Something<sup>&reg;</sup></a> <a  href="http://www.xyz.com/abc.html" title="Learn more about us."><em>Learn about us</em></a></h1>');
    document.writeln('      <nav>');
    document.writeln('          <ul>');
    document.writeln('              <li id="loginOut"></li>');

订单需要您在流程开始时调用document.writeln。

我们现在可以加载header.js，footer.js以及我们希望加载的任何其他文件，以及在每个页面顶部有一个数组，表示这些文件的路径，对于较低的目录级别htmls

dynamicPathArr[0] = "../../";

然后在任何文件中，您可以调用该函数将日期写入页面

<script type="text/javascript">CommonHeader(dynamicPathArr[0])</script>

我无法相信我没有想到这个完全简单的解决方案。

虽然这不是SEO友好的，但它只适用于在一个位置更新页眉，页脚，导航等等，直到所有内容都完成。

感谢您的回复

从上面的一个目录级别加载本地javascript文件

2 个答案: