jQuery, ajax, display page inside of other page (like iframe)

Question

I need to display a page inside of a page, like an iframe, but using jquery. The pages are not on the same server.

The main page is a html page inside of a cms and the page that needs to be nested is a media page with lists of images or audio files, that is located on another server. The heights will vary on the media pages, so I kinda wanted to stay away from iframes... is there an easy call in jquery that will grab a page like an iframe... or one that degrades to an iframe if js is turned off at the browser level?

Thanks.

Answer 1

Unless your external content is served from the same domain as your main web site, using AJAX for something like this is not that easy, because you'd bump into the same origin policy.

One solution to work around the same origin policy would be to set up a simple reverse proxy on the server, which will allow the browser to use relative paths for the AJAX requests, while the server would be acting as a proxy to any remote location.

If using mod_proxy in Apache, the fundamental configuration directive to set up a reverse proxy is the ProxyPass. It is typically used as follows:

ProxyPass     /external/     http://other-domain.com/

In this case, the browser would be able to request /external/index.html as a relative URL, but the server would serve this by acting as a proxy to http://other-domain.com/index.html.

Then in your JavaScript, you would be able to use the jQuery load() method as follows:

$('#your_div').load('external/index.html');

Another option is to use an iframe, and adjust its height dynamically with JavaScript. You may want to check the following Stack Overflow posts for further reading on this topic:

• Resize iframe height according to content height in it
• Dynamically Resizing an Iframe

You may also want to consider a full server-side solution as @Yi Jiang suggested in a comment above. You could inject the HTML from the external site into your main site before serving it to the client's browser.

Answer 2

You're going to have a hard time getting Ajax content from a different domain. Browsers will not allow it to prevent cross site scripting exploits (XSS). You may be able to use a php based proxy, cURL, or a google Ajax API.

The other alternative is to just use an iframe, and have JavaScript get the content heights, and set the iframe height to be the same (plus padding so browsers don't display scrollbars).

Answer 3

Ajax by definition only works on the same server, due to the same origin policy. What you would need to do is load a page from another server in a PHP file (let's call it xxx.php). Then, you can load xxx.php in div yyy with the following code:

$("#yyy").load("xxx.php");

Answer 4

Mozilla has added Cross-Site-Requests. It's an new HTML5 Standard. But common do not allow Cross-Site-Requests. So you have to do something like mentioned before. If you will use the PHP-Solution, use this:

<?php
    $external = file_get_contents($_POST['external']);
    echo $external;
?>

$().post("ajax.php", {external: "http://www.example.com/"}, function(data) {
    html = $("div#extract", data).html();
    $("div#insert").html(html);
}, "html");