Can an HTML / JavaScript pair reference another HTML file?

Question

Given a completed page a.html, is it possible to build b.html which includes JavaScript such that b pulls data from a.html and outputs the data into b.html's window? That is, is there any such thing like src=whatever.js where one can declare a variable of the other HTML page, so that something like this line like this would work (obviously doesn't as it is)?

<html>
<head>
    <title>b.html</title>
</head>
<body>
    <script>
    var images = a.document.body.getElementsByTagName ("img");

etc.

Thanks again for any help! I see the 'may have your answer' above, but that uses JQuery, which I'm not looking for.

You can just pull the file with AJAX and slap the content into a container on the page. — CollinD
– CollinD, Commented Apr 2, 2017 at 21:03

Max · Accepted Answer · 2017-04-02 22:11:20Z

The simple answer is 'no, javascript is explicitly forbidden from accessing local filesystem, so there's no way a.html can read the contents of b.html even if they reside in the same folder locally'.

That being said, however, if the are both being served by a web server, you could always ask it to fetch a.html for you and then use javascript to parse it, invisbile to the user, and extract the info you need from it.

Take a look at a rather clumsy example below, using invisible iframe HTML element - basically a container you can put on page and load a different page into, and then have access to its DOM tree. (There are limitations to prevent XSS attacks, but since both a.html and b.html are from one and the same domain, these do not apply in your case.)

a.html

<!doctype html>
<html>
 <head>
......
 </head>
 <body>
...
<div id=aa>
 Some interesting stuff... 
</div>
...
</body>
</html>

b.html

<!doctype html>
<html>
 <head>
......
 </head>
 <body>
...
<iframe src="a.html" onLoad="alert('The contents of div with id=aa from a.html is: ['+this.contentDocument.getElementById('aa').innerHTML+']');"></iframe>
...
</body>
</html>

Here, it loads the entire document a.html into element on page b.html (which you can make invisible through, say CSS) and, once it's loaded, it extracts the necessary div from the DOM tree of page a.html (which is accessible now through the iframe object in DOM of the current, b.html page) and makes use of its innerHTML property to prove that it can access it.

Here, the contentDocument property of the iframe object on page b.html points to the normal 'document' object of the page we have loaded into the iframe, giving us all the options we have when dealing with any page when we have its document root.

This example is clumsy by many counts of course, not least being the fact that you load TWO pages (b.html and a.html) into the browser (albeit a.html is invisible) instead of one and that is hardly efficient.

But it's a start and for realy simple scenarios it might be an adequate if unsophisticated solution )

Both your simple answer and the longer one well satisfied my question. Thanks!

Collectives™ on Stack Overflow

Can an HTML / JavaScript pair reference another HTML file?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related