Question

我已经在几天内搜索了几个小时的答案，虽然有很多关于如何在项目中包含文件的主题（也在Stack Overflow中），但我还没有找到解决问题的方法。 / p>

我正在开发一个项目，我希望一次包含一个单独的对象，来自许多不同的文件（我不想包含文件本身，只包括它们的内容）。所有文件中的所有对象都具有相同的名称，只有内容不同。

重要的是我没有在页面的head部分获得SCRIPT标记，因为文件中的所有内容都具有相同的名称。这些文件都没有任何函数，只有一个对象，需要一次加载一个，然后在加载下一个元素时丢弃。

对象将保存将在页面上显示的数据，并通过'onclick'事件从菜单中调用它们。

function setMenu()   //   The menu is being build.
{
    var html = '';
    html += '<table border="0">';
    for (var i = 0; i<menu.pages.length; i++)    
    {
        html += '<tr class="menuPunkt"><td width="5"></td><td onclick="pageName(this)">'+ menu.pages[i] +'</td><td width="5"></td></tr>';
    }
    //   menu is a global object containing elements such as an array with
    //   all the pages that needs to be shown and styling for the menu.

    html += '</table>';

    document.getElementById("menu").innerHTML = html;
    style.setMenu();   //   The menu is being positioned and styled.
}

现在，当我点击一个菜单项时，触发了pageName函数，我也将HTML元素发送到函数中，我希望将外部文件中的内容加载到局部变量中并用于在页面上显示内容。

我想要的答案是“如何将外部obj加载到我需要它的函数中？” （它可能是外部文件，但仅限于未包含在项目主题部分的术语中）。我仍在从我自己的本地库中加载该文件。

function pageName(elm)   // The element that I clicked is elm.
{
    var page = info.innerHTML;    // I need only the innerHTML from the element.
    var file = 'sites/' + page + '.js';   // The file to be loaded is created.
    var obj = ??      // Here I somehow want the object from the external file to be loaded.
// Before doing stuff the the obj.
    style.content();
}

外部文件中的内容可能如下所示：

// The src for the external page: 'sites/page.js'

var obj = new Object()
{
    obj.innerHTML = 'Text to be shown';
    obj.style = 'Not important for problem at hand';
    obj.otherStuff = ' --||-- ';
}

任何帮助将不胜感激，

莫尔

Answer 1

使用以下功能，您可以以ajax方式下载外部js文件并执行该文件的内容。但请注意，外部文件将在全局范围内进行评估，不建议使用eval。该功能是从this问题中采用的。

function strapJS(jsUrl) {

    var jsReq = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    if (jsReq === null) {
        console.log("Error: XMLHttpRequest could not be initiated.");
    }
    jsReq.onload = function () {
        try {
            eval(jsReq.responseText);
        } catch (e) {
            console.log("Error: The script file contains errors." + e);
        }
    };
    try {

        jsReq.open("GET", jsUrl, true);
        jsReq.send(null);

    } catch (e) {
        console.log("Error: Cannot retrieving data." + e);
    }
}

JSFiddle here

修改：1

经过一些重构后，我想出了这个：

function StrapJs(scriptStr, jsObjName) {
    var self = this;
    self.ScriptStr = scriptStr;
    self.ReturnedVal = null;

    function _init() {
        eval(self.ScriptStr);
        self.ReturnedVal = eval(jsObjName);
    }

    _init();
}

然后，您可以以任何方式获取脚本字符串，并使用脚本字符串和要在脚本字符串内返回的对象名称实例化新的StrapJs对象。然后，StrapJs对象的ReturnedVal属性将包含您所追求的对象。

示例用法：

var extJS = "var obj = " +
    "{ " +
    "    innerHTML : 'Text to be shown', " +
    "    style : 'Not important for problem at hand', " +
    "    otherStuff : ' --||-- ' " +
    "}; ";

var extJS2 = "var obj = " +
    "{ " +
    "    innerHTML : 'Text to be shown 2', " +
    "    style : 'Not important for problem at hand 2', " +
    "    otherStuff : ' --||-- 2' " +
    "}; ";

var strapJS = new StrapJs(extJS, 'obj');
var strapJS2 = new StrapJs(extJS2, 'obj');
console.log(strapJS.ReturnedVal.innerHTML);
console.log(strapJS2.ReturnedVal.innerHTML);

在this fiddle

上查看此操作

包含来自外部.js文件的对象

1 个答案: