javascript - 从上一级目录加载本地 javascript 文件

标签 javascript ajax dom xmlhttprequest

我目前签约到一个不能使用 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,我不想使用它,但它甚至会返回一个解析错误。

提前致谢

最佳答案

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

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

一个快速的 hack 是 /(.*)\/.*/.exec( '/foo/bar/baz.html' )[1]。这不会处理 ? 之后的查询字符串或 # 之后的 anchor ,但是您不会在静态网站上进行查询,并且在您获得之前不会有 anchor 进入更高级的技术。 jQuery 有一个更好的工具来解析 URL,也是基于正则表达式。

这对于本网站来说是题外话,但您必须非常熟悉 XHR 才能实现 JavaScript CMS。

关于javascript - 从上一级目录加载本地 javascript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13784723/

相关文章:

javascript - 带标签的 CKEditor 自定义插件环绕选择

jQuery AJAX 仅获取标题并决定是否获取内容

javascript - 是否保证 &lt;script&gt; 标记上的加载事件总是在脚本执行后立即触发?

javascript - 遍历 jQuery 选择器返回的元素

javascript - cucumber.js 并且不是一个函数

javascript - 使用 css、jquery 或 smth 水平翻转选择框

javascript - 使用 AJAX 和 PHP 附加加载 gif 文件上传

asp.net - UpdatePanel 完整回发

javascript - 在 reactjs 中处理多个 ajax 调用

javascript - CSS 媒体查询不足以检测超大型移动/平板设备与桌面设备