CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 7 of 7
  1. #1
    Join Date
    Mar 2006
    Posts
    228

    How to load image from another page

    hello,

    I am using JavaScript to do the following:

    I have 2 pages that I am using..

    Page 1 has all the images on it (images.htm)
    Page 2 is the page I want to display the images. (main.htm)

    So what I am tring to do is, on Page 1 it has a image on there using the img tag it also has a ID tag.

    I want to use Page 2 get that image source from page 1 by the img tag using the ID tag.

    however there is more than 1 image on Page 1. but once I work out how to do one I will know how to do the rest.

    I know this sounds silly to load the page this way, but Page 1 no one will see and I want to be able to get the image source from that page.

    anyone have any ideas on how to do this? Hope you understand what I am tring to do.

    So far I know how to get the image source if it's on the same page but don't know how to get the image source from another local page..

    Code:
    var a=document.getElementsByTagName('a');
    for(var i=0; i<a.length; i++)
    {
        var img=a[i].getElementsByTagName('img');
        for(var j=0; j<img.length; j++)
        {
            alert(img[j].src);
        }
    }
    Thanks.
    Last edited by aaronking; January 13th, 2012 at 08:47 PM.

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: How to load image from another page

    First off, that is very inefficient, incorrect code. You're looking through all the anchors just to search within for <img> tags. Why even bother? One simple loop through all the <img> tags will be sufficient.

    Second, your bigger issue is going to be reading from another page. Unless you're loading the content through AJAX, you're going to get denied access do to cross page scripting.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Mar 2006
    Posts
    228

    Re: How to load image from another page

    hello,

    thanks for the feedback..

    but how would you do it with ajax?

  4. #4
    Join Date
    May 2002
    Posts
    10,943

    Re: How to load image from another page

    One of the simplest JavaScript uses...http://w3schools.com/ajax/default.asp
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  5. #5
    Join Date
    Mar 2006
    Posts
    228

    Re: How to load image from another page

    Hello,

    Thanks for pointing me to the correct way..

    I ended up creating something simple

    Code:
    <script type="text/javascript">
    var testing = $.get("test.htm", function(data){ 
    alert(data); 
    });
    </script>
    however, how can I only get some parts of the HTML it returns?

    I only want to be able to read the IMG tags only not the whole lot.

    Any ideas?

    Thanks.

  6. #6
    Join Date
    Mar 2006
    Posts
    228

    Re: How to load image from another page

    Hello,

    Still have problems doing it..

    so far I can get the HTML Source of the page I want to get the data from, but can't parse the tags from the code.

    Any ideas?

    Code:
    <script type="text/javascript">
    var testing = $.get("test.htm", function(data){ 
    			 
    var arr = new Array();
          arr = document.getElementsByTagName("IMG");
    var feed = arr[1].getAttribute("src");
          alert(feed);
    
    });
    </script>
    Last edited by aaronking; January 14th, 2012 at 02:25 AM.

  7. #7
    Join Date
    May 2002
    Posts
    10,943

    Re: How to load image from another page

    Since I don't know what your get() function is, I really cannot help you...and even greater a question, why are you even bothering with that?

    Code:
    var xmlhttp;
    if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();}
    else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var imgs = xmlhttp.responseText.getElementsByTagName("img");
        // now work with your images
      }
    }
    xmlhttp.open("GET", "page.html", true);
    xmlhttp.send();
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Posting Permissions

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





Click Here to Expand Forum to Full Width

Featured