right pure only beauty beautiful javascript css iframe tooltip

javascript - only - pure css tooltip



¿Hay alguna manera de tener contenido de un desbordamiento de IFRAME en el marco principal? (6)

Anida tu iframe actual y el div sugerido, dentro de un iframe padre, luego coloca tu iframe primario en terceros, ¡lo mejor de ambos mundos!

Tengo un widget de UI que debe colocarse en un IFRAME tanto por motivos de rendimiento como para que podamos sindicalizarlo fácilmente en los sitios afiliados. La interfaz de usuario para el widget incluye sugerencias de herramientas que se muestran sobre el resto del contenido de la página. Vea la captura de pantalla a continuación o vaya al sitio para verlo en acción. ¿Hay alguna forma de hacer que el contenido dentro de IFRAME se superponga con el contenido del marco principal?

El contenido de la información sobre herramientas debe superponerse al contenido del marco principal http://segdeha.com/assets/imgs/bookabach-calendar.png


Esto puede estar fuera de lugar ya sea porque no es adecuado a la luz de sus requisitos, o puede que no ayude (!), Pero podría valer la pena revisar UFrame . Es una especie de híbrido entre iframe y div, y probablemente podría empaquetarse como un widget (tu mejor opción sería dar a los clientes una etiqueta <script> que absorbería UFrame y el marcado relevante). De lo que no estoy seguro es de si puedes lograr la superposición que requieres, pero posiblemente valga la pena jugar con ella. Lo siento, no puedo ser más específico, pero no es algo que haya usado yo mismo, solo lo marqué hace un tiempo para referencia futura.


Hasta donde yo sé, no se puede hacer. ¿Por qué no utilizar una solicitud XHR y llenar un div en su lugar?


No pude encontrar una manera de hacer que el contenido del marco fluyera fuera del marco, pero sí encontré una forma de hackearlo, moviendo la información sobre herramientas en el documento principal y colocándolo arriba (z-index) del iframe .

El enfoque fue:
1) encuentre el iframe en el documento principal
2) elimine el elemento de información sobre herramientas de donde se encuentra en el DOM y agréguelo al documento principal dentro del elemento que contiene su iframe.
3) probablemente necesite ajustar el índice Z y el posicionamiento, dependiendo de cómo lo estaba haciendo en primer lugar.

Puede acceder al documento principal de un iframe utilizando parent.document.

jQuery(tooltip).remove(); var iframeParent = jQuery("#the_id_of_the_iframe", parent.document)[0].parentNode; iframeParent.appendChild(tooltip); //adjust z-index, positioning


No, no es posible. Ignorando cualquier razón histórica, hoy en día se consideraría una vulnerabilidad de seguridad, por ej. muchos sitios colocan contenido que no es de confianza en iframes (la fuente del iframe es de un origen diferente, por lo que no puede modificar el fotograma principal, según la misma política de origen).

Si dicho contenido no confiable tuviera un mecanismo para colocar contenido fuera de los límites del iframe, podría (por ejemplo) colocar un "div" de inicio de sesión "idéntico" (o lo que sea) sobre los campos de inicio de sesión reales del marco principal, y podría robar información de nombre de usuario / contraseña . Lo cual apestaría.


si conoce el valor máximo absoluto que puede tener la parte superior de la herramienta, puede crear un div que sea la altura del contenido + la distancia más alta en la que se mostrará la punta de la herramienta. Alinee el marco flotante con la parte inferior de la div. asegúrese de que el iframe y el div sean transparentes. luego debe mostrarse el contenido del iframe con la información sobre herramientas. Aunque esto te provoca el dolor de cabeza de asegurarte de que cosas como destacar funcionan igual en todos los navegadores.