1

I am trying to bypass the error:

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

By including external javascript file containing html data. So what I want to achieve is, to load the html content when a side menu is clicked. In the process, I want the earlier data to be replaced by the new one so that I can replace the old content with the new one. Below is the main part of the code. 

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]);
    })

});

My json data in js file. 

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

What I am looking for is, if there is any way to reset the old doc global variable and set the new one without clicking twice.

I didn't need to go through all this long way if I had an option to access the web application from server. I have no option to get away with this as users will access it from a folder.

wondim
  • 697
  • 15
  • 29
  • https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local/10752078#10752078 – sideshowbarker Apr 12 '17 at 21:27
  • Thanks but I have seen that question and answer before posting this. I have no choice but to find a solution on my remaining problem. – wondim Apr 12 '17 at 21:40
  • So are you testing the web application locally by just loading the source from the filesystem? Or are you testing by serving it from a web server? If you’re not serving it from a web server, then that’s why you’re getting the error message you’re seeing, and the solution is to test using a web server. – sideshowbarker Apr 12 '17 at 21:42
  • Yes, I am trying to load the source from the file system. Unfortunately, I have to make sure it works for file system as the website will be a documentation for a desktop software and users should be able to load it without a web server. – wondim Apr 12 '17 at 21:46
  • So yeah then the answer is, that’s not going to work and there’s no way around it – sideshowbarker Apr 12 '17 at 21:47
  • I feel it is not working because javascript sleeps for few seconds till it reads the new script file variable. I was hoping to find a solution that enable javascript to re-update the new variable quickly. – wondim Apr 12 '17 at 21:50

1 Answers1

0

I found a solution to the problem. What I did was the following.

  1. On the server side, I updated all JavaScript files containing html with a variable name that corresponds to the file name. Then I used a dynamic variable by accessing it through window['document_name']

eg. 

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

  1. I created another JavaScript file that contains an array of all files to be included. eg. 

     var js_doc_files = ['path/to/name_of_the_file.js', ...];

  2. In the index.html file, I did the following. 

    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]);
   })
});

Now it works on single click. Moreover, performance wise it is good. The pages' RAM usage starts around 25MB and reaches a maximum of 75MB, which is good enough.

wondim
  • 697
  • 15
  • 29