1

Is there any way to access the innerHTML of an external HTML file using javascript or jQuery? For instance, let's say I have HTML File A open in my browser with associated javascript functions written into it. When I hit a button on HTML File A I'd like my javascript functions to search through the innerHTML that's located in HTML File B that's in the same file folder as HTML File A.

The code would look like this:

HTML File A:

<script>
    var source = $("#sampleDiv").html();
    var search = source.search("text");
</script>

HTML File B:

<div id="sampleDiv">Here's some text.</div>

I'm trying to keep these in separate files to keep my code clean. The contents of HTML File B that I'm using in rl is quite lengthy so I'd like to keep my code in HTML File A clean by separating the two.

plumsmugler
  • 111
  • 1
  • 6

2 Answers2

1

To Get the File

There is no way to perform remote operations on an external file from the client without making a request for the file. In this case, the easiest thing to do is to fire off an AJAX or XHR request for the file, and wait for the returned file to load.

Files sent this way can be treated as strings for all intents and purposes.

After You Get the File

Once you have this stringified file, it is sufficient to use jQuery's parseHTML() method on result of your request (you can also use Javascript instead). This returns an array of DOM elements:

var str = "hello, <b>my name is</b> jQuery.";
var html = $.parseHTML(str); // outputs ['hello,', '<b>my name is</b>',' 'jQuery'];
html.map((element) => element.innerText)
    .filter((text) => text != undefined) // outputs ['my name is']

You can then iterate through the array to find the element you seek and its innerText.

Community
  • 1
  • 1
Akshat Mahajan
  • 9,543
  • 4
  • 35
  • 44
  • I think this will work but I'm getting an error when I try to make the AJAX call. I'm doing all of this work on a local drive, nothing over the internet, at least not yet. Is it possible to do AJAX calls on local files? Here's the error I'm getting: XMLHttpRequest cannot load file:///I:/tests/test.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. – plumsmugler Apr 01 '16 at 15:12
  • This is because Google Chrome security doesn't let you do calls to local files not served over HTTP, in order to prevent cross-site scripting. It's not a problem of your Javascript. This is solved by mounting a local server. Run `python -m SimpleHTTPServer()` in the directory containing your HTML files and navigate to the port it's serving on. – Akshat Mahajan Apr 01 '16 at 15:15
  • [Here](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/) is a tutorial about how to use SimpleHTTPServer correctly. – Akshat Mahajan Apr 01 '16 at 15:16
1

This is a job for an Ajax request. Try this:

$.get( "/FileB.html", function( data ) {

  var source = $(data).find("#sampleDiv").html();
  var search = source.search("text");

});

Here replace "FileB.html" with the url to File B.

Poul Bak
  • 10,450
  • 5
  • 32
  • 57