Part I introduced you to the concept of embedding and external page into your own without the use of IFrames.  In this post I will show you how the actual code works underneath that embeds my Flickr Photos page.

For security reasons you will not be able to call the flickr page directly using JAH.  Instead, you can really only call pages that are on the same domain.  For this reason I created a page called flickr.aspx that simply writes out my external flickr photos page.  Therefore, if you go directly to flickr.aspx on my site it will be as if you were visiting the actual flickr site.  However, there is a major difference between the external flickr page and my internal representation of it, which is the addresses of the links on the page.  Because flickr uses relative paths for their links, the links when represented on an external server will point to a location on that server and not on flickr.  Do not worry, though, because I have solved this issue with some simple JavaScript that we will get to later. 

First off, lets look at the flickr.aspx page that simply writes out the external flickr page.

<%@ Page SmartNavigation="False" Language="C#" enableViewState="false" %>
<%@ Import Namespace="System.Net" %>
<%@ Import Namespace="System.IO" %>

<script language="C#" runat="server">    
    void Page_Load()
    {
        WebRequest wrGetUrl = WebRequest.Create("http://flickr.com/photos/lyonpreul");
        wrGetUrl .Proxy = WebProxy.GetDefaultProxy();
        Stream objStream = wrGetUrl .GetResponse().GetResponseStream();
        StreamReader objReader = new StreamReader(objStream);
        string sLine = "";
        int i = 0;
        while (sLine != null)
        {
            i++;
            sLine = objReader.ReadLine();
            if (sLine != null)
                Response.Write(sLine);
        }
     }   
</script> 
 

As you can see, this is a page that uses inline C# to simply point at my flickr site and write it out on the response stream.  This could easily be modified to receive the Url of the page you want to display.  However, for security reasons and because I do not have any other use for this page, I am leaving it as it is.  Also, you should note that you will need to run this on a server that supports IIS and has .NET installed.

Another nice feature of the above code is that it is ready for use behind a proxy.  If your web server requires a proxy to get to your flickr page then you can easily change the proxy settings using the WebProxy class.

Below is the JAH code that simply replaces the element on the page with this flickr.aspx.  This JAH code is an adaptation of the original code found here.  I put all of the code that you will see from this point forward in a page called default.htm.  This will be the page that the user visits and that will display the embedded flickr page.

<script>
    function jah(url) {
        // native XMLHttpRequest object
        document.all['change'].innerHTML = 'sending...';
        if (window.XMLHttpRequest) {
            req = new XMLHttpRequest();
            req.onreadystatechange = function() {jahDone();};
            req.open("GET", url, true);
            req.send(null);
        // IE/Windows ActiveX version
        } else if (window.ActiveXObject) {
            req = new ActiveXObject("Microsoft.XMLHTTP");
            if (req) {
                req.onreadystatechange = function() {jahDone();};
                req.open("GET", url, true);
                req.send();
            }
        }
    }    

    function jahDone() {
        // only if req is "loaded"
        if (req.readyState == 4) {
            // only if "OK"
            if (req.status == 200) {
                results = req.responseText;
                
                document.all['change'].innerHTML = results;
            } else {
                document.all['change'].innerHTML="jah error:\n" +
                    req.statusText;
            }
        }
    }
</script>

The only thing left for this to work is to call the jah function with the flickr.aspx page and have an element with an ID of ‘change’ that will simply get replaced.  Because I do not want the user to have to click a link and because I want it to occur whenever the page is loading I will use the window.onload method to call this function.  The window.onload event occurs before the body.onload event, which we will use later to rewrite the link addresses.  For now simply add the following code to call the jah function when the window has loaded.

<script type="text/javascript">
       function init() {
           // quit if this function has already been called
           if (arguments.callee.done) return;
           // flag this function so we don't do the same thing twice
           arguments.callee.done = true;
           jah('flickr.aspx');
       };
       /* for Mozilla */
       if (document.addEventListener) {
           document.addEventListener("DOMContentLoaded", init, false);
       }
       /* for Internet Explorer */
       /*@cc_on @*/
       /*@if (@_win32)
       document.write("<script id=__ie_onload defer src=BLOCKED SCRIPTvoid(0)><\/script>");
       var script = document.getElementById("__ie_onload");
       script.onreadystatechange = function() {
     if (this.readyState == "complete") {
      init(); // call the onload handler
     }
       };
       /*@end @*/
       /* for other browsers */
       window.onload = init;
</script>

As you can see in the above code, the jah function is called with our flickr.aspx page passed in as a parameter in the init function.  This init function gets called when the window is loaded.  The page should load the flickr page just fine at this point.  The only remaining steps are to rewrite the URLs on the page and to tweak the CSS for the flickr site.  Because I want to dive into the CSS lets do that now.

Essentially, I simply am hiding all of the unnecessary elements on my flickr page so that they do not get in the way of my normal page design.  To do this I added some styles at the top of the page to set these elements to display:none;  Below is a snippet of some of the styles I used.  If you would like a more complete look simply view the source on my photos page.

<style>
    #TopBar, #person_hover, #contactChangerPopup{
       display: none;
    }
    .Footer {
       display: none;
    }
    .Main {
       display: block;
    }
    .Pro { display: none; }
    .slideshow img { display: none; }
    .Privacy img { display: none; }
</style>

The above should be enough to get you started, again for the remaining elements simply view the source to get the styles I used.  You can customize the presentation in any way you would like at this point.  This is probably the best feature of the technique that I am demonstrating to you.  As a result, you can essentially make any page look however you want it to while that page is running on a separate server.

Because I want to make this more than 2 parts I will demonstrate the link rewriter in the next part.  I hope you have enjoyed both looking at JAH and the above code, which you can use to embed a flickr page into your site.  Stay tuned for the next part where you will learn how to rewrite all of the links on the page to point to the flickr site after everything has loaded.