Question

Instead of open an external web page into an iframe, I wonder if it’s possible to “read” the external web HTML code like the DIV tags and there content to create a new HTML page with XSLT?

Answer 1

The below link is a sample that uses jQuery to read an XML file from the server and display the data on the page:

• http://think2loud.com/reading-xml-with-jquery/
• http://www.think2loud.com/examples/xml/

It is important to note that the returned data is strict XML. You could also return JSON.

I would strongly recommend using a framework (such as jQuery) to retrieve the data rather than use the XMLHttpRequest directly as there are numerous cross browser issues to consider. Also jQuery has a nice API for manipulating the DOM once you have retrieved the data.

EDIT

Below is an untested sample of how you could do something similar to the above example when retrieving an HTML file. Please note, I am glossing over some important jQuery functions. If you decide to go this route, you should read the Getting Started tutorial. In particular the bits about Selectors and Manipulation.

// the get() function is used to retrieve a file
jQuery.get(

    // the filename on the server is "somefile.html"
    "somefile.html",

    // the contents of "somefile.html" are passed to this function
    function(html) {

        // use jQuery to find all <p> tags and append them
        // to <div id="resultContainer">
        jQuery(html).find("p").each(function(ix, p) {
            jQuery("#resultContainer").append(p);
        });
    },

    // lets jQuery know the file type we are retrieving is an HTML file
    "html"
);