How to access inner HTML of an external HTML file?

Question

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.

where do you load the html B file? in Iframe?

Nilesh
– Nilesh

2016-03-31 21:56:10 +00:00
Commented Mar 31, 2016 at 21:56 — Nilesh
– Nilesh, Commented Mar 31, 2016 at 21:56

Community · Accepted Answer · 2017-05-23 11:45:07Z

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.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Mar 31, 2016 at 22:15

Akshat Mahajan

9,8764 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

plumsmugler Over a year ago

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.

Akshat Mahajan Over a year ago

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 Over a year ago

Here is a tutorial about how to use SimpleHTTPServer correctly.

Poul Bak · Accepted Answer · 2016-03-31 23:25:55Z

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.

answered Mar 31, 2016 at 23:25

Poul Bak

11k5 gold badges39 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to access inner HTML of an external HTML file?

2 Answers 2

To Get the File

After You Get the File

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

To Get the File

After You Get the File

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related