Estoy realizando un kiosko para la universidad donde trabajo, el cual se me ha pedido hacer un sistema para los alumnos colando aplicaciones como formulario de la universidad y redes sociales.
El sistema esta hecho en AJAX para evitar las cargadas de paginas. Por tanto es es mi código inicial.
index.php
Código PHP :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Kiosko</title> <!-- Estilos --> <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- JQuery --> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="js/jquery.history.js"></script> <script type="text/javascript" src="js/functions.js"></script> <!-- Color box --> <link rel="stylesheet" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.colorbox.js"></script> </head> <body> <div id="layout"> <!-- Menu de Navegacion --> <header> <div id="logo"><img src="images/logo.PNG"></div> <div class="page-curl"> <ul id="menu"> <li><a href="./"><img src="images/home.png"></a></li> <li><a href="#page1" rel="ajax"><img src="images/readernaut.png"></a></li> <li><a href="#page6" onClick="return mail()" rel="ajax"><img src="images/windows.png"></a></li> <li><a href="#page4" onClick="return google()" rel="ajax"><img src="images/google.png"></a></li> <li><a href="#page5" rel="ajax"><img src="images/wikipedia.png"></a></li> <li><a href="#page2" onClick="return facebook()" rel="ajax"><img src="images/facebook.png"></a></li> <li><a href="#page3" onClick="return twitter()" rel="ajax"><img src="images/twitter.png"></a></li> <li><a href="#page7" onClick="return youtube()" rel="ajax"><img src="images/youtube.png"></a></li> <li><a href="#page8" rel="ajax"><img src="images/Maps.png"></a></li> </ul> <div class="clear"></div> </div> </header> <!-- Cuerpo o contenido de la informavion --> <div class="loading"></div> <section id="body"> <div class="body"> <div id="content"> <!-- Ajax Content --> <h1 align="center">Bienvenidos al Kiosko TEC<span style="color:#C1CD21;">Milenio</span></h1> <p align="center" style="text-shadow: 0px 2px 1px #000;font-size:16px;">Para comenzar presione cualquiera de estas opciones.</p> </div> </div> </section> </div> </body> </html>
En el menu navegacion, envio un parametro llamado page Ej. en cada link hay un #page1,#page2,#page3 etc.
Este se envia a functions.php
Código Javascript :
var a = jQuery.noConflict();
a(document).ready(function () {
a.history.init(pageload);
a('a[href=' + window.location.hash + ']').addClass('selected');
a('a[rel=ajax]').click(function () {
var hash = this.href;
hash = hash.replace(/^.*#/, '');
a.history.load(hash);
a('a[rel=ajax]').removeClass('selected');
a(this).addClass('selected');
a('#body').hide();
a('.loading').show();
getPage();
return false;
});
});
function pageload(hash) {
if (hash) getPage();
}
function getPage() {
var data = 'page=' + encodeURIComponent(document.location.hash);
a.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
a('.loading').hide();
a('#content').html(html);
a('#body').fadeIn('slow');
}
});
}
function google(){
open('http://www.google.com/', 'principal', 'location=no,directories=0,scrollbars=no,resizable=no,menubar=no,status=no,toolbar=no,direction=no,width=1600,heigth=200,left=50px,top=400px');
}
function facebook(){
open('http://www.facebook.com/pages/Universidad-TecMilenio/96599902887', 'principal', 'location=no,directories=0,scrollbars=no,resizable=no,menubar=no,status=no,toolbar=no,direction=no,width=1600,heigth=200,left=50px,top=400px');
}
function twitter(){
open('http://www.twitter.com/#!/tecmilenio', 'principal', 'location=no,directories=0,scrollbars=no,resizable=no,menubar=no,status=no,toolbar=no,direction=no,width=1600,heigth=200,left=50px,top=400px');
}
function youtube(){
open('http://www.youtube.com', 'principal', 'location=no,directories=0,scrollbars=no,resizable=no,menubar=no,status=no,toolbar=no,direction=no,width=1600,heigth=200,left=50px,top=400px');
}
function mail(){
open('https://login.live.com/wlogin.srf?appid=0000000040039B3D&alg=wsignin1.0&lc=3082', 'principal', 'location=no,directories=0,scrollbars=no,resizable=no,menubar=no,status=no,toolbar=no,direction=no,width=1600,heigth=200,left=50px,top=400px');
}Mi problema es en la parte final, realmente por seguridad del equipo donde sera colocado el kiosko que es una PC, al abrir las aplicaciones Facebook, Twitter o Google este no puede abrirse en iframe solo muestra código html vació, por eso tengo que hacerlo esta manera en ventana emergente.
Es pone en riesgo que de que al abrir la ventana se muestra la barra de tareas del sistema operativo y este deja manipular la PC.
He intentado de todo con JQuery(colorBox,lightbox,Greybox etc.) o con JavaScript(Escribo abajo) y no consigo que me muestre el sitio dentro de otro, únicamente funciona como modo ventana emergente.
Código Javascript :
function CargarContenido($pagina_web){
$('#resultado').load($pagina_web);
};El sistema en el que se muestra en Windows 8.
Espero puedan ayudarme a encontrar la manera de resolverlo o ya es desde la consola.
Gracias
