2

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

我知道这听起来很荒谬，但这些天我不想再寻找另一份工作，他们是我曾经工作过的最好的人——曾经——而且我老了。

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

结果，我尝试了 $.ajax、$.get 等...，但我遇到了访问 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>

这是加载到 mDiv 中的 javascript：

<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，我不想使用它，但甚至返回解析错误。

提前致谢

4

2 回答 2

1

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

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

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

这与本网站无关，但您必须非常熟悉 XHR 才能实现 JavaScript CMS。

于 2012-12-09T05:08:14.430 回答
0

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

而是尝试使用 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 和我们希望加载的任何其他文件，同时在每个页面的顶部有一个数组表示这些文件的路径，用于较低目录级别的 html

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

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

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

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

虽然这对 SEO 不友好，但它只适用于在一个位置更新页眉、页脚、导航等，直到一切都完成。

并感谢您的回复

于 2012-12-13T23:34:12.063 回答