Javascript y jQuery (FancyBox) pregunta

Question

Javascript y jQuery pregunta (FancyBox)

estoy usando la función Javascript a continuación para compartir Twitter (así como otros servicios; el código de función se simplifica a poco Twitter para esta pregunta) que toma la URL y el título de la página que se va a compartir y se invoca en el enlace con onclick. Eso da como resultado la carga de la página de Twitter compartida en una ventana emergente del navegador, es decir, <img src="/images/twitter_16.png" onclick="share.tw()" />

Para ser coherente con otros aspectos de diseño del sitio, lo que me gustaría poder hacer es tener la página de compartir de Twitter abrir no en una ventana de navegador estándar, sino en una ventana de Fancybox (jQuery).

Fancybox puede cargar una página externa en un iFrame cuando el enlace img o href contiene una clase (en este caso class="iframe") en el enlace y en la función de documento preparado en el encabezado.

Ahora, por supuesto, cuando le doy la clase iframe al enlace que también tiene el onclick share.tw(), obtengo dos ventanas emergentes: una ventana emergente del navegador con la página correcta de Twitter compartida cargada, y una ventana emergente de Fancybox jQuery que muestra sitio 404.

¿Cómo puedo cambiar la función para usar Fancybox para presentar la página de Twitter compartida? ¿Es esa una forma correcta de abordarlo? ¿O hay una forma mejor, como implementar la función de compartir en jQuery también?

Gracias ...

Javascript función de compartir:

var share = { 
    tw:function(title,url) { 
     this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url); 
    }, 
    share:function(tpl,title,url) { 
     if(!url) url = encodeURIComponent(window.location); 
     if(!title) title = encodeURIComponent(document.title); 

     tpl = tpl.replace("##URL##",url); 
     tpl = tpl.replace("##TITLE##",title); 

     window.open(tpl,"sharewindow"+tpl.substr(6,15),"width=640,height=480"); 
    } 
}; 

Se invoca, es decir:<img src="/images/twitter_16.png" onclick="share.tw()" />

función FancyBox, invocada por la adición de class="iframe" en la IMG o enlace href

$(".iframe").fancybox({ 
'width' : '100%', 
'height' : '100%', 
'autoScale' : false, 
'transitionIn' : 'none', 
'transitionOut' : 'none', 
'type' : 'iframe' 
}); 

Answer 1

Mi enfoque sería eliminar la inicialización FancyBox y desencadenar directamente desde su función de compartir:

var share = { 
    tw:function(title,url) { 
     this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url); 
    }, 
    share:function(tpl,title,url) { 
     if(!url) url = encodeURIComponent(window.location); 
     if(!title) title = encodeURIComponent(document.title); 

     tpl = tpl.replace("##URL##",url); 
     tpl = tpl.replace("##TITLE##",title); 


     $.fancybox({ 
         'href' : tpl, 
         'title' : title, 
         'width' : '100%', 
         'height' : '100%', 
         'autoScale' : false, 
         'transitionIn' : 'none', 
         'transitionOut' : 'none', 
         'type' : 'iframe' 
         }); 

     return false; 
    } 
}; 

no estoy seguro de que mi sintaxis es correcta, sino algo así como que debe trabajar para usted.

Otro intento diferente puede ser el uso de un ancla de maniquí, alterar sus atributos, y el gatillo clic sobre él:

jQuery(document).ready(function() { 

     $("#dummyLink").fancybox({ 
         'width' : '100%', 
         'height' : '100%', 
         'autoScale' : false, 
         'transitionIn' : 'none', 
         'transitionOut' : 'none', 
         'type' : 'iframe' 
         }); 

     return false; 
    } 
    }; 
}); 
var share = { 
    tw:function(title,url) { 
     this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url); 
    }, 
    share:function(tpl,title,url) { 
     if(!url) url = encodeURIComponent(window.location); 
     if(!title) title = encodeURIComponent(document.title); 

     tpl = tpl.replace("##URL##",url); 
     tpl = tpl.replace("##TITLE##",title); 

     $("#dummyLink").attr('href', tpl); 
     $("#dummyLink").attr('title', title); 
     $("#dummyLink").trigger('click'); 
     return false; 
    } 
}; 

HTML:

<a href="#" title="" id="dummyLink" style="display:none;"></a> 

Answer 2

Lo que veo es que la función window.open, es responsable de abrir la nueva ventana del navegador. Este debería irse. En su lugar, debe establecer el href de un enlace como This goes to iframe, y luego invocar la función fancybox.

Ha sido un tiempo desde que he usado FancyBox, yo prefiero usar jquery-ui.dialog, por lo que podría estar equivocado ..

Answer 3

me he encontrado con este mismo problema exacto usando el plugin jQuery Colorbox. Intenté hacer enlaces Compartir en Twitter y Compartir en Facebook que se abrirían en el cuadro modal.Cuando abre los enlaces, aparece el cuadro modal, sin embargo, el iFrame estará en blanco y solo se mostrará un cuadro blanco.

Desafortunadamente, este es el comportamiento esperado. Tanto la página de intercambio de Twitter como las páginas de intercambio de Facebook tienen instrucciones para salir del marco cuando se sigue el enlace, por lo tanto, el cuadro en blanco que está viendo. Dado que el contenido que se entrega por los sitios respectivos no está bajo su control, no hay forma de detener esto.

Answer 4

No importa cómo cambie su diseño, usar un iframe con Twitter no va a funcionar.

Si reemplaza la URL http://twitter.com con cualquier otra cosa, por ejemplo, http://www.godaddy.com, funcionará. He intentado algo parecido a continuación:

$('h1').click(function(e) { 
    $.fancybox({ 
    href : 'http://www.godaddy.com', // http://twitter.com will not work here 
    title : 'twitter window', 
    width : 640, 
    height : 480, 
    type : 'iframe' 
    }); 
}); 

Esto se debe a Twitter utiliza javascript para iframes "romper" a propósito por razones de seguridad.

Así que su idea de mostrar un iframe de FancyBox de esta manera no puede funcionar si usa Twitter.com. Hay una confirmación de esto y algunas ideas para evitarlo: (como usar llamadas API de un iframe): http://groups.google.com/group/twitter-development-talk/browse_thread/thread/b1bca9ef074086c7

Para sus "otros servicios" que, afortunadamente, no tienen las mismas restricciones (sospecho que algunos de ellos) podría) entonces el otro answer further down the page from wajiw parece un buen cumplido.

Answer 5

Es imposible con Twitter, como otros señalaron.
Si ve la página de inicio de Source of Twitter, verá un pequeño script como este debajo de la etiqueta body.

<script> 
    if (window.top !== window.self) { 
     document.write = ""; 
     window.top.location = window.self.location; 
     setTimeout(function() { 
      document.body.innerHTML = "" 
     }, 1); 
     window.self.onload = function() { 
      document.body.innerHTML = "" 
     } 
    }; 
</script> 

que significa que si usted está en un iframe (auto! = Arriba), sacar una página en blanco.
No hay soluciones posibles.

Answer 6

Tal vez eche un vistazo a http://platform.twitter.com/widgets.js y vea cómo Twitter crea su ventana emergente, luego descubrió si podía incluir ese incide en un widget.