Mam widżet interfejsu użytkownika, który należy umieścić w ramce IFRAME, zarówno ze względów wydajności, jak iz łatwością możemy dystrybuować go do witryn stowarzyszonych. Interfejs użytkownika widżetu zawiera wskazówki, które wyświetlają się na wierzchu innej zawartości strony. Zobacz zrzut ekranu poniżej lub go to the site, aby zobaczyć go w akcji. Czy istnieje sposób, aby zawartość z ramki IFRAME pokrywała się z zawartością ramki rodzica?Czy istnieje sposób, aby zawartość z przelewu IFRAME na ramkę nadrzędną?
Odpowiedz
Nie jest to niemożliwe. Ignorując wszelkie historyczne powody, w dzisiejszych czasach byłaby to luka w zabezpieczeniach - np. wiele witryn umieszcza niezaufaną zawartość w elementach iframe (źródło iframe jest innym źródłem, więc nie można zmodyfikować ramki nadrzędnej zgodnie z tą samą zasadą pochodzenia).
Jeśli taka niezaufana zawartość ma mechanizm umieszczania treści poza ramkami elementu iframe, może (na przykład) umieścić "identyczny" element logowania (lub cokolwiek innego) na prawdziwych polach logowania ramki nadrzędnej, a tym samym może ukraść nazwa użytkownika/hasło. Co by było do dupy.
O ile wiem, to nie można zrobić. Dlaczego nie skorzystać z żądania XHR i zamiast tego zapełnić div?
Właśnie to robimy obecnie, ale - jak wspomniano powyżej - jednym z wymogów jest umożliwienie stronom trzecim umieszczenie IFRAME jako widgetu na ich stronach. Obecna implementacja także freeziing UI, ale jestem pewny, że mogę obejść to. –
Możesz po prostu określić interfejs API XHR i zezwolić innym na podłączenie się do niego, ale uznają to za stosowne (umożliwiając im oczywiście wyłączenie skryptów, ale niech tak będzie). – eyelidlessness
Byłoby to bezpieczne tylko wtedy, gdy rzeczywiście ufasz zawartości/widgetowi - zaletą iframe jest to, że efektywnie piaskownicę (dzięki tej samej zasadzie pochodzenia). – olliej
Może to oznaczać, że jest nieodpowiedni w świetle Twoich wymagań lub może nie pomóc (!), Ale może warto sprawdzić UFrame. Jest to rodzaj hybrydy elementów iframe i div, która mogłaby zostać spakowana jako widget (najlepiej byłoby podać klientom tag <script>
, który zasysałby UFrame i odpowiedni znacznik). Nie jestem pewien, czy uda się osiągnąć wymaganą nakładkę, ale jest to warte zabawy. Przepraszam, nie mogę być bardziej konkretny, ale nie jest to coś, czego sam użyłem, po prostu dodałem do zakładek trochę czasu na przyszłe odniesienia.
Jeśli znasz bezwzględną najwyższą wartość, jaką można uzyskać na szczycie narzędzia, możesz utworzyć element div, który jest wysokością zawartości + najwyższą odległością wyświetlaną na ekranie. Wyrównaj element iframe do dolnej części elementu div. upewnij się, że element iframe i div są przezroczyste. następnie zawartość iframe z wskazówką narzędzia powinna zostać wyświetlona. Chociaż ustawia się to na ból głowy, aby upewnić się, że elementy takie jak podświetlanie działają tak samo we wszystkich przeglądarkach.
Nie mogłem znaleźć sposobu, aby zawartość ramki wypłynęła poza ramkę, ale znalazłem sposób na zhakowanie jej, przesuwając etykietkę narzędzia do dokumentu nadrzędnego i umieszczając go powyżej (z- index) element iframe.
Podejście było:
1) znaleźć iframe w dokumencie macierzystym
2) Wyjmij element podpowiedzi skąd jest w DOM i dodać go do dokumentu macierzystego wewnątrz elementu, który zawiera iframe.
3) prawdopodobnie musisz dostosować indeks Z i pozycjonowanie, w zależności od tego, w jaki sposób robiłeś to w pierwszej kolejności.
Możesz uzyskać dostęp do dokumentu nadrzędnego elementu iframe za pomocą parent.document.
jQuery(tooltip).remove(); var iframeParent = jQuery("#the_id_of_the_iframe", parent.document)[0].parentNode; iframeParent.appendChild(tooltip); //adjust z-index, positioning
To nie zadziała, jeśli te dwa dokumenty pochodzą z różnych domen. – keaukraine
Nest aktualna iframe i zasugerował div, wewnątrz iframe nadrzędnej, a następnie spaść w iframe nadrzędnej do 3 stron, co najlepsze z obu światów!
Odkryłem jednak, że elementy "