jQuery diálogo sobre el contenido de otro sitio

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

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

<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 
    <style> 
     .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;} 
    </style> 
     <script> 
      $(document).ready(function() { 
       $("#thedialog").dialog("destroy"); 
       $("#thedialog").dialog({height:400, width:600, modal: true, 
        buttons: {Cancel: function() {$(this).dialog("close");}} 
       }); 
      }); 
    </script> 
</head> 
<body> 
    <?php 
     // WORKING - these pages DO launch a dialog: 
     $targetlink = 'http://www.yahoo.com'; 
     // $targetlink = 'http://www.bbc.co.uk'; 
     // $targetlink = 'http://www.google.com'; 

     // NOT WORKING - these pages do NOT launch a dialog: 
     // $targetlink = 'http://www.msn.com'; 
     // $targetlink = 'http://www.johnlewis.com'; 
     // $targetlink = 'http://www.ft.com'; 

     echo file_get_contents($targetlink); 
    ?> 
    <div id="thedialog" title="Simple dialog box" style="display:none">My girl lollipop</div> 
</body>

La única cosa que puedo pensar es que debe ser algo en uno de los sitios web que no trabajan que está en conflicto con mi código - Lo he intentado todo a error-trampa de la cuestión, pero no pueden encontrar lo que está causando eso.

¿Alguien me puede ayudar, por favor?

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

Fuente

2012-08-24 Steve

Comprobé el código y parece que funciona. - Necesito más detalles para ayudar –

Te sugiero que uses Chrome con f12, para ver si obtienes errores en la consola JS. para más detalles, he configurado una página wiki sobre las herramientas de los desarrolladores en chrome: http://wiki.mograbi.info/developers-tools-for-web-development - esta publicación también explica cómo JS trampa de errores en diferentes método. –

Nada abre su cuadro de diálogo. Quite el "style =" display: none; "parte de su div y agregue el parámetro" autoOpen: true "a su creación de diálogo – sdespont

[editar] Al parecer, es de trabajo para algunas personas .. yo mismo no puedo conseguir que funcione sin los cambios siguientes, aunque .. [/ editar]

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

lo tengo trabajando con jQuery noConflict:

<script> 
    var $j = jQuery.noConflict(); 
     $j(document).ready(function() { 
      $j("#thedialog").dialog("destroy"); 
      $j("#thedialog").dialog({height:400, width:600, modal: true, 
       buttons: {Cancel: function() {$(this).dialog("close");}} 
      }); 
    }); 
    </script>

Mi conjetura es que algo en esas páginas es conflictivos $/primer orden, pero esto parece funcionar bien (probado msn.com).

Echa un vistazo a this page para obtener más información.

Fuente

2012-08-24 12:55:21

ESTA ES LA MEJOR RESPUESTA: "Volvería a votar" si pudiera, para mostrar a otros que esto lo resolvió, pero soy nuevo aquí, así que si alguien más puede votar esta respuesta por yo (para ayudar a otros a saber que fue quien resolvió el problema) sería genial. Gracias Terry, fue una gran ayuda. Tuve la corazonada de que podría haber estado ocurriendo un conflicto. Incluso tropecé con el comando 'noConflict', pero no pude hacerlo funcionar. Has sido muy útil. – Steve

@Steve - debería poder votar con> 15 puntos ahora, pero también echar un vistazo a la publicación de Guy mograbi, parece tener un poco más de experiencia con esto;) –

-1

He intentado 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.

Compruebe la fuente generada en el navegador.

Fuente

2012-08-24 12:48:15 pirklajos

Esto es realmente un comentario, no es una respuesta. Con un poco más de repetición, [usted podrá publicar comentarios] (http://stackoverflow.com/privileges/comment). Por el momento estoy marcando esta publicación para su eliminación. – Lix

(no funciona aquí tampoco) –

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

probar este código:

<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 
    <style> 
     .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;} 
    </style> 
    <script> 
     $(document).ready(function() { 
      $("#thedialog").dialog("destroy"); 
      $("#thedialog").dialog({height:400, width:600, modal: true, 
       buttons: {Cancel: function() {$(this).dialog("close");}} 
      }); 
    }); 
    </script> 
</head> 
<body> 
    <?php 
     $targetlink = 'http://www.yahoo.com'; 
     echo file_get_contents($targetlink); 
    ?> 
    <div id="thedialog" title="Simple dialog box">My girl lollipop</div> 
</body>

Fuente

2012-08-24 12:58:05 sdespont

De acuerdo, tienes razón (este era un fragmento de código que le quedó) desde la versión más completa: el cuadro de diálogo solía activarse al hacer clic, por lo que la pantalla: ninguno ocultaba el contenido del diálogo hasta que ocurría el clic. Gracias por el comentario) – Steve

a pesar de que yo era incapaz de reproducir el problema en mi final, la respuesta de Terry Seidler es válido. Experimentará colisiones con sitios que ya tienen diálogos y JQuery.

usted tiene 2 métodos para atacar este problema (no creo que el método 'sin conflicto' hará lo que también está usando plugins de interfaz de usuario)

de verificación si se define $ y $.dialog se define . Si está definido, use lo que tiene el sitio; de lo contrario, use dynamic loading
use JS sin formato para agregar el controlador a onload para la 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 alcance de la función para evitar problemas de espacio de nombres.

sólo para hacer el método 2 más clara, la imagen de la 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 me va a imprimir demasiado" - y funcionando printMe en otro sitio en la página alertará "este 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 manejador de onload JS sin formato, puede echar un vistazo a this stackoverflow question. digamos que es algo así 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 */

¿Quiere ver este método en funcionamiento? Protejo mi sitio con Incapsula - y entonces muestran su sello en mi sitio (algo así como su diálogo) - ¿ves el div flotante en la parte inferior derecha? Usan JQuery y otras cosas allí también, tal como especifico aquí.

BTW - con respecto a CSS - puede obtener 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 una ID única (algo así como gjkelrgjkewrl849603856903ID) y comience con todos sus selectores de CSS para evitar colisiones).

Fuente

2012-08-24 13:07:05

¡Bonito! ¡Gracias por la explicación! –

Chico, gracias por la respuesta: la respuesta de Terry resolvió el problema y todo está funcionando. Sin embargo, ¿está sugiriendo a partir de su respuesta que todavía podría enfrentar problemas/conflictos futuros que aún no he descubierto, así que debería probar su enfoque a pesar de que Terry ha funcionado? He intentado lo que "pienso" que quiso decir, pero no funcionó (sin duda debido a mi codificación más que a su sugerencia): 'myfunc() { $ (document) .ready (function() { $ ("#thedialog") .dialog ({height: 400, etc, etc }); \t }; etc, etc ... ' – Steve

editado mi respuesta. –

jQuery diálogo sobre el contenido de otro sitio

Respuesta

Cuestiones relacionadas