JQuery UI - external websites in Tabs

Question

Hi, i've got a (probably very simple) problem with jquery. I'm running a Java Servlet webproject in a local tomcat server and I try to become acquainted with jquery, especially jquery tabs. Basically i will load an external websites into tabs and found a demo code as follows:


(head)

<link type="text/css" href="css/jquery.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="jquery-ui.js"></script> 
<script type="text/javascript"> 
$(function() {
    $("#tabs").tabs({
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
            }
        }
    });
});
</script> 

(body)

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
    <li><a href="#tabs-2">Proin dolor</a></li> 
    <li><a href="http://google.com"&gt;Aenean lacinia</a></li> 
</ul> 
<div id="tabs-1"> 
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
</div> 
<div id="tabs-2"> 
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
</div> 

Tabs 1 and 2 are normal static tabs, and in tab 3 I try to load a webpage (e.g. here google.com). I made out that local sites, for example sites running on this particular tomcat server, are displayed in the tab. But as soon as i call an external site, even if it is redirected by a local site, the tab remains blank. I also checked the timeline with the chromium developer tools and when i open the tab, the browser loads the website, but nothing is displayed.

i hope my description is accurately enough for you.

regards tagtraeumer

Answer 1

you cannot make an standard ajax call outside of your app. if you site runs at www.example.com, any standard ajax call you make must have the same protocol (e.g. http), host (e.g. www), same port (e.g.8080), and same domain (e.g. example.com).

You can make the div that wraps that tab contain an iframe, and set the src of the iframe to be google.com, if your goal is display google in the tab.

google "same origin policy" for more info.