Is there a light-weight client-side HTML include method?

Question

I'm looking for a light weight method for client-side includes of HTML files. In particular, I want to enable client-side includes of publication pages of researchr.org, on third party web pages. For example, I'd like to export a page like

http://researchr.org/profile/eelcovisser/publications

(probably just the publications box of that page.)

Using an iframe it is possible to include HTML pages:

<iframe class="foo" style="height: 50em;" width="100%" frameborder="0"
   src="http://researchr.org/profile/eelcovisser/publications"&gt;
</iframe>

However, iframes require specification of a fixed height, while the pages I'm exporting don't have a fixed height. The result has an ugly scrollbar:

http://swerl.tudelft.nl/bin/view/EelcoVisser/PublicationsResearchr

I found one reference to a method that appears to be appealing

http://www.webdeveloper.com/forum/archive/index.php/t-26436.html

It uses an iframe to import the html, and then a javascript call from the included document to a function defined in the including document, which places the contents of the body of the included file in a div of the including file. This does not work in my scenario, probably due to the same origin policy for javascript, i.e. the including and included page are not from the same domain (which is the whole point).

Any ideas for solving this? Which could be either:

• a CSS trick to make the height of the iframe flexible
• a javascript technique to lift the contents of the iframe to a div in the including page
• some other approach I've overlooked

Requirement: the code to include on should be minimal.

Answer 1

As far as I know there is no CSS trick, the only way is to query the iFrame's document.documentElement.offsetHeight or scrollHeight, depending on which is higher, take that value and apply it on the iframe's css height ( add the + 'px' ).

Answer 2

try this ajax with cross domain capability

Answer 3

If you're using jQuery, you can use the load method to reterive a page via AJAX, optionally scrape content from it, and inject it into an existing element. The only problem is that it requires JavaScript.

Answer 4

Why don't you use AJAX?

Try this:

<div id="content"></div>

<script type="text/javascript">

function AJAXObj () {
    var obj = null;
    if (window.XMLHttpRequest) {
        obj = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        obj = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return obj;
}

var retriever = new AJAXObj();

function getContent(url)
{
    if (retriever != null) {
        retriever.open('GET', url, true);
        retriever.onreadystatechange = function() {
            if (retriever.readyState == 4) {
                document.getElementsById('content').innerHTML(retriever.responseText);
            }
        }
        retriever.send(null);
    }
}

getContent('http://researchr.org/profile/eelcovisser/publications');

</script>

And then, you can parse the received page content with JS with regular expressions, extracting whatever content you want from that page.

Edit: Sorry, I guess I missed the fact that it's a different domain. But as ceejayoz said, you could use a proxy for that.

Answer 5

No. The same-origin policy prevents you from doing any of that stuff (and rightly). You will have to go server-side, have a script on your server access that page and copy its contents into your own page (prefeably at build-time/in the background; you could do it at access-time or via AJAX but that would involve a lot of scraping traffic between your server and theirs, which may not be appreciated.

Or just put up with the scrollbar or make the iframe very tall.