PDA

View Full Version : document.getElementById from another page?



akdream
02-11-2012, 02:35 PM
Hi,

with the following code


<script type="text/javascript">
x=document.getElementById("intro");
document.write("<div>This is my content: " + x.innerHTML + "</div>");
</script>

I can display the content of another div


<div id="intro" style="display: none">My sample content</div>

So far so good. Now to my question/problem...
I would like to have two HTML pages
- Page1.html
- Page2.html
I would like to display the content of the "intro" div residing in Page2.html on Page1.html but I don't know how to specify in the code to look for div "intro" in Page 2.html

Can you help?

That would keep me from having to edit the content on both pages. If I would want to change the content of that div I would only have to edit it on Page2.html and it would apply to Page1.html as well.

jscheuer1
02-11-2012, 03:35 PM
In javascript that would mean using AJAX, which is complicated. There are other also complicated ways. In my opinion AJAX would be best if you must use javascript. And since you want the added utility of cherry picking content from the external page, using jQuery (a javascript library of routines) will simplify the code involved a lot.

However, since you don't appear to be changing things after page load, a server side include would be better and even simpler than the jQuery approach below. But server side is not javascript and requires that your host has PHP or another server side language available to your pages.

Here's a bare bones demo using jQuery's load() method which utilizes AJAX -

Page1.html:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#result').load('Page2.html #intro');
});
</script>
</head>
<body>
<div id="result"></div>
<div>Other Stuff Here</div>
</body>
</html>

Page2.html:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<div id="intro">Hi, this is the Intro!</div>
<div>There's other stuff on this page, but it's ignored on the page that's importing just the intro div</div>
</body>
</html>

There's one subtle difference between what you say you want and what will happen here and that can be changed if required. That difference is that after the import, the DOM of the body on Page1.html will look like so:


<body>
<div id="result"><div id="intro">Hi, this is the Intro!</div></div>
<div>Other Stuff Here</div>

</body>

instead of:


<body>
<div id="result">Hi, this is the Intro!</div>
<div>Other Stuff Here</div>

</body>

But for all practical purposes there's no difference as far as how the page would look unless css style intervenes in some way. And that is certainly not the case with this simple demo, and something in your control in most cases should it become an issue.

Also of note is the fact that this demo works fine locally in Firefox with Page1 and Page2 in the same folder. However, with some other browsers and/or if the files are in different folders, it may require that the installation be live on the web in order to work.

In any case both pages must be on the same domain.

akdream
02-11-2012, 11:42 PM
Hi John,

thank you very much, that's exactly what I wanted to be able to do and it works great!