JQuery UI - sites Web externes dans les onglets

Question

J'ai un problème (probablement très simple) avec jquery. J'exécute un webproject Java Servlet sur un serveur Tomcat local et j'essaie de me familiariser avec jquery, en particulier avec les onglets jquery. Fondamentalement, je vais charger un des sites web externes en onglets et trouvé un code de démonstration de la manière suivante:


(tête)

<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> 

(corps)

<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">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 et 2 sont les onglets statiques normaux, et dans l'onglet 3, j'essaie de charger une page Web (par exemple ici google.com). J'ai fait ressortir que les sites locaux, par exemple les sites fonctionnant sur ce serveur Tomcat particulier, sont affichés dans l'onglet. Mais dès que j'appelle un site externe, même s'il est redirigé par un site local, l'onglet reste vide. J'ai également vérifié la chronologie avec les outils de développement de chrome et quand j'ouvre l'étiquette, le navigateur charge le site Web, mais rien n'est affiché.

J'espère que ma description est assez précise pour vous.

concernant tagtraeumer

Answer 1

vous ne pouvez pas faire un appel standard ajax en dehors de votre application. Si votre site fonctionne sur www.example.com, tout appel ajax standard que vous effectuez doit avoir le même protocole (par exemple http), hôte (par exemple www), même port (par exemple, 8080) et même domaine (par exemple, exemple.com).

Vous pouvez rendre la div qui enveloppe cet onglet contient un iframe, et définir le src de l'iframe à google.com, si votre objectif est d'afficher google dans l'onglet.

google "même règle d'origine" pour plus d'informations.