jQuery diálogo sobre el contenido de otro sitio

Estoy usando el encantador y simple comando de dialog jQuery para abrir un cuadro de diálogo frente a contenido embebido de terceros. Este contenido incrustado podría ser una página de cualquier sitio web. PUEDO hacer que esto funcione en algunos sitios (Yahoo, Google) pero NO PUEDO hacer que funcione en otros sitios (MSN, Johnlewis, FT).

He eliminado todo lo posible del código a continuación para dar los primeros pasos del problema: el código tal como se muestra funciona bien y el cuadro de diálogo se muestra. ¡Pero, comente la línea YAHOO y elimine el comentario de la línea MSN, entonces el diálogo no se mostrará!

     .ui-widget-header { border: 1px solid #aaaaaa; background: #1f84f5 url(images/ui-bg_highlight-hard_75_1f84f5_1x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; font-size: 20pt; } .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; font-size: 20pt;}   $(document).ready(function() { $( "#thedialog" ).dialog( "destroy" ); $( "#thedialog" ).dialog({height:400, width:600, modal: true, buttons: {Cancel: function() {$( this ).dialog( "close" );}} }); });     
My girl lollipop

Lo único que puedo pensar es que debe ser algo en uno de los sitios web que no funcionan y que está en conflicto con mi código. Lo he intentado todo para interceptar el error, pero no puedo encontrar lo que lo está causando.

¿Alguien puede ayudarme por favor?

NOTAS: – (1) Sé que el ejemplo que se muestra no necesita PHP, pero la versión más completa sí (simplemente eliminé la mayor parte del código PHP para mantener este ejemplo pequeño). – (2) Estoy usando JQuery en otra parte de la página en la versión más completa, así que, idealmente, me gustaría quedarme con JQuery, en lugar de presentar un marco / método alternativo.

    [edit] Aparentemente está funcionando para algunas personas … yo mismo no puedo hacer que funcione sin los cambios a continuación … [/ edit]

    La consola Firebug es útil para depurar cosas como esta. En este caso, recibí un $ (‘# thedialog’) no es un mensaje de error de función .

    Lo hice funcionar usando jQuery noConflict:

      

    Supongo que algo en esas páginas está en conflicto / anulando $, pero parece funcionar bien (probado msn.com).

    Echa un vistazo a esta página para más información.

    aunque no pude reproducir el problema por mi parte, la respuesta de Terry Seidler es válida. Experimentará colisiones con sitios que ya tienen diálogos y JQuery.

    Tienes 2 métodos para atacar este problema (no creo que el método ‘no conflict’ funcionará ya que también estás usando plugins UI)

    1. compruebe si $ está definido y $.dialog está definido. Si está definido, usa lo que tiene el sitio; de lo contrario, utiliza la carga dinámica

    2. use JS sin formato para agregar el controlador a la onload de página / ventana y ejecute una función. En esta función, debe pegar el código de JQuery y JQuery-UI. Este método usa el scope de la función para evitar problemas de espacio de nombres.

    Solo para hacer que el método 2 sea más claro, crea una imagen del siguiente código JS

     function printMe() { alert("this will print me"); } function printMeToo(){ function printMe(){ alert("this will print me too"); } printMe(); } printMeToo(); 

    Este código debe alertar “esto también me imprimirá”, y ejecutar printMe cualquier otro lugar de la página alertará “esto me imprimirá”. De esta forma, no dañarás las páginas que estás cargando (que también es algo que deberías considerar) y no tendrán ningún efecto sobre ti.

    ¿Cómo se verá? Para ver cómo agregar el controlador de onload JS sin procesar, puede echarle un vistazo a esta pregunta de stackoverflow . digamos que es algo como document.addEventListener( 'onload', function () { ... /* important stuff */ });

    Lo importante es cómo se verá esta función? Entonces esta es la estructura esperada

     function(){ /* important stuff function */ // paste here JQuery definition code (copy paste into here... ) make sure to use the minified code! (function(a,b){function G(a) ... {return p})})(window); // paste other plugins code as well. dialog + ... .... // now your code should be here, exactly like you posted it untouched $("myelement"); // this uses MY JQuery version, and my JQuery-UI version and my plugins without the possibility of an override. The site cannot override my code, and I cannot override the site's code. } /* end of really important stuff function here */ 

    ¿Quieres ver este método en vivo y funcionando? Protejo mi sitio con Incapsula , por lo que muestran su sello en mi sitio (algo así como su diálogo): ¿ven el div flotante en la parte inferior derecha? Usan JQuery y otras cosas allí también, tal como especifico aquí.

    Por cierto, con respecto a CSS, es posible que tenga los mismos problemas allí. Por ejemplo, se refiere a la clase .bottom: otros sitios pueden tener esa clase y CSS exactos. asegúrese de ajustar todo el código de diálogo con un ID único (algo así como gjkelrgjkewrl849603856903ID – y comience todos sus selectores CSS con él para evitar colisiones).

    Debe eliminar el código style="display:none" si desea que el diálogo se abra automáticamente.

    Prueba este código:

            < ?php $targetlink = 'http://www.yahoo.com'; echo file_get_contents($targetlink); ?> 
    My girl lollipop

    Probé tu código y funcionó para mí. Quizás tengas un mensaje de error de php en la fuente generada y entra en conflicto con tu código JS.

    Verifique la fuente generada en el navegador.