Results 1 to 6 of 6

Thread: document.getElementById from another page?

  1. #1
    Join Date
    Feb 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default document.getElementById from another page?

    Hi,

    with the following code

    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

    Code:
    <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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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:

    Code:
    <!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:

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

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

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

  4. #4
    Join Date
    Aug 2021
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I just want to say that 9 years later this helped me do exactly what I was trying to do. I created an account just to tell you thanks!

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,002
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there abstractionsins,

    it is very kind of you to do that, but I must point out that, sadly John passed away about three years ago.

    John Scheuer Tribute

    coothead
    ~ the original bald headed old fart ~

  6. #6
    Join Date
    Aug 2021
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm sorry to hear that. But apparently his memory lives on.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •