通过用 html 中的另一个脚本替换它来重新分配外部 JavaScript 全局变量

Question

我正在尝试绕过错误：

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

通过包含包含 html 数据的外部 javascript 文件。所以我想要实现的是，在单击侧边菜单时加载 html 内容。在此过程中，我希望将较早的数据替换为新的数据，以便我可以将旧内容替换为新内容。下面是代码的主要部分。

function change_current_doc(clicked_file, doc_src) {
    //Change current JavasScript file containing data with the new one. 
    var prev_doc_src = doc_src;
    var prev_doc = doc;
    doc_src = html_file.doc_path + '/' + clicked_file.split('.')[0] + '.json';
    var scripts = document.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
        if (scripts[i].src.indexOf(prev_doc_src) > 0) {
            scripts[i].remove();
            var doc_script = document.createElement('script');
            doc_script.setAttribute('src', doc_src);
            document.head.appendChild(doc_script);
            break;
        }
    }

}
$(document).ready(function () {
    $('#st_side_menu').jstree({
        "plugins": [
            "types",
            "unique",
            "wholerow",
            "changed"               
        ],
        "types": {
            "default": {
                "icon": "images/book.png",
                 "select_node" : function(e) {
                                    this.toggle_node(e);
                                    return false;
                                }
            },
            "moveType": {
                "icon": "glyphicon glyphicon-transfer"
            }
        }
    }).on('changed.jstree', function (NODE, REF_NODE) {
         //Loads the new file on button click however, it is out of sync, it 
        //requires to be clicked two times. 
        var clicked_file = REF_NODE.node.a_attr.href;
        if (clicked_file.length < 5){
            return
        }
        console.log(clicked_file);
         // Actual changing happens here. 
        change_current_doc(clicked_file, doc_src);
        // data is set here. 
        $('#doc_container').html(doc[0]);
    })

});

我的 json 数据在 js 文件中。

 var doc = ["<!DOCTYPE HTML>\n<html>\n<head>\n    <meta content=\"text/html;...];

我正在寻找的是，是否有任何方法可以在不单击两次的情况下重置旧的 doc 全局变量并设置新变量。

如果我可以选择从服务器访问 Web 应用程序，我就不需要经历这么长的过程。我别无选择，因为用户将从文件夹访问它。

Answer 1

我找到了解决问题的方法。我所做的是以下内容。

在服务器端，我使用与文件名相对应的变量名更新了所有包含 html 的 JavaScript 文件。然后我通过 window['document_name']

例如。

     var name_of_the_file = ["<!DOCTYPE HTML>\n<html>\n<head>\n    <meta content=\"text/html;...];

我创建了另一个 JavaScript 文件，其中包含要包含的所有文件的数组。例如。
```
 var js_doc_files = ['path/to/name_of_the_file.js', ...];
```

在 index.html 文件中，我执行了以下操作。

function insert_js_docs() {
 // Loops through all files and add them in the index.html as a JavaScript 
  file in the head section of the document.
  for (var j = 0; j < js_doc_files.length; j++) {
    var doc_script = document.createElement('script');
       doc_script.setAttribute('src', js_doc_files[j]);
       document.head.appendChild(doc_script);
   }
}
 // executes the insert here. 
 insert_js_docs();


$(document).ready(function () {

 $('#st_side_menu').jstree({
    "plugins": [
        "types",
        "unique",
        "wholerow",
        "changed",
        "conditionalselect"
    ],
    "types": {
        "default": {
            "icon": "images/book.png",
             "select_node" : function(e) {
                                this.toggle_node(e);
                                return false;
                            }
        },
        "moveType": {
            "icon": "glyphicon glyphicon-transfer"
        }
    }
}).on('changed.jstree', function (NODE, REF_NODE) {
    var clicked_file = REF_NODE.node.a_attr.href;
      if (clicked_file.length < 5){
         return
      }
    // get the document name without extension and set it to
    // the window object to get the clicked item html data. 
      var doc_name = clicked_file.split('.')[0].replace(/-/g, '_');
    // Set it to the content container div
      $('#doc_container').html(window[doc_name]);
   })
});

现在只需单击即可。此外，性能方面它是好的。页面的 RAM 使用量从 25MB 左右开始，达到最大值 75MB，这已经足够了。

通过用 html 中的另一个脚本替换它来重新分配外部 JavaScript 全局变量

Reassigning external JavaScript global variable by replacing it with another script in html

html

javascript

jquery

cross-domain

jstree