CODEWITHSUNDEEP
javascripthtml
failure
failure

Reputation: 235

Can an HTML / JavaScript pair reference another HTML file?

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.

Upvotes: 0

Views: 281

Answers (1)

Max
Max

Reputation: 26

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 )

Upvotes: 1

Related Questions