Existe-t-il un moyen d'avoir du contenu d'un débordement IFRAME sur le cadre parent?
J'ai un widget d'interface utilisateur qui doit être placé dans un IFRAME à la fois pour des raisons de performances et nous pouvons donc le syndiquer facilement sur les sites affiliés. L'interface utilisateur du widget comprend des info-bulles qui s'affichent en haut du contenu d'autres pages. Voir capture d'écran ci-dessous ou aller sur le site pour le voir en action. Existe-t-il un moyen de faire en sorte que le contenu de l'IFRAME chevauche le contenu du cadre parent?
Non ce n'est pas possible. Ignorant toutes les raisons historiques, de nos jours, il serait considéré comme une vulnérabilité de sécurité - par exemple. de nombreux sites placent du contenu non approuvé dans des iframes (la source iframe étant une origine différente et ne peut donc pas modifier le cadre parent, selon la même politique d'origine).
Si un tel contenu non approuvé avait un mécanisme pour placer le contenu en dehors des limites de l'iframe, il pourrait (par exemple) placer un div de connexion "identique" (ou autre) sur les champs de connexion réels d'un cadre parent, et pourrait ainsi voler des informations de nom d'utilisateur/mot de passe . Ce qui serait nul.
Je ne pouvais pas trouver un moyen de faire sortir le contenu du cadre hors du cadre, mais j'ai trouvé un moyen de le contourner, en déplaçant l'info-bulle dans le document parent et en le plaçant au-dessus (z-index) de l'iframe .
L'approche était:
1) trouver l'iframe dans le document parent
2) supprimez l'élément info-bulle de son emplacement dans le DOM et ajoutez-le au document parent à l'intérieur de l'élément qui contient votre iframe.
3) vous devrez probablement ajuster le z-index et le positionnement, selon la façon dont vous le faisiez en premier lieu.
Vous pouvez accéder au document parent d'un iframe à l'aide de parent.document.
jQuery (info-bulle) .remove ();
var iframeParent = jQuery ("# the_id_of_the_iframe", parent.document) [0] .parentNode;
iframeParent.appendChild (tooltip) ;
// ajuster l'index z, positionner
Cela peut être hors de propos soit parce que cela ne convient pas à la lumière de vos besoins, soit que cela n'aide pas vraiment (!), Mais cela peut valoir la peine d'être vérifié Frame . C'est une sorte d'hybride d'iframe et de div, et pourrait probablement être présenté comme un widget (votre meilleur pari serait de donner aux clients un <script> tag qui aspirerait UFrame et le balisage correspondant). Ce dont je ne suis pas sûr, c'est de savoir si vous pouvez obtenir la superposition dont vous avez besoin, mais cela vaut peut-être la peine de jouer avec. Désolé, je ne peux pas être plus précis, mais ce n'est pas quelque chose que j'ai réellement utilisé moi-même, je l'ai simplement mis en signet il y a quelque temps pour référence future.
si vous connaissez le sommet absolu de la valeur que le sommet de l'outil peut avoir, vous pouvez créer un div qui est la hauteur du contenu + la distance la plus élevée dans laquelle l'info-bulle s'affichera. Alignez l'iframe sur le bas du div. assurez-vous que l'iframe et le div sont transparents. alors le contenu iframe avec l'info-bulle devrait s'afficher. Bien que cela vous prépare au mal de tête pour vous assurer que les choses comme la mise en évidence fonctionnent de la même manière dans tous les navigateurs.
Imbriquez votre iframe actuel et le div suggéré, à l'intérieur d'un iframe parent, puis déposez votre iframe parent à des tiers, le meilleur des deux mondes!
Pour autant que je sache, cela ne peut pas être fait. Pourquoi ne pas utiliser une demande XHR et remplir un div à la place?